Cara Membuat Header 2 Kolom Pada Template Standar

Coretan Bang Dadan on

Thursday, December 13, 2012

Cara Membuat Header 2 Kolom Pada Template Standar - Sahabat blogger, terkadang kita merasa bingung dengan gaya tampilan blog kita sendiri. sudah berkali - klai ganti tempalte tetapi tidak bisa bertahan lama. emang sih ketika kita sudah merasa pas dan berniat untuk tidak gonta gati tempalte lagi, namun pada kenyataanya bila kita melihat template orang sering merasa tertarik, lalu dengan tidak sengaja sobat mencari - cari tempalte pada penyedia layanan tempalte gratis. setelah pilih-pilih template, pasti ada saja satu yang mungkin bakal sobat coba, dan akhirnya sobat ganti template lagi deh. tapi itu sih hanya pengalaman saya mugnkin sobat gak seperti itu ya??

Nah setelah gonta ganti tempalte dan sudah lumaya bisa mendesains tampilan blog, akhirnya sobat memutuskan utnuk mencoba memakai tempalte standar bawaan blogger yang kemudian sobat modifikasi lagi dengan polesa-polesan HTML dan CSS. Tapi enak juga sih punya template hasil karya sediri ketimbang dapat desains orang. dan disini kita merasa bangga dengan template buatan sendiri meskipun banyak kekurangan juga. hehehe

klik gambar utk memperbesar

Oke sobat, sampai lupa, pada kesempatan kali ini bang dadan akan coba bahas Cara Membuat Header 2 Kolom Pada Template Standar. Nah bagi sobat yang seneng dengan template standar silahkan bila ingin membuat headernya menjadi 2 kolom ikuti panduan - panduan dibawah ini.

---

Cara Membuat Header 2 Kolom Pada Template Standar

---

Berikut langkah - langkahnya :

1. Login Blogger
2. Pilih Dasbor "Rancangan" ⇨ Pilih "Edit HTML" ⇨ Jangan lupa Ceklist "Expand Template Widget" 
3. Cari kode #header-wrapper {

Selengkapnya seperti dibawah ini.

#header-wrapper {
width:960px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:960px;
text-align:left;
margin:0;
padding:0; }

• Seteah itu tambahkan sedikit kode CSS dalam kode di atas. sehingga hasilnya akan menjadi seperti dibawah ini

#header-wrapper {
width:960px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:350px;
text-align:left;
margin:0;
padding:0;
float:left;
}
#header2 {
width:350px;
text-align:left;
margin-top:20px;
padding:0;
float:right;
}

*Keterangan: kode yang berwarna Merah dan Orange adalah kode yang harus ditambahkan pada langkah yang pertama.

• Selanjutnya silahkan sobat cari kode <div id='header-wrapper'>

Untuk lebih lengkap liha kode dibawah.

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

• Lalu buatlah kode diatas seperti dibawah ini

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

Keterangan* Kode yang berwarna merah dan orangen adalah kode yang harus ditambahkan.

• Selanjutnya klik simpan dan selesai.

Sekarang silahkan coba sobat lihat pada tata letak, header blog sobat sekarang sudah terbelah menjadi dua. bagaikan pinang dibelah dua. hehe..

Oke mungkin cukup sekian dulu pembahasan kali ini tentang Cara Membuat Header 2 Kolom Pada Template Standar, semoga bermanfaat buat sobat semua..!!!

Labels: blogger tutorial, template hack, Widget

Thanks for reading Cara Membuat Header 2 Kolom Pada Template Standar. Please share...!