Cara Membuat Footer Responsive di Blog – Halaman Footer 2 atau 3 Kolom

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

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

<!– Footer Widget forumblogindo.com –>
<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 –>

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

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

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

Mudah kan? Silakan dicoba satu per satu dari Panduan SEO design blog di atas. Dengan membuat footer responsive di blog, semoga bisa membuat semakin berkualitas blog sobat.

Demikian tips SEO Cara Membuat Footer Responsive di Blog – Halaman Footer 2 atau 3 Kolom, semoga bermanfaat. Salam blogger.