Footer atau biasa yang disebut bagian yang terletak paling bawah pada sebuah hal apapun, terutama bagian tampilan sebuah Blog (template), jika lebih detailnya mengenai footer ini yakni sebuah bagian kaki seperti namanya yakni foot yang berarti kaki dan biasa nya kaki tersebut terletak bagian paling bawah pada bagian mana pun.
Membahas tentang footer, terutama footer pada bagian sebuah tampilan Blog yang dimana letak nya pada bagian kaki tersebut. Membuat bagian sebuah footer memang sangat lah penting di karena kan di bagian footer ini memiliki bagian terpenting seperti hal nya tanda copyright ( hak cipta ) tombol halaman dan widget lainnya yang dapat kalian atur sendiri.
Mengapa tampilan sebuah footer ini dinyatakan sangat penting ? Yups menurut IntrikU footer amat begitu penting dalam sebuah Blog terutama pada blogger ini di karenaka jika sebuah tampilan (template) maka di nyatakan template itu tidak lah / masih kurang belum lengkap di karena kan tadi, tidak nya ada tanda copyright (hak cipta) yang menandakan bahwa siapa lah pemilik Blog tersebut dan blog tersebut dinyatakan masih kurang menjadi hak karena tidak adanya tanda copyright pada halaman Blog tersebut, karena letak copyright pada umumnya hanyalah bertempatan pada bagian footer saja yang memungkinkan pembaca lebih mudah tau setelah sudah membaca² nya artikel² milik situs kalian tersebut.
Tidak hanya copyright saja yang dianggap penting, widget lainnya juga pun ada yang penting jika widget tersebut terdapat footer nya widget tersebut diterapkan pada footer nya yakni seperti :
- Widget Labels
- Kumpulan label tertentu
- Box Sosmed
- Popular Post
- Recent Post
- Box Google+
- Box Facebook
- Box Histats
- Laman
- Dan masih banyak widget yang cocok lainnya yang diterapkan pada bagian footer tersebut.
Baca Juga: Cara Mudah Mendaftar Google Adsense Pada Blogspot
Yasudah, jika kalian khususnya pembaca setia IntrikU makin penasaran dengan cara memasang 3 kolom footer responsif di blog, maka langsung saja kalian simak baik² tutor nya di bawah ini, cekidot :
A . Membuat CSS nya terlebih dahulu :
- Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian. Template - > Edit HTML - > CTRL+F lalu cari kode b:skin atau <style>.
- Jika sudah ditemukan kode b:skin atau <style> tadi, langsung saja kalian Copy Paste kan Script CSS di bawah ini, tepat pada bagian dalam kode b:skin atau <style> nya :
/* 3 Kolom Footer */
#footer-wrapper{width:100%}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:34%}
#footer-wrapper{background:#30cc91;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto; padding:20px 15px 0;color:#fff;border-top:5px solid #30cc91}
#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,
#footer-wrapper .right .widget{margin:0 15px 15px 0;clear:both}
#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #374760;text-transform:uppercase:none;position:relative;color:#eeeeee}
#footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0} #footer-wrapper li{margin:5px 0;padding:0 0 0 0} #footer-wrapper a{color:#dddddd}
#footer-wrapper a:hover{color:#ffffff} #footer-wrapper h2:before {content:"";position:absolute;left:0;width:180px;height:2px; background:#30cc91;bottom:-2px}
Catatan :
- Silahkan ubah warna nya dengan kode warna HTML sesuka kalian.
B . Pembuatan Agar 3 Kolom Footer nya Tampil Responsive :
- Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian. Template - > Edit HTML - > CTRL+F lalu cari kode b:skin atau <style>.
- Jika sudah ditemukan kode b:skin atau <style> tadi, langsung saja kalian Copy Paste kan Script CSS di bawah ini, tepat pada bagian dalam kode b:skin atau <style> nya :
@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} }
Catatan :
- Kalian dapat mengatur jarak² nya dengan sesuai warna ukuran kapasitas ukuran baik lebar maupun tinggi pada blog anda.
Baca Juga: Cara Membuat Popular Post Scrool Di Blogspot
C . Penerapan Agar 3 Kolom Footer nya Tampil Responsive
- Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian. Template - > Edit HTML - > CTRL+F lalu cari kode <footer>.
- Jika sudah ditemukan kode tadi, langsung saja kalian Copy Paste kan Script HTML di bawah ini, tepat pada bagian sebelum dari kode <footer> atau bagian dimana kalian yang tepat nya bagian footer nya :
<!-- 3 Kolom Footer Mulai --!> <footer id="footer-wrapper"> <b:section class='left section' id='left' preferred='yes'></b:section> <b:section class='center section' id='center' preferred='yes'></b:section> <b:section class='right section' id='right' preferred='yes'></b:section> </footer> <!-- 3 Kolom Footer Selesai --!>
- Terakhir, langsung saja kalian pilih menu Simpan Template dan lihat hasilnya.
Nah mungkin hanya sekian saja mengenai pembahasan membuat 3 Kolom Footer Responsive di Blog, Semoga Bermanfaat dan Semoga menambah wawasan kalian mengenai penambahan nya 3 Kolom Footer Responsive nya tersebut, Amin.