Trik blog : Menambah Widget Tiga Kolom Sejajar di Atas Footer

Bagaimana menambahkan 3 kotak lagi di bawah main wrapper? Pertanyaan ini dilontarkan oleh sobat OB Ad4m San dalam komentarnya di posting membuat menu horizontal. Mungkin singkatnya, yakni menambah widget tiga kolom sejajar di atas footer (sama aja he.. he.. he..). Untuk kode CSS dalam trik blogger ini harus disesuaikan dengan template blog kamu.

Berikut trik blogger menambah 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; <!-- lebar bottom = lebar blog -->
clear:both;
margin:0 auto;
float:left;
padding:0 0 10px 0;
color:#333; <!-- warna teks -->
background:#ffffff; <!-- warna latar bottom -->
border-top:#ffffff; <!-- garis tepi atas -->
border-bottom:#ffffff; <!-- garis tepi bawah -->
}

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

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

#bottom h2 {
padding:20px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #333; <!-- garis putus-putus dibawah teks -->
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase; <!-- teks semua huruf besar -->
}

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

#bottom ul li {
list-style-type:none;
border-bottom:1px dotted #333; <!-- garis di bawah teks yg menggunakan penomoran atau butir -->
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXrLMnvYKAfT8DFSpQeLg67X6dK_JGmVvWW_byxxna8Kx5AABN2M6xjfKI6X5oQoBhiRIno4qxnuftKhw7AYdiptFVj74eeNJSIDO8rHBQUAOPb3c7OMh-0kAQCsLgDZUrVuPZcAkJMU/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;
margin-top:2px;
}

#bottom1 {
width:160px; <!-- lebar bottom1 -->
float:left;
padding-left:15px;
}

#bottom2 {
width:200px; <!-- lebar bottom2 -->
float:left;
padding:0 20px 0 15px;
}

#bottom3 {
width:300px; <!-- lebar bottom3 -->
float:right;
padding-right:10px;
}


Catatan :

1. Ganti kode yang berwarna hijau sesuai dengan lebar blog kamu.
2. Ganti kode yang berwarna merah dengan karakter blog kamu.
3. Khusus untuk kode background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXrLMnvYKAfT8DFSpQeLg67X6dK_JGmVvWW_byxxna8Kx5AABN2M6xjfKI6X5oQoBhiRIno4qxnuftKhw7AYdiptFVj74eeNJSIDO8rHBQUAOPb3c7OMh-0kAQCsLgDZUrVuPZcAkJMU/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px; merupakan kode untuk menambahkan icon panah biru dalam teks kamu jika menggunakan metode penomoran, baik angka maupun butir-butir. Kalau kamu kurang suka silakan hapus kode tersebut atau ganti url dalam tanda kurung dengan icon kamu sendiri.

* Cari kembali kode HTML <div id='footer-wrapper'> 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>


* Jangan lupa disimpan.

Catatan : Sekarang coba kamu 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.


Selamat menambah widget tiga kolom sejajar di atas footer...

Related Posts by Categories