Cara membuat Footer 3 kolom dalam 3 langkah Praktis

Cara membuat Footer 3 kolom dalam 3 langkah Praktis

Pada artikel Cara Membuat Template Blog Responsive dan Ringan 5 ini kita akan belajar Cara membuat Footer 3 kolom dalam 3 langkah Praktis. Dimana keberadaan footer ini juga tak pernah tertinggal pada sebuah situs, karena keberadaan footer dipandang begitu penting bagi para pemilik dan pengelola situs itu sendiri. Melalui artikel ini pula saya akan informasikan tentang apa saja yang sebenarnya perlu ditampilkan pada sebuah footer. Situs-situs besar memanfaat kan footer untuk menampilkan hal-hal yang memang dibutuhkan oleh pengguna internet, tentang informasi sebuah situs atau perusahaan. Sebuah navigasi bantuan yang dapat membantu pengguna menemukan informasi yang mereka cari. Oleh karena begitu pentingnya keberadaan footer pada sebuah situs maka saya tulis artikel Cara membuat Footer 3 kolom dalam 3 langkah Praktis ini. Berikut adalah beberapa hal yang biasanya ditampilkan melalui bagian footer sebuah situs:

• Link pintas: Link pintas yang memungkinkan pengguna lebih mudah menavigasi halaman lain untuk mendapatkan informasi yang merekan inginkan.
• Formulir Berlangganan atau Subscribe: Membantu pengguna untuk mendapatkan setiap .update dari situs terkait.
• Post-post populer: Menampilkan post-post yang paling populer(paling sering dibaca pengunjung).
• Alamat dan kontak.
• Copyright atau credit link.

Cara membuat Footer 3 kolom

Silahkan login dan akses dashboard blogger, pilih blog yang kita kelola dalam pembuatan template. Pilih menu Tema dan lanjutkan dengan klik Edit HTML. Karena template yang kita buat adalah template custom kita sendiri, dan kita telah melakukan optimasi dengan merubah kemasan kode css yang semula dikemas dalam ]]></b:skin> menjadi <style> dan </style>. Maka pada script tema kalian carilah kode </style>, kemudian salin dan tempel kode script berikut diatasnya:

/* Footer 3 Coloum */
#footer-wrapper{width:100%}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper{background:#242424;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;
padding:20px 15px 0;color:#dddddd;border-top:5px solid #07ACEC}
#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}
#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;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:#07ACEC;bottom:-2px}

Supaya widget footer kalian nanti tetap responsive tambahkan juga script css berikut dibawahnya:

 @media screen and (max-width:1024px){
	#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;}
}
 @media screen and (max-width:880px){
	#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;}
}
 @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;}
}
 @media screen and (max-width:480px){
	#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;}
}
 @media screen and (max-width:320px){
	#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;}
}

Selanjutnya cari script kode bagian footer seperti berikut:

<div id='footer-wrapper'>
 <b:section class='footer' id='footer' showaddelement='yes'></b:section>
</div>

Hapus script kode diatas dan ganti dengan script kode berikut ini:

 <!-- Footer Widget 3 Coloum -->
<footer id="footer-wrapper">
 <b:section class='left section' id='left' preferred='yes' showaddelement='yes'>
  </b:section>
 <b:section class='center section' id='center' preferred='yes' showaddelement='yes'>
  </b:section>
 <b:section class='right section' id='right' preferred='yes' showaddelement='yes'>
  </b:section>
</footer>
<!-- End Footer Widget 3 Coloum -->

Silahkan simpan perubahan yang baru saja kallian lakukan lalu buka menu Tata Letak dan gulir lle bawah. Kalian akan lihat bagian footer sudah terbagi menjadi 3 bagian. Silahkan tambahkan widget dimasing-masing kolom dan kunjungi blog kalian. Kalian akan lihat footer 3 kolom seperti yang kita inginkan. Artikel Cara membuat Footer 3 kolom dalam 3 langkah Praktis ini sekaligus mengakhiri tutorial Cara Membuat Template Blog Responsive Dan Ringan. Dimana keseluruhan tutorial terbagi dalam 5 artikel, yaitu:

• Materi 1 Cara Membuat Template Blog Responsive dan Ringan
• Materi 2 Cara Membuat Template Blog Responsive dan Ringan 2
• Materi 3 Cara desain Main Content Blog dan Sidebar
• Materi 4 Cara membuat Header 2 kolom dalam 2 Langkah Praktis
• Materi 5 Cara membuat Footer 3 kolom dalam 3 langkah Praktis

Terimakasih telah membaca dan mengikuti apa yang saya berikan melalui tutorial Cara Membuat Template Blog Responsive Dan Ringan. Jika kalian berkenan silahkan tinggalkan link blog hasil praktek kalian mengikuti tutorial Cara Membuat Template Blog Responsive Dan Ringan ini.