Kali ini MasHelmi akan bagikan tentang Membuat 3 Kolom Footer di blog pernah ada yang nanyain kepada saya gimana katanya cara membuat 3
kolom di bawah seperti yang punya Mas Helmi. Kali ini saya akan bahas
tentang cara pembuatannya yang sederhana dan simpel tapi membuahkan
hasil yang maksimal Kalau sobat pingin liat seperti apa itu Membuat 3 Kolom Footer di blog, di bawah ini gambarnya
- Seperti biasa Login ke blogger dengan id Sobat
- Tuju menu Tata LetakPada tab menu, klik Edit HTML
- Backup template anda, klik Download Template Lengkap
- Sekarang cari kode yang mirip seperti ini :
#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
float:left;
padding-left:15px;
}
#center-bottom {
width:200px;
float:left;
padding:0 20px 0 20px;
}
#right-bottom {
width:420px;
float:right;
padding-right:15px;
}
6. Tambahkan atau copy lalu paste kode berikut di bawah kode tadi :
/* bottom
----------------------------------------------- */
#bottom {
width:900px;
clear:both;
margin:0 auto;
float:left;
padding:10px 0;
color:#333;
background:#ffffff;
border-top:1px solid #333;
}
#bottom a:link {
color:#006699;
text-decoration:none;
}
#bottom a:hover {
color:#c06000;
text-decoration:underline;
}
#bottom a:visited {
color:#045FB4;
text-decoration:none;
}
#bottom h2 {
padding:20px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:11px;
font-weight:b old;
line-height:1.4em;
text-transform:uppercase;
}
#bottomul {
padding:0;
margin:0;
color:#333;
}
#bottom ul li {
list-style-type:none;
border-bottom:1px dotted #333;
background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .17em;
padding-left:17px;
margin-top:2px;
}
#left-bottom {
width:200px;
- Sekarang kita membuat kode HTML untuk elemen di footer tersebut. Cari kode seperti ini :
<div id='footer-wrapper'>
<b:section 'footer' id='footer'/>
</div>
- Tambahkan kode berikut di atas kode tadi :
<div id='bottom'>
<b:section 'bottom' id='left-bottom' preferred='yes'/>
<b:section 'bottom' id='center-bottom' preferred='yes'/>
<b:section 'bottom' id='right-bottom' preferred='yes'/>
</div> <!-- end bottom -->
- Sekarang klik timbol simpan template
- Selesai dan lihat hasilnya. sekarang Sobat mempunyai 3 elemen di atas footer
PENTING!
Sesuaikan ukuran lebar (width) footer dengan template Sobat dan lebar elemen yang akan ditambahkan sesuaikan selera Sobat dengan memperhatikan jarak marginnya.
Selamat mencoba Semoga Berhasil!