Cara Memodifikasi Kolom Gadget Footer

Pasti dah banyak deh panduan tentang cara menyertakan atau memodifikasi kolom widget footer yang kawan pernah temui. Ya meskipun dah banyak ga ada salahnya kalo saya ikut-ikutan nulis postingan tentang cara memodifikasi kolom gadget pada footer blog, biar tambah banyak gitu hehehe... Yang ingin saya tulis disini merupakan bagaimana meskipun kita memodifikasi komponen gadget, tapi blog kita masih ringan alias SEO friendly. Triknya dengan memodifikasi css-nya. Yaudah ga usah banyak casciscus, pribadi ajah deh cara memodifikasi kolom gadget footer:

1. Login Blogger -> Klik Design -> Edit HTML -> tidak perlu centang expand template widget, alasannya takut malah bikin sakit kepala :D
2. Sebaiknya Backup template anda dahulu. dengan cara klik pada Download Full Template mudah-mudahan anda dapat mengembalikan template anda ke keadaan semula apabila terjadi galat atau anda memang kurang puas kepada hasilnya.
3. Setelah itu, cari kode ]]></b:skin> dengan menekan ctrl+f
4. Tambahkan instruksi dibawah ini diatas instruksi ]]></b:skin>
   #footer-column-divide { clear:both; } .footer-column { padding: 10px; } 
5. Cari lagi di find instruksi yang kira-kira seumpama ini : <div id='footer-wrapper'> <b:section class='footer' id='footer' showaddelement='yes'/> </div> atau <div id='footer'> <b:section class='footer' id='footer' showaddelement='yes'/> </div>
6. Setelah ketemu, tambahkan instruksi di bawah ini sempurna di bawah  <b:section class='footer' id='footer' showaddelement='yes'/> atau di <div id='footer-wrapper'> ( apabila belum ketemu, mungkin instruksi seumpama ini : <div id='footer'> )

   Jika ingin memodifikasi footer 2 kolom. Gunakan instruksi ini :
   

       <div id='footer-column-divide'>     <div id='footer1' style='width: 50%; float:left;
       margin:0; text-align:left;'>
       <b:section class='footer-column' id='col1'
       preferred='yes' style='float:left;'/>
       </div>     <div id='footer2' style='width: 50%; float: left;
       margin:0; text-align: left;'>
       <b:section class='footer-column' id='col2'
       preferred='yes' style='float:left;'/>
       </div>     <div style='clear:both;'/>
       </div>

   Jika ingin footer 3 kolom. Gunakan instruksi ini :
   

   <div id='footer-column-divide'>   
   <div id='footer1' style='width: 33%; float:left; margin:0; text-align:left;'>   
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>   
   </div>   
   <div id='footer2' style='width: 33%; float: left;margin:0; text-align: left;'>   
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>   
   </div>   
   <div id='footer3' style='width: 33%; float: right; margin:0; text-align: left;'>   
   <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>   
   </div><div style='clear:both;'/>   
   </div>

   Memodifikasi footer menjadi 4 kolom. Gunakan instruksi ini :
   

   <div id='footer-column-divide'>
   <div id='footer1' style='width: 25%; float:left;
   margin:0; text-align:left;'>
   <b:section class='footer-column' id='col1'
   preferred='yes' style='float:left;'/>
   </div>     <div id='footer2' style='width: 25%; float: left;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2'
   preferred='yes' style='float:left;'/>
   </div>     <div id='footer3' style='width: 25%; float: right;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3'
   preferred='yes' style='float:right;'/>
   </div>     <div id='footer4' style='width: 25%; float: right;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col4'
   preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   </div>

7. Kalau sudah save dan lihat ke elemem halaman.

Semoga postingan tentang cara memodifikasi kolom gadget footer ini dapat berharga dan mempercantik blog kawan :) Kalau ada cara lain silahkan di share di sini, alasannya keistimewaan blogspot merupakan template yang bisa kita mengembangkan secara maksimal baik seo maupun tampilannya.

Share this post