Beranda
Tip's - Trick's

Cara Membuat 3 Kolom Widget di Atas Footer pada Template Thesis

2 minute read
{ Jangan Malas Membaca Ya }
Bila Sobat juga menggunakan template Thesis seperti yang ane pakai ini dan ingin menambahkan 3 kolom widget di atas footer, Sobat bisa melihat langkah-langkahnya di bawah ini.

Berikut langkah-langkah membuat 3 kolom widget pada footer. Nanti, hasilnya akan seperti yang terlihat di blog ini . Semoga berhasil.
  1. Masuk ke akun Blogger.
  2. Klik Rancangan >> Edit HTML.
  3. Untuk berjaga-jaga, silakan back-up template dulu dengan mengeklik Download Template Lengkap sehingga bila nanti terjadi kesalahan kita dapat dengan mudah mengembalikan tempate seperti semula.
  4. Carilah kode ]]></b:skin>. Untuk pencarian cepat, tekan tombol Ctrl + F pada keyboard lalu masukan kode tersebut.
  5. Kemudian anda copy Salah satu  kode di bawah ini dan paste di atas kode
    ]]></b:skin> tersebut.
Kode 1 : Pakai Background dibawah ini
#tiga-kotak-bawah {
clear:both;
border-top:0px;
background:transparent url(Masukkan url gambar background) no-repeat scroll center top ;
height:510px;
width:980px;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
} 
Kode 2 : Tanpa Background di bawah ini
#tiga-kotak-bawah {
clear:both;
border-top:3px double #e6e4e3;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
}
  • Silakan diubah paddingnya sesuai keinginan Sobat.
  • Ingat Pilih salah satu kodenya, kode 1 atau yang kode 2.
Catatan:
   Jika ketiga kolom tidak diberi "Judul", Anda dapat mencoba menambahkan kode margin-top:14px; di bawah kode  height:510px; yang pakai Background dan yang untuk tanpa background di bawah border-top:3px double #e6e4e3; agar konten tidak mepet dengan border atas.

     6. Selanjutnya cari kode <div id='footer'>.
     7. Letakkan kode di bawah ini di atas kode <div id='footer'> tersebut.
<div id='tiga-kotak-bawah'>
<div id='kotak1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol1' preferred='yes' style='float:left;'/>
</div>
<div id='kotak2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol2' preferred='yes' style='float:left;'/>
</div>
<div id='kotak3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
     8. Klik tombol SIMPAN TEMPLATE.
     9. Selesai.   Coba lihat Elemen Laman, Jadi deh 3 kolomnya, hehe


Selamat Mencoba,,,^_^

Posting Komentar