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 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.
Al Bani HR Thursday, December 15, 2016 Blogging
Berlangganan via Email
Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.
Post a Comment