Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Thursday, January 29, 2009

Membuat Header Menjadi Dua Bagian

Beberapa hari ini saya sibuk mencoba membuat berbagai variasi template untuk template baru Blog InFoGauL ini,Rencananya,bulan depan saya ingin mengganti template lagi.Banyak sih yang menyarankan untuk jangan di ganti.. tapi,ngga' tau kenapa saya cepat sekali bosan dengan tampilan blog saya yang sekarang ini.Mulai dari yang 3 kolom,4kolom,hingga 5 kolom dan 6 kolom sudah saya siapkan.. Pengennya sih saya bagikan template-template yang saya buat sendiri tersebut..,tapi takut jelek dan malah dicaci sama temen-temen sekalian hehe..(salah satu template karangan saya sendiri dapat anda lihat disini) kalau anda mau yang bentuk template yang seperti itu,comment aja yah,nanti saya buatkan link downloadnya buat anda^^

Nah,kali ini ada sedikit Tutorial Blog lagi nih mengenai cara membuat header menjadi dua bagian.dimana kolom ini rencananya akan saya pakai untuk di pasangin Google adsense nantinya.Mungkin sobat tertarik untuk membuatnya??Check this out...^






1.Login dulu ke blogspot,kemudian masuk ke TATA LETAK --> EDIT HTML.

2. Cari kode dibawah ini :

#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. Sudah??Kalau belum,saya tungguin nih... hehe.. nah,setelah itu cari kode seperti ini..,

<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. Selesai deh,anda tinggal save hasil kerja anda,lalu pergilah ke Tab Elemen Halaman,Lihatlah ada penambahan elemen baru disebelah header anda.Selanjutnya,tinggal anda tambahkan widget yang anda inginkan.. Atau bisa juga Google Adsense yang berukuran 234px.

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.

Kira-kira bisa di mengerti ngga' yach artikel saya ini..?maklum,saya kurang pandai menulis..^^

See u..

Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

16 comments:

boleh - boleh aja.. ^^

kug gak bekerja di blog gw yawh???

artikel yang bagus, Mantap!

Artikelnya OK sob, cuma di templateku kayaknya ga nyediain header, bisa ditambahin ga ya?

makasi infonya, lg cari yg ginian.

kok gue nga bisa yach
kunjungin donk
andiapri.blogspot.com

aku juga nyoba mas tai ngk well format kayaknya,,,salam kenl ya mas dari pemula

sy uda coba2 ga berhasil gan.. jadi kacau templatenya.. btw kalo masalahnya template ga bisa disimpan,, itu karna ada yg kurang.. coba tambahkan kode ini <@/@b:@section@> sebelum <@/@div> terakhir.. tanda @ nya pada hapus ya..

@tips kecantikan: Maaf, setelah di cek ulang, ternyata ada kesalahan penulisan kode pada tutorial di atas. Sekarang sudah dibenarkan. jadi tinggal ikuti aja,pasti bisa ^^

di template q koq ga bisa ya

http://gratis-gratisssss.blogspot.com/

bcs : ngga bisanya kenapa?

MAKASIH ya Bro

kunjungi

http://dccommunity.tk

Sama-sama.. btw, blognya bagus tuh.. komunitas atau gmana tuh?

mas saya koq gak bisa bagi 2 headernya, saya find #header-wrapper { ndak ada, knp yah?
saya pake template baru.. mohon pencerahanya mas terimakasih

Informasi Terhangat tentang 7 kejadian langka dan spektakuler di seluruh dunia, ikuti update-an nya setiap hari.. Keep stay tune!!

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra