Membuat Footer dengan multikolom untuk kebutuhan widget. Soalnnya, menurut pengalaman saya, kadang kurang asyik kalau harus menempatkan semua gadget di sisi kanan. Kadang ada gadget yang kurang pas dan bikin nggak enak dipandang mata.
Tapi pilihan lain juga nggak banyak membantu, soalnya cuma ada footer dengan 1 kolom. Memanjang lagi.
Setelah Googling berlama-lama akhirnya saya bisa menemukan bagaimana cara membuat footer dengan multikolom.
1. Biasa... Login ke Blogger.
2. Klik Tata Letak
3. Klik Edit HTML
4. Tambahkan kode berikut persis di atas kode ]]></b:skin>:
/* bottom
---------------------------- */
#bottom {
width: 100%;
position: relative;
clear:both;
margin: 0 auto;
color:#0B0B0B;
float: left;
background:#D8D8D8;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#0B0B0B;
font-size: 15px;
letter-spacing: -1px;
border-bottom: 1px solid #000000;
}
#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 14px;
list-style-type: none;
border-bottom: 1px dashed #0B0B0B;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#000000;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}
#left-bottom { /* kode untuk kolom kiri */
width: 300px;
float: left;
padding-left:10px;
}
#center-bottom { /* kode untuk kolom tengah */
width: 300px;
float: left;
padding-left:10px;
}
#right-bottom { /* kode untuk kolom kanan */
width: 300px;
float: left;
padding: 0 5px 0 10px;
}
Kemudian cari kode seperti ini :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Copy paste kode berikut persis di atas kode yang atas 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>
Simpan Perubahan. Nah soal ukuran ini nih... Saya pernah mencoba pada dua blog dengan template berbeda, yang satu okeh... yang satu membleh... Masalahnya ada pada ukuran. Jadi Set aja sendiri kali ya soal ukuran....
0 comments:
Posting Komentar