Cara Membuat Widget Footer Tiga Kolom Di Blog

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.

Cara Membuat Widget Tiga Kolom Footer Di bawah posting Blog


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.

Bagikan Ke
16 Komentar untuk "Cara Membuat Widget Footer Tiga Kolom Di Blog"

Wahhh Bagus Juga Nih Mba, Saya Izin Coba Ya :D





fokus-belajar.blogspot.com

Silahkan Kang Arif, Trmksh kunjungannya :)

keren Mba tips nya udah saya terapin di blog saya, kunjungan balik ya :D
http://idecre4tive.blogspot.com/

trimakasih mas Tommy, pasti saya kunjungi.. :)

Nambah ilmu lagi nih seputar desain template..ijin save neng..

sis intinya kode :
div... <= sebagai hiasan / kerapian B|
section <= utama widget B|

salam newbie Aloveinsia.blogspot.com

Makasih gan informasinya :) sangat bermanfaat :)
Ijin share http://grosiracemaxstasik.com/obat-tradisional-alzheimer/

Terimakasih atas informasinya sangat bermanfaat :)

http://kedaijellygamatgoldg.com/obat-herbal-keloid/

ini dia yang di cari-cari, terimakasih atas informasinya :)
http://jellygamatgoldg31.com/

Trmaksih. Kalau mau tampilkan widget Footer setiap halaman gimna ya ma s?

mas letak footer credit link itu di mana??
mhon pencerahan nya!!

Makasih madam, blog saya http://erradigital.blogspot.com baru, sekarang balik ke template bawaan tp kayknya banyak yang harus di sesuaikan lagi

thank om http://www.duniaandroid.ga/