Cara Membuat 3 Kolom Footer Responsive Blog

AA Sciences, Aldi Andreansyah - 3 Footer Responsive Blog,Responsif, Cara Membuat 3 Kolom Footer Blog, Cara Membuat 3 Kolom Footer Blog, 3 Kolom Footer Blog.

Cara Membuat 3 Kolom Footer Blog

Footer atau biasa yang disebut bagian yang dimana bagian footer ini terletak paling bawah pada sebuah hal apapun, terutama bagian tampilan sebuah website (template), jika lebih mengenai tertentu nya 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.

Membicarakan mengenai footer, terutama footer pada bagian sebuah tampilan website 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 ? . Yaps menurut AA Sciences footer amat begitu penting dalam sebuah website 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 website tersebut dan blog tersebut dinyatakan masih kurang menjadi hak karena tidak adanya tanda copyright pada halaman website 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.

Yasudah, jika kalian khususnya pembaca setia AA Sciences makin penasaran dengan cara memasang 3 kolom footer responsif blog, maka langsung saja kalian simak baik² tutor nya di bawah ini, cekidot :

A . Pembuatan 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 by https://aldiandreansyah.blogspot.co.id */
#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.

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 --!>

4 . 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.

Share this post