Cara Memodifikasi Kolom Gadget Footer

Cara menambahkan atau memodifikasi kolom widget footer, pasti sudah banyak artikel yang anda temukan seperti itu kan..!!  Ya walaupun dah banyak ga ada salahnya kalo saya menulis artikel tentang cara memodifikasi kolom gadget pada footer blog.

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.

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.