"Seperti yang pernah saya alami dulu, sewaktu saya ingin menambahkan beberapa widget ke dalam blog saya, ternyata sidebar template blog saya terlalu penuh dan terkesan memaksakan"
Ini mungkin postingan yang diperuntukkan bagi newbie seperti saya, mohon ma'af bagi para master yang sudah ahli dalam bidang ini. Seperti yang pernah saya alami dulu, sewaktu saya ingin menambahkan beberapa widget ke dalam blog saya, ternyata sidebar template blog saya terlalu penuh dan terkesan memaksakan. Memang ada solusi yang cukup mudah yakni dengan mengganti template blog. Tapi karena sayakadung cinta dengan template saya waktu itu, jadi saya memilih jalan lain.
Setelah dengan telaten mencari akhirnya saya temukan caranya.
Langsung ke Pokok :
buat teman-teman yang ingin Menambah Footer 3 Kolom di Blog nya, silahkan ikuti langkah-langkah di bawah ini:
1. Login akun Blogger
2. Klik Rancangan
3. Pilih Edit HTML centang Expand Templates Widget,
4. Lalu cari kode berikut:
]]></b:skin>
5. Tambahkan kode di bawah ini persis berada di atas kode tadi:
/* bottom
---------------------------- */ #bottom {
width: 900px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background: transparan;
padding: 15px 0 15px 0;
}
#bottom h2 {
text-align:center;
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#AEB404;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #AEB404;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: transparan;
}
#left-bottom { /* kode kolom footer kiri */
width: 32%;
float: left;
padding-left:10px;
}
#center-bottom { /* kode kolom footer tengah */
width: 32%;
float: left;
padding-left:10px;
}
#right-bottom { /* kode kolom footer kanan */
width: 32%;
float: left;
padding: 0 5px 0 10px;
}
6. Lanjutkan dengan mencari kode berikut:
<div id='footer-wrapper'>
atau jika tidak ditemukan, coba kode dibawah ini :
<div id='footer'>
7. Dan tambahkan kode di bawah ini persis berada di atas kode tadi:
<div id='bottom'> <b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>
8. Jika sudah klik Save Templates
9. Untuk melihat perubahan klik pada tab menu Elemen Halaman
Catatan :
Harap diperhatikan kode-kode yang saya beri warna Biru di atas:
A. Untuk kode width: 900px;
disesuaikan dengan lebar header blog masing-masing ( kode: #header {), jika lebar header 660px, maka diganti width nya 660px,
B. Untuk merubah warna judul Footer harap ganti pada kode #bottom h2 { ..... color:#AEB404
C. Lalu perhatikan kode di bawah ini:
#left-bottom { /* kode kolom footer kiri */
width: 32%;
float: left;
padding-left:10px;
}
#center-bottom { /* kode kolom footer tengah */
width: 32%;
float: left;
padding-left:10px;
}
#right-bottom { /* kode kolom footer kanan */
width: 32%;
float: left;
padding: 0 5px 0 10px;
}
Harap disesuaikan width nya untuk memberi jarak pada masing-masing element, misal total width-nya 100%, maka kita beri jarak masing-masing dengan total 4%, maka sisanya adalah 96%, lalu kita bagi sehingga masing-masing element mendapat luas 32%.
Sumber another bestBlog
Top of Form
Bottom of Form
