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.
halaman footer 4 kolom di blog

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(http://3.bp.blogspot.com/-XH2hBNMtXBA/U6_EpW3r0gI/AAAAAAAAAJk/mQFHapyZWj8/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.

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

13 Responses to "Cara Membuat Footer Responsive di Blog - Halaman Footer 2 atau 3 Kolom"

  1. Cara memberi warna seperti contoh di atas gimana om ?

    BalasHapus
    Balasan
    1. tinggal klik kanan bagian warna yang dituju, akan ada kode warnanya. Biasanya diawali dengan kode background:#....

      Untuk referensi kode warna, silakan saja buka di menu navigasi blog ini bagian "alat ngeblog" pilih kode warna.

      Semoga bisa membantu

      Hapus
  2. Balasan
    1. membuatnya pakai hp juga bisa mas..silakan siapkan toolsnya untuk diintasl di hp mas..

      Hapus
  3. mas kalo mau ganti ukuran fontnya gmana ya?

    BalasHapus
    Balasan
    1. cari saja element font pada footer mas di edit tempate html..tinggal pilih font sesuai dengan keinginan...

      Hapus
  4. klu buat 3 column, column yang ketiga ti x comel laa sebab column ketiga jatuh. column kedua dan pertama ok sangt. terbaik. sangat membantu, tapi yg ketiga tu, mohon pencerahan ye en

    BalasHapus
    Balasan
    1. itu cuma masalah ukurannya saja..jadi silakan sesuaikan ukurannya (lebarnya) dan pada pengaturan responsive itu sudah otomatis mengikuti..salam

      Hapus
  5. Terimakasih mas artikelnya sangat membantu !!!

    BalasHapus
  6. aduhh ngasih trik tapi kodenya gak bisa di copy paste. piye toh

    BalasHapus
    Balasan
    1. Hal ini karena maraknya blogger yang suka Copas mas, hehe..harap maklum. Kalau sempat nanti saya buatkan yang bisa di copas kodenya :)

      Hapus
    2. Pakai text box aja mas, itu bisa di copas Codenya

      Hapus

Hanya sebagian kecil komentar yang disetujui. Jangan membuang waktu Anda jika hanya untuk melakukan "spam" di Forum Blogger Indonesia ini. So, komentar yang Anda tuliskan menunjukkan tingkat kualitas diri Anda.

Salam blogger

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel