Cara Membuat Widget 3 kolom Di bawah Header Blog


Nah Jika anda tertarik untuk membuatnya silahkan ikuti langkah-langkah di bwah ini:
1.Silahkan Login ke blogger
2.Klik Tata letak/Rancangan
3.Klik Edit html
4.Kemudian Letakan Code CSS berikut ini di atas code ]]></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;

}

5.Kemudian Cari Code Seprti 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>
6.Jika sudah ketemu,letakan code berikut ini tepat di bawah code tadi
<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>


7.Simpan Template