Cara Membuat / Membagi Header Blog menjadi 2 (dua) Kolom

Post by Hori Revens on Saturday, May 14, 2011 | 12:40 AM


Bosan dengan punya header blog cuma satu kolom? Tenang..bisa kita tweak kok. Kita bisa membuatnya menjadi dua kolom dengan sedikit editing. Banyak fungsi sebenarnya untuk membuat dua kolom header, selain membuat banyak tempat untuk widget juga bisa menaruh iklan/banner dengan posisi yang sangat strategis. Oke deh, langsung ke TKP gan . . . !!!
1.     Login ke Blogger.
2.     Pilih menu Page Element – Edit HTML – centang Expand Widget Template.
3.     Cari kode berikut ini :

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

4.     Hapus kode diatas lalu ganti dengan kode berikut :

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

5.     Coba anda Scroll ke bagian bawah dan temukan 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>
</div>

6.     Hapus kode diatas dang anti dengan kode dibawah ini :

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

7.     Selesai dan Save template.

16 Comments:

  • Mantafff articlenya..sangat membantu buat newbie kek saya gini:)

  • @gehrings : sipp deh klo gitu sob ^^

  • Bermanfaat gan, ane belum pernah coba sih..,

    Ntar ane coba deh..


    :D

  • manteppp gannNn...,langsung ke TKP dahHH N Nyedot ilmunya ya ganNN...
    mkasihhH ganNN..
    tnya jga GannN kasih text yang buat chat box d blogspot qta ganN...mkasihH

  • Makasih ya bos, semoga bermanfaat ni..
    salam kenal

  • @ponsel : silakan aja sob disedot tu ilmunya n makasih juga sudah berkunjung kesini..maksudnya cara bikin chatbox kaya disamping kanan itu tow???

    @kamal : iy sob salam kenal juga dari horier

  • wah-wah wah, bagus banget blog tutorial ini.
    Sudah saya Follow blog ini sob. Followback di:
    haririalghazir.com
    Mohon partisipasinya

  • @hariri : siap boz langsung meluncur nih

  • makasih infonya, semoga bermanfaat dan sukses selalu

  • @obat : oke mas sama" deh, sukses juga yah buat webnya ^^

  • OH gitu, makasih

    ultimatemukmin.blogspot.com

  • Bloeh nih di coba Om.
    Makasih ilmu nya.
    Salam Kenal

  • makasih banyak ya atas tutorial htmlnya
    sangat membantu sekali

  • ini yang aku cari2...
    izin copas kawan...

  • Post a Comment

    Mari kita saling voting dan berkomentar. Jika kalian suka dengan artikel ini, ayo kita "Share" untuk membagikan informasi ini kepada teman yang lain agar lebih bermanfaat. Terima kasih banyak saya ucapkan, Salam Blogger teman . . .