Home » » Cara Membuat Tiga Buah Kolom di Bawah Header

Cara Membuat Tiga Buah Kolom di Bawah Header

Kali ini saya ingin berbagi bagaimana caranya membuat tiga kolom di bawah header. Sebetulnya sudah lama ingin menulis ini tapi karena aktivitas lain tidak bisa ditinggalkan, ya akhirnya ditinggal dulu.
Tiga buah kolom di bawah header ini sudah saya uji coba pada template ku ini, dan hasilnya cukup berhasil dan bagi teman-teman yang ingin mencobanya saya sarankan untuk membackup dahulu.

Tiga buah kolom di bawah header yang maksud adalah seperti tampilan ini :


Ok kita mulai saja..jangan terlalu berlama-lama :

1. Login ke Blogger dengan ID dan paswordnya
2. Klik layout / rancangan
3. Klik Edit Html oh ya untuk backup template Klik saja Download template lengkap. kembali ke laptop eh kembali ke topik ini.
4. Cari #outer-wrapper { bila sudah ketemu copy paste kode dibawah ini di atas #outer-wrapper

/* -- Top-- */

#top h2 {
margin-bottom:10px;
padding-bottom:10px;
font-family:maiandra gd,trebuchetms,verdana;
font-size:14pt;
font-weight:700;
text-align:center;
font-style:normal;
line-height:1.3em;
color:#222;
text-shadow:1px 1px 2px #595450;
border-bottom:2px solid #DADADA;
}

#top {
background:transparent;
width:960px;
overflow:hidden;
font-size:12px;
margin:0 auto;
padding:10px;
}

#top .widget {
margin-bottom:10px;
padding:0;
}

#top ul {
color:#333;
list-style-type:none;
margin:0;
padding:0;
}

#top ul li {
background:url(http://lh3.ggpht.com/_7Y9pl24WpQY/TA_SRNUnXQI/AAAAAAAAEMU/wO0S1gPNYIQ/border_thumb%5B3%5D.png) repeat-x center bottom;
margin:0 0 5px;
padding:5px 0 5px 5px;
}

#top ul li a:hover {
margin:0 0 5px;
padding:0;
}

#topkiri {
width:310px;
float:left;
background:transparent;
margin:0;
padding:0;
}

#toptengah {
width:300px;
float:left;
margin-left:20px;
background:transparent;
padding:0;
}

#topkanan {
width:310px;
float:left;
margin-left:20px;
background:transparent;
padding:0;
}


Selanjutnya untuk melengkapi kode ini cari <div id='content-wrapper'> bila sudah dapat copy paste kode ini dibawah kode tersebut
<div id='top'>
<b:section class='top' id='topkiri' preferred='yes' showaddelement='yes'>
<b:section class='toptengah' id='toptengah' preferred='yes' showaddelement='yes'>
<b:section class='topkanan' id='topkanan' preferred='yes' showaddelement='yes'>
</div>
selesai sudah dan klik Simpan Template.
Cek di layout klik Elemen Halaman maka Kolom dibawah header ini sudah ditambahkan, tinggal Sobat-sobat menggunakannya.
Demikian postingan kali semoga hal ini bermanfaat bagi sobat sobat semua.
 
By. Agus M


 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Kakak dan Abel - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger