Cara Membuat Footer Widget Responsive di Blog

Romeltea | Follow @romel_tea
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 Responsive di Blog

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.*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

No comments on Cara Membuat Footer Widget Responsive di Blog

Post a Comment

No Spam, Please!

Contact Form

Name

Email *

Message *