Selamat Datang

Cara membuat 3 kolom atau elemen dibawah header

Di postingan kali ini saya akan memberitahu cara membuat 3 Kolom atau 3 elemen di bawah header. Fungsi ini bisa kita jadiin untuk tempat nagkring iklan atau apa saja lah yang kita inginkan.
Ya sudah kita langsung saja ke TKP. Ikuti langkah-langkahnya:
1. Anda Login dulu ke Blogger
2. Masuk Tata Letak
3. Edit HTML, jangan lupa centang expand template widgetnya.
4. Cari code script ini ]]></b:skin>; , untuk memudahkan tekan saja ctrl+f.
5. Copy script di bawah ini simpan sebelum(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;
}

Keterangan:
#topheader adalah kode untuk kolom secara keseluruhan;
#left-topheader adalah kode untuk kolom sebelah kanan;
#center-topheader adalah kode untuk kolom pada posisi tengah;
#right-topheader adalah kode untuk kolom sebelah kiri;
Width: px adalah kode untuk ukuran lebar kolom;
Padding adalah jarak sela antara kolom satu dengan lainnya;
Anda bisa merubahnya sesuka hati:
6. Cari kode ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>

7. Copy script dibawah ini, simpan di bawah 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>

8. Pratinjau dulu, jika berhasil silahkan simpan dan jika gagal jangan disimpan.
9. Selamat mencoba

0 komentar:

Posting Komentar

NO SPAM

 
 
 

Folow me


Get This Widget

Banner Teman