Cara Membuat Sidebar 3 Kolum Di Bawah Header

Bagaimana cara menambah widget agar terlihat lebih variasi, kalau ternyata side template terasa kurang sementara banyak pernak-pernik blog yang ingin kita tempatkan. Disini saya kasih solusinya yaitu dengan menambah widget 3 kolom yang saya khususkan peletakannya di bawah header, sedangkan untuk yang diatas footer akan saya infokan di tulisan berikutnya. Untuk sobat Asob (Asep Sutisna on Blog), yang sangat memerlukan info ini silakan ikuti caranya dibawah ini. Kita langsung menuju ke tkp pengeditan templatenya.

Silahkan login ke blogger, buka Id sobat dan langsung tuju Tata Letak., pilih tab Edit HML, jangan di klik Expand Template Widget, malah nantinya akan bikin pusing sobat saja, gimana kalau pas lagi nggak ada obatnya..D:)

Letakkan kode css berikut ini diatas kode ]]></b:skin>

 

/* –- Top --*/

#top {

background:#fff;

margin-top:10px auto;

width:960px;

overflow:hidden;

font-size:12px;

padding:10px;

}

#top h2 {
background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI
/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

font-size:14pt;

font-weight:400;

text-align:center;

font-style:normal;

line-height:1.3em;

color:#fff;

padding:5px;

margin-top:-10px;

margin-left:-10px;

margin-right:-10px;

}

#top ul {

color:#333;

margin:0;

padding:0;

}

#top ul li {
background:url(http://2.bp.blogspot.com/_7Y9pl24WpQY/SqkUYNZmPxI
/AAAAAAAAA4U/se2boblD4-M/s320/b3.gif) no-repeat;

list-style-type:none;

border-bottom:1px dashed #CCC;

margin:0 0 10px;

padding:0 0 5px 20px;

}

#top ul li a:hover {

margin:0px 0px 5px;

padding:0px;

}

#topcenter {

width:300px;

float:left;

margin-left:10px;

background:#fff;

padding:10px

}

#topleft {

width:280px;

float:left;

margin-left:10px;

background:#fff;

padding:10px;

}

#topright {

width:280px;

float:right;

margin-left:10px;

background:#fff;

padding:10px;

}

Setelah sobat cari  kode yang mirip seperti ini, biasanya letaknya dibawah </head>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL BLOG SOBAT (Header)' type='Header'/>
</b:section>
</div>

Setelah itu Sobat letakkan kode css ini tepat di bawah  kode css di atas :

<div id='top'>
<b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
</b:section>
</div>

Simpan template.

Kelar sudah proses cara buat widget 3 kolom di bawah header, silakan sobat cek hasilnya, moga berhasil dan bisa bermanfaat buat sobat Asob.

>> Wassalam

"Ketika melakukan sesuatu bukan yang dipikirkan bagaimana hasilnya, tapi bagaimana proses menuju hasilnya"