Belajar bangkit dari kegagalan merupakan langkah awal menuju sukses, jangan menyerah untuk bangkit.
@my Facebook
Kaya Dari Facebook

Jumat, April 23, 2010

Merubah header menjadi 1kolom atau 2 kolom


Asalamualaikum sobat bloger semua, mau posting age nie semoga bermanfaat. Pembahasan kali ini saya mau sedikit share tentang bagai mana cara membagi header menjadi 1 kolom atau 2 kolom. Pembagian haeder menjadi 2 ataupun 1 kolom cukup simpel gag terlalu rumit menu html-nya hanya perlu penggantian pada template blogger sobat saja, yah langsung saja kita praktekin yukz.. :)

Contoh header 1 kolom
 
Contoh hesder 2 kolom



Yang pertama merubah header 1 kolom menjadi 2 kolom

  • Sobat login ke akun blogger sobat sendiri bukan akun saya.. he :)
  • pilih tata letak --> edit HTML
  • Agar lebih amannya sobat download template lengkap terlebih dahulu template sobat untuk menghindari hal-hal yang tidak di inginkan.
  • Selanjutnya sobat cari kode header-wrapper seperti 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;
}
  • Selanjutnya kode yang sudah sobat temukan di atas ganti dengan kode berikut :
#header-wrapper {
width:980px;
margin:0 auto 10px;
}

#headerkiri {
width:200px;
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;
float:right;
padding-top:26px;
}
  • Berikutnya sobat cari kode berikut ini, agar pencarian sobat lebih mudah pencet ja ctrl+F :
<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>

  •  Setelah kode di atas ketemu berikutnya sobat ganti dengan kode berikut 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>

  •  Yang terakgir simpan template.

    Berikutnya cara merubah header 2 kolom menjadi 1 kolom. Ini sama halnya dengan yang telah di uraikan di tas hanya tinggal di balik saja. Kalo masih bingung mari kita ulas sekali lagi bersama sama.

    • Sama juga sobat harus login ke akun blogger sobat.
    • Selanjutnya pilih Tata letak --> Edit HTML
    • Sobat cari kode berikut ini :
    #header-wrapper {
    width:980px;
    margin:0 auto 10px;
    }

    #headerkiri {
    width:200px;
    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;
    float:right;
    padding-top:26px;
    }

    • Kemudian sobat ganti menjadi kode berikut :
    #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;
    }

    •  Setelah berhasil dengan kode di atas sobat cari lagi kode berikut 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>

    • Kemudian ganti menjadi kode berikut :
    <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>

    • Nah yang teakhir jangan lupa di save template. 
    NB : Pada huruf yang berwarna biru bisa sobat sesuaikan dengan lebar template sobat.

    Pada intinya semua sama hanya tinggal di balik saja kode htmlnya yang semula 1 kolom menjadi 2 kolom begitu juga merubah  yang 2 kolom mwnjadi 1 kolom. Semoga ilmu ini bermanfaat buat sobat blogger semua dan mohon dukungannya dalam kontes SEO negeriads.com solusi berpromosi.

      Related Posts by Categories



      2 komentar:

      Indonesian Fundamentalist on 23 Juni 2010 01.33 mengatakan...

      goodddd...

      Blog Berbagi Info on 3 Desember 2010 18.14 mengatakan...

      Info yang menarik kawan!!!! dengan ini berarti saya bisa mencoba membuat iklan di header blog..... skali lagi trima kasih ya Bro :D

      Posting Komentar

      Tinggalin komentar yaw, no SPAM please and isi Url hanya pada kolom Url, no Post.. ^_^v
      NegeriAds.com solusi berpromosi
      Promosi produk dengan negeriads.com solusi berpromosi
      Berpromosi di negeriads.com solusi berpromosi | negeriads.com
      ..::TERIMAKASIH::..

       

      History Visitor!