Seperti pada judul yang telah saya tulis diatas, pada kesempatan kali ini saya ingin membagi tips tentang membuat footer dengan 4 kolom. Kita sedikit meriview sedikit tentang postingan yang telah saya buat tempo hari ( lihat disini ) mengenai cara membuat footer 3 kolom pada template blog..
Disitu saya mengadopsi beberapa artikel yang telah dibuat oleh blogger pendahulu, dengan beberapa perubahan dan sedikit modifikasi disana sini..agar lebih sesuai dan menarik meskipun pada dasarnya kode yang saya terapkan adalah kode yang sama.
Nah pada kesempatan kali ini murni saya gunakan metode yang saya dapat sendiri..
langkah pertama yang harus kamu lakukan adalah Copy kode berikut dan letakkan diatas kode ]]></b:skin>
selanjutnya copy lagi kode berikut, dan letakkan diatas </body></html>
Simpan dan lihat hasilnya...
------------------------- * /
#bottom {
width: 980px;
position: relative;
clear:both;
margin: 0 auto;
color:#ffcc00;
float: center;
background:;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#339900;
font-size: 18px;
letter-spacing: 1px;
border-bottom: 2px double #ffffff;
}
#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #808080;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#e5e5e5;
text-decoration: none;
}
#bottom ul li a:hover {
background: #ffffcc;
}
#kolom1 { /* yang ini nih kode kolom1 */
width: 210px;
float: left;
padding-left:10px;
}
#kolom2 { /* kalo yg ini kode kolom2 */
width: 200px;
float: left;
padding-center:10px;
}
#kolom3 { /* kalo yg ini kode kolom3 */
width: 200px;
float: left;
padding: 0 5px 0 10px;
}
#kolom3 { /* kalo yg ini kode kolom4 */
width: 210px;
float: left;
padding: 0 5px 0 10px;
}
#kolom1 .widget{width:200px;}
#kolom2 .widget{width:180px;}
#kolom3 .widget{width:180px;}
#kolom4 .widget{width:200px;}
selanjutnya copy lagi kode berikut, dan letakkan diatas </body></html>
<div id='bottom'>
<b:section class='bottom' id='kolom1'>
</b:section>
<b:section class='bottom' id='kolom2'>
</b:section>
<b:section class='bottom' id='kolom3'>
</b:section>
<b:section class='bottom' id='kolom4'>
</b:section>
</div>
Simpan dan lihat hasilnya...
0 Response to "Cara buat footer 4 kolom"
Post a Comment
Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..