Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
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>
------------------------- * /
#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...

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

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..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |