Membuat Tiga Kolom Widget Dibawah Header

Header atau Cara Membuat 3 Kolom 2 Kolom Widget/Gadget diBawah/Diatas Header Juga Cara Menambah 3 Kolom Widget diBawah Header Pada Blog yah itulah tutorial blogspot HTC yang masih terus berlanjut sampai dengan pagi ha,ha,, demi menjajal sebuah Meta Tag Baru dan Belajar SEO ok lah langsung saja ini dia Tutorial Cara Membuat 3 Kolom Widget di Bawah Header :

Langkah-langkah Cara Membuat 3 Kolom Widget diBawah Header :
1. login blog
2. rancangan >> edit HTML (centang Expand Template Widget)
3. cari kode ]]></b:skin>
4. lalu taruh kode dibawah ini tepat diatas kode ]]></b:skin>

/* Top Header
---------------------------- */
#topheader {
width:930px;
clear:both;
float:left;
color:#333;
background:#fff;
margin:0 auto;
padding:0 0 10px;
}


#topheader a:visited {
color:gray;
text-decoration:none;
}


#topheader h2 {
font-size:11px;
font-weight:700;
line-height:1.4em;
text-transform:uppercase;
border-bottom:1px dotted silver;
margin:0 0 10px;
padding:20px 0 2px;
}


#topheader ul {
color:#333;
margin:0;
padding:0;
}


#topheader ul li {
list-style-type:none;
background:fff;
border-bottom:1px dotted #ccc;
padding-left:17px;
margin-top:2px;
}


#left-topheader {
width:360px;
float:left;
padding-left:15px;
}


#center-topheader {
width:230px;
float:left;
padding:0 20px;
}


#right-topheader {
width:260px;
float:right;
padding-right:15px;
}

Silahkan sobat modifikasi kode HTML diatas agar sesuai dengan template blog sobat.
5. cari kode seperti dibawah ini, jika tidak ada cari kode yang hampir sama seperti kode dibwah ini.

<b:section class='blogname' id='top' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='HTC (Header)' type='Header'/>
</b:section>


pada tulisan yang berwarna merah tergantung pada nama blog sobat.
6. lalu tambahkan kode dibawah ini dibawah kode diatas

<div id='topheader'>
<b:section class='topheader' id='left-topheader' preferred='yes'/>
<b:section class='topheader' id='center-topheader' preferred='yes'/>
<b:section class='topheader' id='right-topheader' preferred='yes'/>
</div>

Lalu Simpan Dan Lihat Hasilnya

Bookmark and Share



Artikel Terkait :)

0 komentar:

Posting Komentar

 




Pengikut

Harbudi Manggala Putra MengucapkanTerima Kasih Atas Kunjungan Anda Di Blog Saya . Maaf Saya Hanya Manusia Biasa Yang Berusaha Untuk Menjadi Yang Terbaik