Membuat 3 Kolom Widget Footer Blog Thesis

Share on :

Tweet

Membuat 3 kolom pada Footer | Saya menjadi agak canggung untuk menggunakan tema Thesis karena elemen-elemen blognya tidak seperti template saya yang dahulu. Salah satunya adalah tidak tersedianya widget 3 kolom pada footer blog. Namun, saya kemarin berjalan-jalan untuk mencari tahu bagaimna mengatasinya, dan memang sudah banyak yang membahasnya, namun di sini saya perlu mengkhususkan diri pada template Thesis yang paling banyak dipakai oleh blogger karena fiturnya yang optimal.

Untuk membuat 3 kolom pada footer, saya menggunakan cara ini, semoga dapat membantu:

1. Masuk pada akun blogger Anda dan Edit HTML (jangan lupa dibackup dulu yah, templatenya)
2. Centang Expand Template Widget
3. Cari kode ini :

   ]]></b:skin>

4. Copy kode berikut dan tempatkan tepat diatas kode ]]></b:skin>

   #footer-column-divide {
   clear:both;
   }
   .footer-column {
   padding: 10px;
   }

5. Cari kode berikut yang sama atau hampir sama dengan kode berikut :
   Pencarian 1 :

   <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
   </div>

   Jika tidak ketemu ganti pencarian menjadi :
   Pencarian 2 :

   <!-- end outer-wrapper -->

   atau pencarian 3 :

   <div id='footer'>

6. Jika yang kode pencarian yang ada pada blog :
   • Jika yang Anda temukan adalah kode Pencarian 1 maka :
     Ganti kode <b:section class='footer' id='footer'/> dengan kode dibawah ini.
   • Jika pencarian 2 atau 3 yang Anda temukan tempatkan kode dibawah initepat diatas kode tersebut.
   • Khusus untuk template Thesis cari ajah yang opsi ke 3.

   <div id='footer-column-divide'>
   <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;'/>
   </div>

7. Preview ajah dulu kalo belum yakin, ada yang salah gag gitcgu.
8. Kalo udah gag da yang salah, klik SAVE.

Semoga bisa membantu :)