Jumat, 01 April 2011

Membuat Header menjadi 2 bagian

 Kalo kamu bosen ama tampilan template mu yang header nya cuma satu, di sini saya akan ngasih tau kamu caranya, headernya itu bisa kamu pake sebagai adsense atau widget2 yang kamu sukai

 Ini dia caranya
1.Login dulu ke blogger pilih TATA LETAK terus EDIT HTML.

2. Cari kode dibawah :

#header-wrapper {
width:920px;
float:left;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ganti kode berwarna merah menjadi 554px

3. Selanjutnya,cari kode :

#outer-wrapper {
width: 920px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Rubah angka yang berwarna merah menjadi 554px juga.
Kemudian,taruh kode di bawah ini tepat diatas kode tersebut

#header2-wrapper {
width:234px;
float:right;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

4. Kalo udah
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama blog anda (Header)' type='Header'/>
</b:section>
</div>

Masukkan kode ini tepat di bawah kode tersebut.

<div id='header2-wrapper'>
<b:section class='header2' id='header2' maxwidgets='1' showaddelement='no'>

</b:section>
</div>

5. Kalo udah, simpan

Sekatang masuk ke elemen2 dan lihat, header kamu sekarang udahh menjadi dua benar bukan ?

Nb: lebar kolom diatas memang saya sesuaikan untuk google adsense ukuran 234px,jadi jika anda ingin memasukkan sebuah elemen dengan ukuran lain,anda tinggal mengganti semua kode 234px diatas dengan ukuran elemen yang anda inginkan tersebut.Dan jangan lupa untuk mengurangi kode lebar 554px dengan lebar penambahan elemen anda.

Cth: jika anda memasukkan elemen lain yang lebarnya 436px,maka gantilah kode width: 234px; dengan kode width: 436px; lalu setelah itu kurangi kode lebar 554px dengan hasil dari 436px dikurang 234px.sehingga menjadi 352px.

Tidak ada komentar:

Posting Komentar