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

Membuat Halaman Footer Responsive 2 atau 3 Kolom di Blog - Apabila rekan-rekan ingin membuat halaman footer responsive di blog, tips ini layak jenengan coba. Halaman footer biasanya digunakan dan terletak pada bagian bawah blog atau website. Tentu halaman footer blog ini bisa digunakan untuk memberikan informasi seperti label, about me, kontak dan random post.

Contoh demo Halaman Footer di blog ojogerah.blogspot.com

Dengan menambahkan halaman footer blog ini, paling tidak menambah halaman widget lebih banyak. Selain yang berada di sidebar blog, juga bisa ditambahkan di sini.

Cara Membuat Footer Responsive di Blog 2 Kolom

Langkahnya cukup mudah kok, yakni sebagai berikut:

1. Masuk akun blogger

2. Pilih template > HTML

3. Copas kode di bawah ini di atas kode ]]></b:skin>

#footernya-masyadi{width:100%;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2CqEinNMWxWq-EZZYyQe8jXXd_u1C6oSE4rjYB0PApr4S9unddc8Gdd8j7L4SOua1W32zJ1UHRGv7lc9wb9WgsLdQCw19kss8VDTB_j7oi14B37Ml6pc_-34_zdLm5grKj9KqAwsFxY/s1600/footer.jpg) repeat-x top;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='footernya-masyadi'>
<b:section class='footer' id='footer-left' showaddelement='yes'/>
<b:section class='footer' id='footer-right' showaddelement='yes'/>
</footer> 

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

Cara Membuat Footer Responsive di Blog 3 Kolom

1. Masuk akun blogger

2. Pilih template > HTML

3. Copas kode di bawah ini di atas kode </style> atau ]]></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}
}

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

Cara Membuat Footer Responsive  di blog 4 Kolom

1. Masuk akun blogger

2. Pilih template > HTML

3. 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;}}

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. Untuk DEMO footer responsive di blog, seperti di situs ojogerah.blogspot.com.

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