Bani Cyber Blog – Membuat blog jadi SEO itu menjadi suatu keharusan untuk kita. Maka dari itu, Kamu perlu membaca artikel mengenai cara untuk modifikasi blog agar blog jadi seo 100%. Footer merupakan bagian dari blog yang letaknya berada dibawah blog.


Footer biasanya dibuat untuk meletakkan info mengenai umur blog ataupun credit link sang pembuat template dan juga untuk meletakkan widget.


Tapi kamu juga bisa membuat bagian footer untuk meletakkan widget, seperti pada bagian sidebar. Untuk meletakkan widget pada bagian footer, kamu perlu membuat kolom. Kolom footer bisa dibuat 1, 2 dan maksimal 3 kolom. Jangan membuat kolom terlalu banyak pada footer, akan terlihat jelek jika terlalu banyak kolom.


Dan pada artikel kali ini saya akan membagikan cara membuat footer 2 kolom dan 3 kolom untuk widget di blog. Baiklah, kita akan mulai dari footer 2 kolom.


FOOTER 2 KOLOM

Kelebihan dari footer 2 kolom yaitu memiliki ruang yang lebih besar jadi dapat memuat widget yang berukuran besar, jadi tunggu apa lagi… inilah cara membuat footer 2 kolom di blog.

  • Buka Blogger.com
  • Buka Template » Edit HTML
  • Cari Kode Berikut
]]></b:skin>
  • Letakkan Kode CSS berikut Diatas Kode tadi
#footer-wrapper {background: #232323; margin: 0 auto; padding: 12px 18px; overflow: hidden; color: #fff; font: normal normal 11px Arial, sans-serif; border-top: 4px solid #008db8;
}
#footer-wrapper .left {float: left; width: 33%
}
#footer-wrapper .right{ float: right; width: 33%
}
#footer-wrapper .left .widget, #footer-wrapper .right .widget{ margin: 0 15px 15px 0; clear: both
}
#footer-wrapper h3{ padding: 7px 0 2px 0; margin: 0 0 10px 0; border-bottom: 1px solid #008DB8; font-size: 12px; font-weight: bold; color: #fff; text-align: center; line-height: 1.4em; text-transform: uppercase;
}
#footer-wrapper a:link {color: #008DB8;
}
@media only screen and (max-width: 768px){
#footer-wrapper .left{ float: none; width: 97%}
#footer-wrapper .right{ float: none; width: 97%}
#footer-wrapper .left .widget, #footer-wrapper .right .widget{ margin: 0 0 15px; clear: both};
}
  • Berikutnya, Cari kode berikut
<div class='footer-outer'>
  • Tambahkan kode berikut diatas kode tadi
  <div id='footer-wrapper'>
  <b:section class='left' id='left' preferred='yes'>
  </b:section>
  <b:section class='right' id='right' preferred='yes'>
  </b:section>
  </div>
<div class='clear'/>
  • Save Template


FOOTER 3 KOLOM

Footer 3 kolom ini lebih banyak dipakai oleh blogger Indonesia, karena dapat memuat banyak widget. Kelebihan footer 3 kolom yaitu tampilan blog akan terlihat lebih keren.

Sedangkan, Kekurangan 3 kolom ini yaitu memiliki ruang yang lebih kecil untuk setiap kolom widget. Kamu masih tertarik, jadi sekarang kamu harus melakukan apa? langsung saja, ini dia caranya: 
  • Buka Blogger.com
  • Buka Template » Edit HTML
  • Cari Kode Berikut
]]></b:skin>
  • Letakkan Kode CSS berikut Diatas Kode tadi
#footer-wrapper {background: #232323; margin: 0 auto; padding: 12px 18px; overflow: hidden; color: #fff; font: normal normal 11px Arial, sans-serif; border-top: 4px solid #008db8;
}
#footer-wrapper .left {float: left; width: 33%
}
#footer-wrapper .center{ float: left; width: 33%
}
#footer-wrapper .right{ float: right; width: 33%
}
#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
}
#footer-wrapper h3{ padding: 7px 0 2px 0; margin: 0 0 10px 0; border-bottom: 1px solid #008DB8; font-size: 12px; font-weight: bold; color: #fff; text-align: center; line-height: 1.4em; text-transform: uppercase;
}
#footer-wrapper a:link {color: #008DB8;
}
@media only screen and (max-width: 768px){
#footer-wrapper .left{ float: none; width: 97%}
#footer-wrapper .center{ float: none; width: 97%}
#footer-wrapper .right{ float: none; width: 97%}
#footer-wrapper .left .widget, #footer-wrapper .center .widget{ margin: 0 0 15px; clear: both};
}
  • Berikutnya, Cari kode berikut
<div class='footer-outer'>
  • Tambahkan kode berikut diatas kode tadi
  <div id='footer-wrapper'>
  <b:section class='left' id='left' preferred='yes'>
  </b:section>
  <b:section class='center' id='center' preferred='yes'>
  </b:section>
  <b:section class='right' id='right' preferred='yes'>
  </b:section>
  </div>
<div class='clear'/>
  • Save Template


Nah, berakhirlah artikel mengenai cara membuat footer 2 dan 3 kolom untuk blog. Apabila kamu masih bingung, jangan segan segan untuk bertanya via komentar.

Berlangganan via Email

Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.


0 Tanggapan Untuk "Cara Membuat Footer Widget 2 Kolom & 3 Kolom Di Blog"

Post a Comment