Menambah Widget 3 kolom sejajar di Atas Footer

Mungkin para bloggers sekalian telah mendapat atau menemukan cara menambah widget pada footer. Nah....pada kesempatan ini saya akan menjelaskan ulang mengenai cara menambahkan widget 3 kolom sejajar diatas blog.

Berikut ini tips blogger menambahkan widget tiga kolom sejajar di atas footer:

• Login ke account blogger kamu.
• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* -- bottom -- */

#bottom {
width:850px;
clear:both;
margin:0 auto;
float:left;
padding:10px 0;
color:#333;
background:#ffffff;
border-top:#ffffff;
border-bottom:#ffffff;
}

#bottom a:link {
color:#006699;
text-decoration:none;
}

#bottom a:hover {
color:#c06000;
text-decoration:underline;
}

#bottom a:visited {
color:#808080;
text-decoration:none;
}

#bottom h2 {
color:#000000;
padding:10px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #333;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}

#bottom ul {
padding:0;
margin:0;
color:#333;
}

#bottom ul li {
list-style-type:none;
border-bottom:1px dotted #333;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizBgZlSGnmCvu0jL49Bciv33DegT13sVhGY-t-_ULkjZ9EdUiNH3Z1BWOoebEkHraOiGlNf0OflsIyn6WOwsuCujVBI1S-pSI0_kmIE_fKg2C0k4V87NWVmBY_yNMcn86V-0m_RNbpc3M/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;
margin-top:2px;
}

#bottom1 {
width:260px;
float:left;
padding-left:15px;
}

#bottom2 {
width:260px;
float:left;
padding:0 20px 0 20px;
}

#bottom3 {
width:260px;
float:right;
padding-right:15px;
}

* Setelah itu, cari kembali kode HTML <div id='footer'> atau kode yang sejenis. Kemudian copas kode di bawah ini di atas kode tersebut.

    <div id='bottom'>
    <b:section class='bottom' id='bottom1' preferred='yes'/>
    <b:section class='bottom' id='bottom2' preferred='yes'/>
    <b:section class='bottom' id='bottom3' preferred='yes'/>
    </div>

*Simpan

Nah...jika sudah melakukan step demi step, sekarang coba klik Tata Letak --> Elemen Halaman. Sekarang kamu akan melihat ada tampilan widget baru di bawah template blog kamu dan sudah bisa menambah beberapa gadget didalamnya.

Catatan :

1. #bottom { width:850px;} (850px diganti dengan lebar blog kamu)
2. Trik perubahan variabel width dalam kode #bottom1, #bottom2, #bottom3 adalah dengan memperhatikan lebar (padding) yang terpakai yakni 15px (#bottom1), 20px + 20px (#bottom2), 15px (#bottom3). Jadi total lebar yang telah digunakan adalah 70px.
3. Sisa lebar (width) adalah 850px-70px = 780px.
4. Sekarang tinggal memvariasikan 780px ke dalam 3 kolom. Sebagai contoh untuk membuat 3 kolom sama lebarnya, maka lebar (width) dalam kode #bottom1, #bottom2, #bottom3 masing-masing sebesar 260px

Selamat mencoba !!!!!

Posted in: Blog