Widget 3 Kolom Dibawah Header

Untuk mempercantik tampilan blog salah satu caranya adalah menambah widget dibawah header. Dan kali ini ada 3 kolom yang akan terpasang jika pemasangan kode css-nya benar. Langkahnya adalah :

• Silahkan login ke blogger;



• Pilih Rancangan;


• Pilih tab Edit HML;


• Jangan di klik Expand Template Widget;


• 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/he...) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78uFev1ImtpoNOeI4h5sOZx-TrPhu6H6ijKUYR-KzwMgWe-GIX2rs9NgV_TqcZN9dP14kWAVlUA0gFEVFzjGKd-1IVAtV2jHipRUXiQIrTuyBHdu8w2L6xqkWQtm3yjsm75B6r7y2VGcF/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;
}

• Cari kode yang mirip seperti ini :
  

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

• Kemudian letakkan kode berikut ini tepat setelah kode diatas;

<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 dan lihat hasilnya. 

Semoga bermanfaat....!!!!