Cara Memodifikasi Kolom Gadget Footer

Cara Memodifikasi Kolom Gadget Footer - Pasti dah banyak deh tutorial tentang cara menambahkan atau memodifikasi kolom widget footer yang sobat pernah temui. Ya walaupun dah banyak ga ada salahnya kalo saya ikut-ikutan nulis artikel tentang cara memodifikasi kolom gadget pada footer blog, biar tambah banyak gitu hehehe... Yang ingin saya tulis disini adalah bagaimana walaupun kita memodifikasi elemen gadget, tetapi blog kita masih ringan alias SEO friendly. Triknya dengan memodifikasi css-nya. Yaudah ga usah banyak casciscus, langsung ajah deh cara memodifikasi kolom gadget footer:

1. Login Blogger -> Klik Design -> Edit HTML -> tidak perlu centang expand template widget, karena takut malah bikin pusing :D
2. Sebaiknya Backup template anda dahulu. dengan cara klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika terjadi galat atau anda memang kurang puas terhadap hasilnya.
3. Setelah itu, cari kode ]]></b:skin> dengan menekan ctrl+f
4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>
   #footer-column-divide { clear:both; } .footer-column { padding: 10px; } 
5. Cari lagi di find kode yang kira-kira seperti 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 kode di bawah ini tepat di bawah  <b:section class='footer' id='footer' showaddelement='yes'/> atau di <div id='footer-wrapper'> ( jika belum ketemu, mungkin kode seperti ini : <div id='footer'> )

   Jika ingin memodifikasi footer 2 kolom. Gunakan kode 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 kode 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 kode 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 artikel tentang cara memodifikasi kolom gadget footer ini bisa bermanfaat dan mempercantik blog sobat :) Kalau ada cara lain silahkan di share di sini, karena kelebihan blogspot adalah template yang bisa kita optimasi baik seo maupun tampilannya.

Title : Cara Memodifikasi Kolom Gadget Footer
URL : http://blogedek.blogspot.com/2011/12/menambahkan-kolom-gadget-footer.html
Jangan lupa untuk membagikan artikel Cara Memodifikasi Kolom Gadget Footer ini jika bermanfaat bagi sobat.