Cara Membuat Widget Footer 3 Kolom Di Bawah Postingan Blog

Posted on 0 views

Cara Membuat Widget Footer 3 Kolom Di Bawah Posting Blog berfungsi untuk menambahkan beberapa widget penting agar template menjadi lebih rapi dan tidak membosankan bagi anda yang sangat mementingkan kualitas tampilan pada halaman blog. Membuat footer 3 Kolom juga sangat efektif untuk template blogger jika dilihat dari beberapa aspek keuntungan. Nah apa saja yang kita keuntungan yang kita dapatkan memasang footer 3 kolom pada blog diantara lainnya tampilan blog anda terlihat lebih profesional, apabila anda memasangkan widget berupa halaman terkait seperti contohnya recent post, random post, dan juga popular post pada footer ini maka keuntungannya kita dapat menampilkan postingan lebih banyak dan hal ini juga dapat membantu mengurangi tingkat bounce rate pada blog.

Cara Membuat Widget Footer 3 Kolom Di Bawah Postingan Blog

Maka dari itu melalui artikel ini saya menyarankan untuk anda menerapkan hal ini yakni memasang widget footer 3 kolom di blog agar blog anda lebih terlihat pro. Untuk contoh gambar footer 3 kolom ini anda bisa melihat gambar pada berikut ini.

Nah diatas adalah contoh gambar footer yang nantinya akan kita buat. Urusan desain pastinya menurut saya sudah terlihat elegant, keren, dan tentunya sangat ringan digunakan pada template anda. Selain ringan, widget ini juga tidak membebani kecepatan loading template blog anda. Apabila anda tertarik dan berminat membuat widget ini maka ikuti dan terapkan langkah dibawah ini pada blog anda.


Cara Membuat Widget Footer 3 Kolom Di Bawah Postingan Blog

1. Silahkan masuk dan login ke dalam dashboard blog anda.

2. Pililah menu Template > Edit HTML.

3. Tambahkan kode di bawah ini tepat di atas kode </b:skin>

#footer-wrapper{background:#242424;border-top:6px solid #9200B6;overflow:hidden;margin:0 auto;padding:15px 20px 0;color:#dddddd}
#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 20px 20px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 20px 0;clear:both}
#footer-wrapper h2{margin:0 0 10px 0;padding:0;border-bottom:3px solid #555;text-transform:uppercase;position:relative;color:#eeeeee}
#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:#dddddd}
#footer-wrapper a:hover{color:#ffffff}

4. Langkah selanjutnya tambahkan kode di bawah ini tepat di tengah pembuka kode tag footer. Misal footer pada template blog anda dinamakan dengan id Footer, maka tambahkan kode di bawah ini tepat di bawah kode¬†<div id=’footer’>. Dan jika kode footer tidak ada maka anda bisa tambahkan kode ini di atas kode footer credit link.

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

5. Simpan template anda.

Keterangan.

Pada Kode Css diatas anda bisa merubah warna sesuai keingin dan kecocokan pada template yang digunakan.

Demikianlah artikel ini saya buat. Semoga dapat menjadi bermanfaat.


Leave a Reply

Your email address will not be published.