Membuat Widget Footer 3 Kolom Responsive Di Blog

Widget dibagian footer saya lihat sangat sering digunakan pada template jaman sekarang, apalagi bagi yang templatenya bergaya magazine, sebelumnya saya pernah berbagi template Felix SEO, namun di template tersebut tidak saya sertakan karena tidak sesuai dengan konsep template tersebut yang berkonsep Minimalis.

Bagi yang ingin menambahkan widget 3 kolom di bagian footer bisa menggunakan cara ini, bonus saya sertakan CSS agar footer tersebut responsive, namun CSS widget ini sangatlah sederhana, silahkan sobat sesuaikan sendiri dengan tampilan blog sobat.

Pertama-tama menuju ke Template > Edit HTML

Tambahkan CSS dibawah ini tepat diatas </style>

#footer-wrapper{background:#242424;overflow:hidden;margin:0 auto;padding:20px 15px 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 15px 15px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}

Langkah selanjutnya adalah meletakkan HTML dari widget footer ini, letakkan diatas credit link blog sobat

<!-- Footer Widget Musafus.web.id -->
<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><div class='clear'/>
<!-- Footer Widget End -->

Langkah terakhir adalah meletakkan CSS Media Screen di bawah ini agar footer menjadi responsive, letakkan tepat diatas </style>

@media screen and (max-width:768px){
#footer-wrapper .left{float:none;width:100%}
#footer-wrapper .center{float:none;width:100%}
#footer-wrapper .right{float:none;width:100%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both}
}

Klik Simpan Template

Silahkan menuju ke Tata Letak  untuk menambahkan widgetnya, reload atau refresh terlebih dahulu

Sekian tutorial kali ini mengenai Widget Footer 3 Kolom, Semoga Bermanfaat.