Membuat Widget 3 Kolom Dibawah Header

Langsung menuju lokasi pengeditan template-nya.

• Silahkan login ke blogger.
• Tuju Tata Letak.
• Pilih tab Edit HML.
• Jangan di klik Expand Template Widget, karena akan memusingkan sobat.
• 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR84fmjoC5mtbO0n5FCjoGZYhyGDXSnBNJhK_IcBqHyr-5HrNk0EeLclU4fADlM8q01bBRYZwphzF0fc-OCXpv79z7rZDrAly1gS3bztJvz2zJMnqXdjSB71csKLJJWJBwaBs4919Idjnn/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, 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:widget>

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