Cara Membuat 2 Kolom Header

Cara Membuat 2 Kolom Header - Apa kabar sobat blogger?? pagi yang cerah ini saya harapkan dapat membawah suasana nyaman untuk sobat blogger terutama nyaman berada di blog ini. hehehe.. sebagai postingan ke 2 setelah berganti nama menjadi tatelu saya harapkan dapat memberi faedah untuk sobat blogger.


Kali ini saya akan kasih tahu bagaimana cara membuat 2 kolom header di blog. Dulunya saya pernah memposting topik yang sama yaitu cara membagi header menjadi 2 kolom elemen, tapi rasanya kurang cocok tuch kata elemennya... nah jadi dech christian tatelu posting ini.

Bagi sobat yang tertarik, silahkan ikuti cara membuat 2 kolom header berikut ini.

1. Pertama sobat login ke akun blog sobat
2. Klik rancangan--> edit HTML
3. Jangan centang kotak expand template widget
4. Cari kode css yang mirip di bawah ini:

    #header-wrapper {
    width:900px;
    margin:0 auto 0px;
    background:$bgheadercolor;
    height:190px;
    }
    #header-inner {
    width:900px;
    background-position: center;
    margin-$startSide: auto;
    margin-$endSide: auto;
    }
    #header {
    margin: 0px;
    text-align: left;
    color:$pagetitlecolor;
    }

5. Ganti kode di atas dengan kode berikut.

    #header-wrapper{
    width:980px;
    padding:20px 0 0 0;
    background:#000000;
    margin:0 auto;
    border:;}

    #header-inner{
    background-position:center;
    margin-left:auto;
    margin-right:auto}

    #header{
    float:$startSide;
    width:400px;
    margin:0 auto;
    border:0px solid $bordercolor;
    text-align:left;
    color:$pagetitlecolor
    }

    #header2{
    float:$endSide;
    width:400px;
    margin:0 auto;
    text-align:left;
    }

Tambahan :
  • Edit kode di atas sesuai keinginan sobat terutama kode width yang harus di sesuaikan dengan ukuran header blog sobat.

6. Scroll ke bagian bawah, dan temukan kode yang mirip seperti ini

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

Fokuskan pencarian pada kode
<div id='header-wrapper'>

7. Ganti kode di atas dengan kode berikut:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='judul blog(Header)' type='Header'/>
</b:section>
      <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
      </div><!-- end header-wrapper -->

8. Klik simpan perubahan

9. Langkah terakhir, klik ELEMEN LAMAN dan lihat bila sudah menjadi 2 kolom.

Selesai
Semoga membantu!!

Ditulis Oleh : christian angkouw ~ Cara Bikin Blog

Christian angkouw Sobat sedang membaca artikel tentang Cara Membuat 2 Kolom Header. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

10 comments

tertima kasih tricknya gan

hanya mengganti beberapa kode yach gan
thanks tipsnya

makasih ilmunya gan.

akan saya coba kawan, trima kasih untuk tutorial ini, sangat berguna skli.

thanks, info-infonya sangat bermanfaat!!!!

Thanks infonya...

Kalau header nya jadi 2 kolom bakal memberatkan loading blog gak bro? THANKS :)

ada artikel tentang melebarkan daerah posting pagak sob?

izin langsung praktek dulu mastah. thx share

Thanks sharenya sob sangat bermanfaat

Poskan Komentar

Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.