Featured

Home » , , » Membuat Header 2 Kolom Satu Tempat Iklan

Membuat Header 2 Kolom Satu Tempat Iklan


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 :)).
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Anggi Rocker

4 komentar:

  1. Bisa diperlihatkan demonya gan...

    BalasHapus
  2. bagus banget gan,, langsung saya praktekkan pad blog jadul saya...,,silahkan cek hasilnya....

    BalasHapus

Terima kasih telah berkunjung ^_^ ! Silahkan tinggalkan komentar untuk respon/pertanyaan.
[-] jangan berkomentar SPAM (promosi, dll,)
[-] jangan komentar yang berisi link hidup,
[-] jangan berkomentar yang tidak relevan dan berkualitas rendah ,karena akan saya abaikan dan tidak akan saya Approve. Maaf apabila ada komentar yang belum saya tanggapi karena saya tidak online 24 Jam. Terima kasih.
SERING-SERING BERKUNJUNG SOBAT

 
Support : Google Impact | Google.com
Copyright © 2013. 1# | Knowledge and inspiration - All Rights Reserved
Template Modify by Anggirocker
Proudly powered by Blogger