Caranya adalah sebagai berikut :
1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode untuk penambahan tiga kolom bagian footer yang telah diterapkan pada template anda
<div id='footer-column-container'>7. Tambahkan beberapa kode sehingga tampilannya seperti ini :
<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>
<div id='footer-column-container'>NB:
<div id='footer2' style='background :black; border:2px solid white; width: 29%; float: left; margin-left:12px; margin-right:17px; text-align: left; padding:0px 10px 0px 10px'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='background :black; border:2px solid white; width: 29%; float: left; margin-left:12px; margin-right:17px; text-align: left; padding:0px 10px 0px 10px'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='background :black; border:2px solid white; width: 29%; float: left; margin-left:12px; margin-right:17px; text-align: left; padding:0px 10px 0px 10px'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
</div>
► background :black; = menunjukkan latar belakang berwarna hitam. Ganti dengan warna kesukaan anda.
► border:2px solid white;= menunjukkan garis selebar 2px dengan warna putih. Ganti dengan ukuran dan warna kesukaan anda.
► width: 29%= lebar dari kolom. Ketiga kolom dibedakan ukurannya tapi jumlahnya jangan 100% karena diambil untuk margin dan lebar border
► margin-right:17px = merupakan jarak antar kolom pada bagian kanan.
► padding:0px 10px 0px 10px = merupakan jarak tulisan agar tidak berbenturan dengan garis.
8. Klik tombol Simpan Templatete
Jika hasil dari tiga kolom tersebut belum memuaskan (salah satunya berada dibagian bawah). Anda harus mengedit kembali dengan mengubah persen dari width-nya menjadi lebih kecil.
LANGKAH-LANGKAH MODIFIKASI JUDUL PADA TIGA KOLOM FOOTER.
♀ Masih pada Rancangan bagian Edit HTML
♀ Cari kode seperti ini :
#footer {♀ Tambahkan kode css dibawah ini dibawah kode tadi
width:1100px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
#footer2 h2 {NB:Ubahlah kode-kode diatas sesuai dengan keinginan anda.
font-size:100%;
color:#ffffff;
font-weight:bold;
text-transform:uppercase;
text-align:center;
border: 3px solid #000033;
padding :5px 0 5px 0;
background:#4D0000 url(http://img651.imageshack.us/img651/3007/ballb.gif)no-repeat center left;
}
#footer3 h2 {
font-size:100%;
color:#ffffff;
font-weight:bold;
text-transform:uppercase;
text-align:center;
border: 3px solid #000033;
padding :5px 0 5px 0;
background:#4D0000 url(http://img651.imageshack.us/img651/3007/ballb.gif)no-repeat center left;
}
#footer4 h2 {
font-size:100%;
color:#ffffff;
font-weight:bold;
text-transform:uppercase;
text-align:center;
border: 3px solid #000033;
padding :5px 0 5px 0;
background:#4D0000 url(http://img651.imageshack.us/img651/3007/ballb.gif)no-repeat center left;
}
♂ Good Luck ♀
Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
Tips Blogger
- Scroll Tampil Dipostingan Jika Diperlukan
- Membuat background Pada Judul Sidebar
- Menambahkan Twitter Button di Blog
- Membuat Saving Energy Dengan Gambar Sendiri
- Fixed Guestbook Slide Effect With jQuery
- Naruto Emot Untuk Komentar
- Efek Animasi Dasar Pada Blog
- Cara Mudah Membuat Tool Tip Dengan CSS
- Cara Mudah Membuat Textarea
- Membuat Menu Iklan (jQuery Ads Popout)
- Cara Membuat Slideshow Gambar (with jQuery)
- Membuat Simple Menu
- Efek-efek Tulisan Menggunakan CSS3
- Membuat Menu Daftar Isi Jtoctree
- Image Zoom Effect With Jquery
- Shoutbox Light Effect
- Membuat Hover Image CSS3 Pada Blog (Seperti Blog ini )
- Bertabur Cinta
- Light Hover Horizontal Menu With CSS For Blogger
- Cara Memindah-Mindahkankan Gambar Dengan jQuery
- Cara mudah memasukkan banyak Tab Widget pada sidebar
- Cara Pasang Efek Kupu - Kupu Berterbangan
- Merobah Domain Menjadi CO.TV
- Cara Memasang Efek Bintang Berjatuhan di Blog
- Make Border-Radius