Cara Membuat Footer 3 Kolom di Blog

Cara Membuat Footer 3 Kolom di Blog ~ Footer blog memang bikin blog kita jadi keren. Sebenarnya tidak di pasang footer di blog juga tidak apa-apa. Tapi jika blognya dipasang footer akan lebih terlihat keren. Seperti blog punya saya ini, tadinya tidak ada footer nya sekarang saya pasang footer 3 kolom di blog yang pastinya keren dan menarik.
 Fungsi dari footer ini adalah untuk menampilkan widget atau link Artikel blog Anda. Lalu bagaimana cara membuat footer 3 kolom di blog? Caranya sangat gampang sekali, Anda cukup mahir HTML. Kalau tidak mahir juga bisa, cukup copy paste kode scriptnya.

Cara Membuat Footer 3 Kolom di Blog

1. Buka blog Anda
2. Setelah login, kemudian pilih template, terus pilih Edit HTML
3. Kemudian cari kode ]]></b:skin> Di template blog Anda. Tekan CTRL+F untuk mencarinya agar lebih cepat.
4. Lalu Copy pastekan kode di bawah ini tepat diatasnya kode ]]></b:skin>

#footer-wrapper{width:97%} #footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
 /*=============== Start FOOTER 3 KOLOM ===============*/
#footer-wrapper{background:#3d3d3d;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia9BQ0KK-cW4PSVBtI6h0guj0NV2-2zwo7-aPPbuJR6q9tEgfIJcddWsj-G3LaYS7e66vuoFiM3K-DAmOESjqvFnGDIlCxqMAbC5LVYIdMjsU6WY8YjXPmpB6pFdcRArAhHGBYKF-yqywJ/s1600/line.png);background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;padding:20px 15px 0;color:#00fced;} #footer-wrapper .left{float:left;width:34%} #footer-wrapper .center{float:left;width:34%} #footer-wrapper .right{float:right;width:32%} #footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both} #footer-wrapper .right .widget{margin:0 0 15px 0;clear:both} #footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #0c0909;text-transform:uppercase;position:relative;color:#0090ff} #footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0} #footer-wrapper li{margin:5px 0;padding:0 0 0 0} #footer-wrapper a{color:#00f3fc} #footer-wrapper a:hover{color:#fc0000}
 /*=============== End FOOTER 3 KOLOM ===============*/

5. Belum selesai, Anda juga harus memasukkan kode dibawa ini tepat diatas kode </body>

<footer id='footer-wrapper'>
  <b:section class='left section' id='left' preferred='yes'/>
  <b:section class='center section' id='center' preferred='yes'/>
  <b:section class='right section' id='right' preferred='yes'/>
</footer>

6. selesai, silakan di cek.

Anda bisa mengganti ukuran footernya sesuai dengan ukuran blog Anda. Kode di atas sesuai dengan template yang saya punya. Silakan ganti kode width:97% sesuai ukuran template yang Anda pakai.
Untuk warna background footernya juga bisa Anda rubah, dengan mengganti kode warna yang ada.

Di atas adalah kode footer 3 kolom yang sangat sederhana dan mudah di edit di blog. Untuk contoh footer 3 kolom Anda bisa lihat di blog saya ini. 
INGAT!!
Copy semua kode yang ada di atas, kode yang pertama untuk mengatur ukuran, warna, background footer. Sedangkan kode yang ke dua untuk mengatur banyaknya footer yang akan tampil di blog.

Demikian artikel tentang cara membuat footer 3 kolom di blog semoga bisa membantu Anda. Janagn lupa untuk share artikel sederhana ini ya. 

Share :