Membuat Widget 3 Kolom Dibawah Header

Widget 3 kolom dibawah header ini sebenarnya tidak terlalu penting untuk di buat di blog . Namun tidak ada salahnya jika kita pengen mencobanya. Ini hampir sama dengan postingan saya sebelumnya tentang membuat elemen " gadget " di bawah header , bedanya disini elemen dibagi 3 kolom .

OK langsung aja kita ke TKP :

•  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/AVvXsEgx0Gu3Fo_hAuJmSMlruAA4_HeCJmueIwcbqlmdyz39vvWrZyjCS-fkaMjV-o5Cm9k1dueR_J8MP3-Be2WVX2dmd5mRdl-_wsGp2Rdmw2_WhFFyoh4FZOiXDrORIA8rKh-3L6UAw_kuCVx3/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 / dibawah  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

 Liat hasinya ...dibawah header ada 3 elemen "gadget" ....

Judul: Membuat Widget 3 Kolom Dibawah Header
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh edwin naiborhu

Terima Kasih Atas Kunjungan Anda...