Cara Membuat Footer Menjadi 3 Kolom

Masih mengenai footer, sebenar nya untuk cara membuat footer menjadi 3 kolom tidaklah jauh berbeda dengan membuat jadi 4 kolom footer, dari pada hanya merubah jadi 3 kolom baik sekalian jadi 4 kolom footer, he..he.! Tapi punya saya juga cuma 3 kok.


Langsung saja gak pakai lama.. Itu yang ku mau..!

1. Seperti biasa login account blogger anda >> Layout >> Edit HTML, beri centang Expand Widget Template nya


2. Bila perlu download terlebih dahulu, back up kalau - kalau terjadi kesalahan fatal, masih ada cadangan


3. Langkah selanjut nya cari kode berikut :
   
   < div id='footer-wrapper'>
   < b:section class='footer' id='footer'/>
   < /div>



4. Kalau sudah ketemu hapus kode < b:section class='footer' id='footer'/> dan ganti dengan kode script berikut :




< div id='footer-column-container'>
< div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
< b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
< /div>

< div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
< b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
< /div>

< div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
< b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
< /div>

< div style='clear:both;'/>
< p>
< hr align='center' color='#5d5d54' width='90%'/> </p>
< div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
< b:section class='footer' id='col-bottom' preferred='yes'>
< b:widget id='Text2' locked='false' title=''type='Text'/>
< /b:section>
< /div>
< div style='clear:both;'/>
< /div>


Bila sudah sebaik nya simpan terlebih dahulu untuk memastikan tidak ada yang kurang dan salah

5. Bila kode di atas tidak ada masalah dan bisa di terima template anda lanjut ke langkah berikut nya


6. Cari kode :
   < b:skin/>



7. Sekarang letakan koke berikut tepat di atas < b:skin/>
   
   
   
   
   #footer-column-container {
   clear:both;
   }
   .footer-column {
   padding: 10px;
   }
   



8. Sekarang simpan template anda dan lihat hasil nya

Category: Tutorials blog