Cara Membuat Widget 3 Kolom Dibawah Header

Cara Membuat Widget 3 Kolom Dibawah Header

Widget 3 kolom dibawah header ini sebenarnya bisa sobat tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Membuat 3 Kolom Dibawah Header Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin sobat perlukan. kali ini saya meletakkannya bagian atas atau tepatnya dibawah header. 

Langsung menuju lokasi pengeditan template-nya.

1. Silahkan login ke blogger.
2. Lalu Tata Letak.
3. Pilih tab Edit HML.
4. Tekan Ctr + F
5. Letakkan kode css berikut ini diatas kode  ]]></b:skin>

Sebelumnya diKlik dahulu Biasanya bentuk nya seperti ini  <b:skin>….</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/AVvXsEjeDCGMsfT8idsd2iXnIJwrlkse0wasvVprGf3VYrRwtKuozqaUGxphI3zjcQCInBDQ1hZnyXuitoog-uzc9U42v8kqKeFjrs4JCv1RrB-l2uPhKW8qvJdOa0J-ECqxwMQutmN1iUkOD979/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: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.

Semoga Bermanfaat dan Sukses