Menambahkan Border Ke Footer dari Blog

Bagaimana Tambahkan Borders ke Footer dari Blogger Template

Untuk menambahkan baris (umumnya dikenal sebagai perbatasan) untuk footer template Blogger kita perlu menambahkan beberapa CSS styling.

Sebelum mulai menambahkan perbatasan ada 3 nilai untuk dipertimbangkan:

• lebar perbatasan (misalnya ketebalan garis 1px, 2px, 3px dan sebagainya)
• garis gaya perbatasan (padat, titik-titik, putus-putus, ganda)
• warna perbatasan (warna hex)

1. Bagaimana Tambahkan Perbatasan suatu Sekitar luar Blogger Footer
   Pertama kita menambahkan properti perbatasan dan kemudian menambahkan gaya perbatasan, perbatasan dan lebar perbatasan nilai warna. Dalam contoh-contoh berikut ini hanya dengan mengubah nilai-nilai ini kita dapat mencapai banyak hasil yang berbeda.
   
   
   • Untuk Tambahkan Perbatasan dashed Sekitar luar Blogger Footer
     Dengan kode berikut garis hitam tebal putus-putus 1px akan ditambahkan sekitar luar footer.
     
     # Footer-columns {
     
     margin: 0 auto;
     clear: both;
     }
     
     Ubah ke:
     
     # Footer-columns {
     
     border: 1px dashed # 000000;
     clear: both;
     margin: 0 auto;
     }
     
   • Untuk Tambahkan Perbatasan Dotted Sekitar luar Blogger Footer
     Dengan mengubah garis hitam putus-putus ke perbatasan bertitik itu adalah sederhana untuk mendapatkan gaya garis yang berbeda.
     
     # Footer-columns {
     clear: both;
     margin: 0 auto;
     }
     
     Ubah ke:
     
     # Footer-columns {
     
     border: 1px dotted # 000000;
     clear: both;
     margin: 0 auto;
     }
     
   • Untuk Tambah Perbatasan Padat (Biru 3px tebal) Sekitar luar Blogger Footer
     Untuk menambahkan tekanan ekstra kita dapat mengubah warna garis dan ketebalannya. Di sini saya telah membuat garis berwarna biru bukannya hitam dan menebal dari 1px ke 3px.
     
     # Footer-columns {
     clear: both;
     margin: 0 auto;
     }
     
     Ubah ke:
     
     # Footer-columns {
     
     border: 3px solid # 336699;
     clear: both;
     margin: 0 auto;
     }\
     
2. Untuk Tambahkan Perbatasan parsial ke Blogger Footer
   Kadang-kadang kita mungkin ingin menambahkan perbatasan hanya satu bagian dari wilayah footer daripada semuanya. Sekali lagi kita menambahkan properti perbatasan tapi kita tambahkan dengan nilai berikut: (atas, bawah, kiri, kanan) tergantung di mana kita ingin menempatkan perbatasan.
   
   
   • Untuk Menambahkan Border padat ke Atas dari Blogger Footer
     # Footer-columns {
     clear: both;
     margin: 0 auto;
     }
     
     Ubah ke:
     
     # Footer-columns {
     
     border-top: 1px solid # 000000;
     clear: both;
     margin: 0 auto;
     }
     
   • Untuk Menambahkan Border padat ke Bawah Blogger Footer
     # Footer-columns {
     clear: both;
     margin: 0 auto;
     }
     
     Ubah ke:
     
     # Footer-columns {
     
     border-bottom: 1px solid # 000000;
     clear: both;
     margin: 0 auto;
     }
   • Untuk Tambahkan Perbatasan dashed ke Atas dari Blogger Footer
     # Footer-columns {
     clear: both;
     margin: 0 auto;
     }
     
     Ubah ke:
     
     # Footer-columns {
     
     border-top: 1px dashed # 000000;
     clear: both;
     margin: 0 auto;
     }
   • Untuk Tambahkan Perbatasan burik untuk Kedua Atas dan Bawah dari Blogger Footer
     # Footer-columns {
     clear: both;
     margin: 0 auto;
     }
     
     Ubah ke:
     
     # Footer-columns {
     
     border-top: 1px dotted # 000000;
     border-bottom: 1px dotted # 000000;
     clear: both;
     margin: 0 auto;
     }
   • Untuk Tambahkan 4px Dotted Border tebal untuk Kedua Atas dan Bawah dari Blogger Footer
     # Footer-columns {
     clear: both;
     margin: 0 auto;
     }
     
     Ubah ke:
     
     # Footer-columns {
     
     border-top: 4px dotted # 000000;
     border-bottom: 4px dotted # 000000;
     clear: both;
     margin: 0 auto;
     }
     
   • Untuk Tambahkan 5px Perbatasan Biru Padat tebal untuk Kedua Atas dan Bawah dari Blogger Footer
     # Footer-columns {
     clear: both;
     margin: 0 auto;
     }
     
     Ubah ke:
     
     # Footer-columns {
     
     border-top: 5px solid # 336699;
     border-bottom: 5px solid # 336699;
     clear: both;
     margin: 0 auto;
     }