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.

20 Responses to "Cara Membuat Widget Footer Tiga Kolom Di Blog"

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





    fokus-belajar.blogspot.com

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

    BalasHapus
    Balasan
    1. trimakasih mas Tommy, pasti saya kunjungi.. :)

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

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

    salam newbie Aloveinsia.blogspot.com

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

    BalasHapus
  6. Terimakasih atas informasinya sangat bermanfaat :)

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

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

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

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

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

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

    BalasHapus
  12. Makasih info nya bener bener gampang di mengerti.

    BalasHapus
  13. Terimakasih banyak mas tutorialnya. berhasil dipasang di template blog saya..

    BalasHapus
  14. Terima kasih banyak madam, sudah saya praktekan dan work 100%. Cuma kendala saya 1, saya kira script footer ini sudah responsive, ternyata belum. Jadi saya harus meresponsifkannya sendiri. Tetapi tetap terima kasih banyak madam, salam Bang Jarwo.

    BalasHapus
    Balasan
    1. widget footer ini biasanya sudah otomatis resposive mas, mengikuti id:wrapper.. kecuali di pasang diluar tubuh body template...

      Hapus
  15. Gabung yuk di situs judi kami,

    terpercaya, Domino 99, bandarQ, Hanya di

    CebanQQ, c*m
    Bonus cashback: 0.4%
    Refferal: 20%
    Bagi member baru tingkat kemenangan diatas 78%+

    berdasarkan statistik bosku :)
    tunggu promo menarik dari kami :)

    BalasHapus
  16. footer creditt link itu yang mana yaa?

    BalasHapus