Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Minggu, 28 Maret 2010

Membuat Header 2 Kolom

Kategori :
Membuat Header 2 KolomHeader 2 kolom? bingung maksud dari Header 2 kolom? maksudnya y dalam template default dari blogger itu rata-rata mempunyai headerr hanya 1 kolom saja biasanya letaknya di tengah kalau tidak di samping sebelah kiri dan saya belum pernah melihat Header 1 kolom letaknya di kanan, mungkin kalau template dari luar blogger ada yang menggunakan header 2 kolom tapi tidak banyak juga sich yang memakainya.

Pada kesempatan ini saya akan menjelaskan cara membuat Header 2 kolom, kegunaan Membuat Header 2 kolom yaitu memberi ruang lebih untuk menaruh Widget. Biasanya Header 2 kolom di pakai untuk menaruh iklan ataupun yang lain seperti saya, saya memanfaatkannya untuk menaruh google adsense di sebelah kanan dan Header saya di sebelah kiri dengan ukuran kurang lebih 150 (kiri) dan 510 (kanan), nah kalau sobat ingin membuat header 2 kolom ikuti saja langkah-langkah di bawah ini :
  1. Seperti biasa login ke blogger
  2. masuk ke Tata Letak => Edit HTML

    Membuat Header 2 Kolom
  3. setelah berada pada halaman tersebut cari Tulisan Header-Wrapper biasanya letaknya tidak jauh dari atas, lalu hapus kode seperti di bawah ini


    #header-wrapper {
    width:900px;
    margin:0 auto 0px;
    background:$bgheadercolor
    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. setelah di hapus masukan kode di bawah ini tepat di tempat sobat hapus kode di atas


    #header-wrapper {
    width:980px; /*sobat bisa mengecilkan atau membesarkannya*/
    margin:0 auto 10px;
    }

    #headerkiri {
    width:200px; /*sobat bisa mengecilkan atau membesarkannya*/
    background-position: left;
    margin-left: auto;
    margin-right: auto;
    float:left;
    }

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

    #header h1 {
    margin:5px 5px 0;
    padding:15px 20px .25em;
    line-height:1.2em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font: $pagetitlefont;
    }

    #header a {
    color:$pagetitlecolor;
    text-decoration:none;
    }

    #header a:hover {
    color:$pagetitlecolor;
    }

    #header .description {
    margin:0 5px 5px;
    padding:0 20px 15px;
    max-width:150px;
    text-transform:uppercase;
    letter-spacing:.2em;
    line-height: 1.4em;
    font: $descriptionfont;
    color: $descriptioncolor;
    }

    #header img {
    margin-$startSide: auto;
    margin-$endSide: auto;
    }

    #headerkanan{
    width:750px; /*sobat bisa mengecilkan atau membesarkannya*/
    float:right;
    padding-top:26px;
    }


    Membuat Header 2 Kolom
  5. setelah itu cari kode yang hampir mirip dengan kode di bawah ini, tapi kalau sobat susah dan cari saja Header-wrapper tapi bentuknya tetap sama seperti kode di bawah 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>


    Membuat Header 2 Kolom

  6. setelah ketemu hapus dan ganti dengan kode di bawah ini


    <div id='header-wrapper'>
    <div id='headerkiri'>
    <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='headerkanan'>
    <b:section class='header' id='header2' preferred='yes'/>
    </div>
    </div>


  7. nah kalau sudah tinggal sobat simpan deh
  8. Selesai

Mudah bukan Membuat Header 2 kolom? kalau mudah y sukur deh dan kalau susah y kasian deh hihihihi, kalau sobat mengalami kesulitan atau ingin sebuah tutorial sobat bisa memberi tahu lewat kotak komentar di bawah ini atau bisa mengisi di buku tamu yang letaknya ada di samping blog saya ini, saya kira cukup sampai disini dulu y. Terima Kasih And Happy Blogging :)).
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

19 Komentar untuk Membuat Header 2 Kolom

oke bro. .
makasih tips nya. . .
dan
ilmunya juga. .

makasih..
tapi kalau dilihat di Page elemennya jadi g kelihatan header kanannya..solusinya?

thx nih tutorialnya, tapi headerku udah 2 hehe...

bagus ni tutorialnya buat yang mau buat header 2 kolom,heheheh
maen2 ke blog saya mas

gmna sich??????,aq gak dong....,mhn blz

@SLEMANIA BARAT => Ada Kesulitan di mana mas? klo isa saya bantu. Terima Kasih

sip kawan makasih tutornya..
oia masalah banner sobat yang gratis tu bener gag? soalnya aq dah melengkapi data yang ada qk iklan aq lum di munculin juga???
makasih kawan..

salam kenal , mantap bos

oke masi tip nya sumurkeberuntungan.blogspot.com

akhirnya dgn tutorial dari juragan ini,, blog ane bisa gan.. setelah 2 hari ane ngubek2 gugle.. gonta gnati tutorial.. huh,,, makasih banget gan...

ada yang tau cara bikin header 2 kolom untuk blogger new template designer?

maksih triknya... G0od job

nice post ..

terimakasih tutornya .. sekarang headerku 2 kolom :D

silahkan di check d blog saya

thanks tutorialnya mas bero ... sangat bermanfaat sekali

Keren coy..!!!

Balik ke blogku ya

aku cari kode yang harus dihapus kok ga ketemu ya bro...apa ini hanya untuk tamplate yang lama yah

masih dicoba dulu teman, ada yang kurang nih sepertinya pada template saya. Trima kasih