Cara Membuat Footer Widget Responsive di Blog

Baca Juga

Footer Widget adalah elemen desain blog yang ada di bagian bawah, sebelum elemen footer credit. Widget Footer ini bisa menampilkan elemen seperti di sidebar, misalnya label, posting terbaru, posting terpopuler, atau link, atau apa saja.

Berikut ini cara Membuat Halaman Footer widget responsive 2 atau 3 Kolom. Ini penampakannya.

Cara Membuat Footer Widget 2 Kolom Responsive

1. Login ke Blogger. Pilih Blog yang akan ditambah widget footer.
2. Klik Tema > Edit HTML
3. Copas kode di bawah ini di atas kode ]]></b:skin>

#footer-widget{width:100%;background:#111;margin:0 auto;text-align:left;border-top:7px solid #1658A0;overflow:hidden}
#footernya-masyadi a{color:#9c9c9c}
#footer-inners{overflow:hidden;padding:10px 20px}
.footer .widget{padding:0 1px}
.footer .widget-content{padding:0}
.footer li{list-style:none;border-bottom:1px dotted #666;padding:3px 0}
.footer h4{font-size:150%;font-weight:400;color:#fff;font-family:Oswald,Arial,Sans-serif;text-transform:uppercase;padding-bottom:10px}
#footer-left{width:34.5%;float:left;overflow:hidden}
#footer-right{float:right;width:64.5%;overflow:hidden}
@media only screen and (max-width:700px){
.footer{width:100%!important;float:none!important}
}

4. Copas kode di bawah ini tepat di atas kode </body>

<div class='clear'/>
<footer id='footer-widge'>
<b:section class='footer' id='footer-left' showaddelement='yes'/>
<b:section class='footer' id='footer-right' showaddelement='yes'/>
</footer> 

5. Save! Simpan template.
6. Klik Layout (Tata Letak) > add a Gadget

7. Selesai

Cara Membuat Footer Widget Responsive 3 Kolom

1. Tema > Edit HTML
2. Copas kode di bawah ini di atas kode ]]></b:skin>

#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}
@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}
}

3. Copas kode di bawah ini tepat di atas kode credit link sobat

<!-- Footer Widget Start -->
<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 -->

4. Save template
5. Klik Tata Letak > add a Gadget (tambahkan gadget) > buat tiga gadget baru
6. Selesai

Cara Membuat Footer Widget Responsive 4 Kolom

1. Tema > Edit HTML
2. Copas kode di bawah ini di atas kode ]]></b:skin>

#patner {background:#0073c9;overflow:hidden;margin:0 auto;padding:15px;}
#patner .lefts {float:left;width:25%;}
#patner .kiri {float:left;width:25%;}
#patner .centers {float:right;width:25%;}
#patner .rights {float:right;width:25%;}
#patner img{max-height: 50px;height:50px;vertical-align:center;}
#patner .lefts .widget, #patner .kiri .widget, #patner .centers .widget,#patner .rights .widget {margin:0 10 5px 0;}
#patner h2 {display:none;}
@media only screen and (max-width:640px){
#patner {padding:10px;}
#patner .lefts, #patner .centers, #patner .kiri, #patner .rights {float:left;width:50%;max-width:50%}
#patner .lefts .widget, #patner .kiri .widget, #patner .centers .widget, #patner .rights .widget{margin:5px 0 10px 0;}}
@media only screen and (max-width:480px){
#patner {padding:8px;}
}

3. Copas kode di bawah ini tepat di atas kode </body>

<aside id='patner' >
<b:section class='lefts section' id='lefts' preferred='yes'>
</b:section>
<b:section class='lefts section' id='kiri' preferred='yes'>
</b:section>
<b:section class='centers section' id='centers' preferred='yes'>
</b:section>
<b:section class='rights section' id='rights' preferred='yes'>
</b:section>
</aside>
<div class='clear'/>

5. Save template
6. Pilih tata letak > add gadget (tambahkan gadget) > buat dua gadget baru

7. Selesai

Demikian Cara Membuat Footer Widget Responsive di Blog - Halaman Footer 2, 3, atau 4 Kolom.*