Cara Membuat Widget Footer Tiga Kolom Di Blog

Cara Membuat Widget Tiga Kolom Footer Di bawah Posting Blog. Sobat Blogger, untuk anda yang mementingkan tampilan halaman anda, membuat footer 3 kolom di halaman blog anda adalah suatu keuntungan, selain penampilan blog anda terlihat profesional namun jika anda mengisi footer tersebut dengan halaman post terkait, maka keuntungan yang di dapat adalah anda bisa menampilkan post artikel anda lebih banyak dan efektif untuk mengurangi tingkat bounce rate sebuah blog, untuk itu saya menyarankan anda untuk mengikuti tutorial saya disini untuk membuat widget footer tiga kolom, lihat seperti gambar di bawah ini.

Itu adalah tampilan gambar footer yang akan saya buat, dalam tampilan cukup elegant, keren, dan sangat ringan untuk di pakai,  jadi tentu tidak akan mengurangi kecepatan loading blog anda, bagaiamana , apakah anda tertarik membuatnya? silahkan ikuti tutorial yang akan saya berikan.

Cara membuat widget 3 kolom footer di bawah posting blog.
1. Buka akun blogger anda.
2. Pilih menu > Template > Edit Html
3. Lalu copy kode dibawah ini dan letakan tepat di atas kode ]]></b:skin>

 /* Footer 3 Colom Madamvia */
#footer-column-divide {
background:#2980b9; color:#fff; font-size:14px; clear:both; display:block;
}
#footer-column-divide a {
color:#fff;
}
#footer-column-divide a:hover {
color:#333;
}
#footer-column-divide h2, #footer-column-divide h3 {
height:25px; font-size:16px; color:#fff; text-align:left; border-bottom: 2px solid #fff; padding:0px; margin:10px;
}
.footer-column {
padding: 10px;
}
.footer-column .widget-content {
padding: 10px;
} 

4. Selanjutnya copy kode di bawah ini dan letakan tepat diatas kode <div id='footer'>

<div id='footer-column-divide'> 
<div id='footer-left' style='width: 35%; float:left; margin:0; text-align:left;'> 
<b:section class='footer-column' id='column-left' preferred='yes' style='float:left;'/> 
</div> 
<div id='footer-center' style='width: 30%; float: left; margin:0; text-align: left;'> 
<b:section class='footer-column' id='column-center' preferred='yes' style='float:left;'/> 
</div> 
<div id='footer-right' style='width: 35%; float: right; margin:0; text-align: left;'> 
<b:section class='footer-column' id='column-right' preferred='yes' style='float:right;'/> 
</div> 
<div style='clear:both;'/> 
</div>

5. Klik save template.

Catatan : jika anda tidak menemukan <div id='footer'> pada template anda, anda bisa menempatkannya di atas footer credit link, soalnya di setiap template pasti berbeda beda kode.
-Jika ada yang ingin di tanyakan untuk tutorial ini, silahkan ajukan di kolom komentar.

Share to:

Google+ Facebook Twitter