Cara Membuat Footer 3 Columns di Blog

Bersama saya, Noval Bintang. Pada kesempatan saat ini saya akan memberikan tutorial kelanjutan dari tutorial "Membuat Auto Read-More dengan Bantuan Textarea". Mungkin tutorial ini sudah terbilang sangat lama karena kesibukan saya di dunia nyata, terutama posisi saya yang masih sebagai siswa kelas XII (3 SMA) yang akan menghadapi Ujian Nasional di bulan April ini.

Tutorial

Tutorial pada kali ini, konsepnya sama seperti tutorial sebelumnya yaitu menambahkan b:section pada element yang disebut dengan footer 3 kolom ini. Sebelumnya anda harus membuat sebuah pembungkus ketiga footer tersebut. Berikan saja nama #footer-wrapper. Maka anda harus meletakkan kodenya tepat di atas 

</div>
</body>

Letakkan kode berikut (Pembungkus Footer) tepat di atas kode yang tadi

<aside id='footer-wrapper'>
KETIGA B:SECTION DISINI
</aside>

Kemudian untuk membuat 3 footernya, ganti KETIGA B:SECTION DISINI dengan kode b:section berikut

<b:section class='footer' id='footer1'/>
<b:section class='footer' id='footer2'/>
<b:section class='footer' id='footer3'/>

Seperti penerangan CSS sebelumnya, bahwa untuk membuat element tersebut bersebelahan menggunakan float. Letakkan kode berikut tepat di bawah #sidebar-wrapper

#footer-wrapper{width:100%;overflow:hidden;background:#2c3e50;padding: 20px 0;}#footer1,#footer2{float:left;width:33%;overflow:hidden;}#footer3{float:right;width:34%;overflow:hidden;}

Untuk memodifikasi gaya widget footer, konsepnya sama seperti memodifikasi widget pada sidebar.

Selamat Mencoba

---