22 Oktober 2010

Tips Membagi Header 2 Kolom Template Designer

Blogger Template designer memiliki kode yang berbeda dengan kode lama. Karena masih baru sehingga banyak para blogger mania yang bingung untuk memodifikasi template blogger yang baru.

Beberapa waktu yang lalu Blog Brugkembar mencoba ganti template memakai template blogger yang baru.  Karena ada sedikit perbedaan kode html dan itu masih asing alias belum akrab sehingga seluruh gadget yang telah terpasang rapih menjadi berantakan.

Saya termasuk pecinta header 2 kolom, satu di kiri dan satunya lagi di kanan.  Sedangkan Blogger template baru tidak menyediakan template dengan header yang 2 kolom. Ketika hendak membagi header, saya mencoba menerapkan tips yang lama ternyata tidak berhasil. Setelah berkelana kesana kemari akhirnya kutemukan juga blog yang memposting tentang cara membagi header di blogger baru. Lewat kesempatan ini saya ingin mengucapkan terima kasih sebanyak-banyaknya kepada :
  1. http://gubhugreyot.blogspot.com/
  2. http://oentoe09.blogspot.com/
Berkat jasa beliau-beliau akhirnya saya dapat membagi header.  Tips yang beliau tulis belumlah 100% memuaskan saya, alias masih ada kekurangan tetapi sudah cukup membuat pintu kreativitas saya menjadi terbuka, sekali lagi saya ucapkan banyak terima kasih.

Maklum saya bukanlah orang yang ahli dalam bidang kode mengkode, juga tanpa didasari ilmu tentang blog, hanya berbekal nekad dan semangat pantang menyerah akhirnya terpecahkan juga misteri kode blogger baru.  Meskipun memakan waktu yang cukup lama (1 minggu lebih) tetapi saya bangga dengan hasil yang saya capai.

Nah, sebagai ungkapan rasa bangga ini pada tutorial kali ini saya coba amalkan hasil perjuanganku selama ini kepada pembaca sekalian.  Khusunya tips mengenai cara membagi header 2 kolom pada template designer blogger.  Ketika dilakukan pecobaan, saya memakai template simple buatan Josh Peterson.  Lebar (width) saya tambah menjadi 1007px.

Bagi yang mau mencoba tips ini, silahkan ikuti langkah berikut ini:

  1. Mencari Kode :
  2. .header-outer {   background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}
  3. Seluruh Kode tadi saya hapus dan ganti dengan kode ini:
    .header-outer {
      background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
      _background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}
    #header {
    width: 45%;  /* untuk mengatur lebar header kiri  - title, description, image */
    margin-right: 10px;float: left; }
    #bgsGR_headerkanan {
    float: right;
    width: 49%;   /* mengatur lebar header kanan */
    margin: 20px 10px 5px 10px;
    padding: 2px;}
    #bgsGR_headerkanan .widget {margin: 3px;}
  4. Selanjutnya cari kode :
    <div class='region-inner header-inner'>
  5. lalu menempatkan kode berikut ini di bawah kode no.3:
    <b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
  6. Save dan hasilnya bisa kita lihat seperti gambar di bawah ini:

membagi_header_blogger_baru

Selamat berkreasi dan memperantik blog.

21 komentar:

  1. mas, nggk ada kode html kyk yg dimaksud.
    kalo blog saya kode header nya kayak gini nih

    www.qrockerz.co.*cc (untk akses hilangkan tnda bintang)


    /************** HEADER *****************/

    #header-wrapper {
    float:left;
    width:880px;
    height: 105px;
    margin-top: 10px;
    margin-bottom:30px;
    padding:10px;
    -moz-border-radius:10px;
    background:#211F1D;
    border:5px solid #171615;
    }

    #header{
    float:left;
    height: 100px;
    }

    #header h1 {
    border-bottom:medium none;
    font-size:40px;
    font-weight:bold;
    text-decoration:none;
    margin-top:30px;
    font-family:Arial;
    margin-bottom:20px;
    color:white;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
    }

    #header h1:hover {
    color:#BF1E2D;
    }

    #header a {
    color:#FFF;
    font-size:40px;
    font-weight:bold;
    text-decoration:none;
    border-bottom:none;
    text-shadow:1px 1px 1px #000000;
    }

    #header a:hover {
    color:#BF1E2D;
    }

    #header .description {
    background-color:#BF1E2D;
    color:white;
    display:inline;
    font-family:georgia;
    font-size:1.6em;
    font-style:italic;
    line-height:26px;
    padding:1px 5px;
    }


    gmna ya solusi nya biar header blog saya jdi 2 bagian.
    mksih

    BalasHapus
  2. @ b.Je de Esperanza, kode itu adalah kode header template lama. memang beda dengan template blogger baru. cara membagi header (kode milik anda) menjadi 2 kolom :

    1. ganti kode ini:
    #header-wrapper {
    float:left;
    width:880px;
    height: 105px;
    margin-top: 10px;
    margin-bottom:30px;
    padding:10px;
    -moz-border-radius:10px;
    background:#211F1D;
    border:5px solid #171615;
    }

    #header{
    float:left;
    height: 100px;
    }

    ganti dengan yang ini:
    #header-wrapper {text-align:center
    width:880px;border-bottom:2px solid #ddd;
    margin:0 auto 0px;
    background:#fff;
    height:105px;
    }
    #header-satu {
    width:48%;
    background-position: left;
    margin-left: auto;
    margin-right: auto;
    float:left;
    }
    #header {
    margin: 0px;
    text-align: left;
    color:$pagetitlecolor;
    }
    #header-dua{
    width:50%;
    margin-right: 10px;
    float:right;
    }


    2. Sekarang cari kode seperti seperti ini:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Brug kembar' type='Header'/>
    </b:section>
    </div>


    3. Setelah ketemu, sisipkan kode cetak tebal berikut dengan penempatan yang seperti contoh dibawah ini:
    <div id='header-wrapper'>
    <div id='header-satu'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Brug kembar' type='Header'/>
    </b:section>
    </div>
    <div id='header-dua'>
    <b:section class='header' id='header2' preferred='yes'/>
    </div>
    </div>


    4. Klik Simpan Template

    mudah-mudahan berhasil.

    BalasHapus
  3. oke mantap http://yohandi99.blogspot.com/

    BalasHapus
  4. gimana caranya bisa diterima adsense seperti blog ini,yohandi99@gmail.com

    BalasHapus
  5. @Yohandi, email sudah dikirim

    BalasHapus
  6. terimakasih balasannya, pasti akan kami coba, maaf kami sudah mencoba trik membagi header menjadi 2 tetapi selalu gagal, mohon sarannya, ini cuplikan header saya
    /* Header
    ----------------------------------------------- */
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
    _background-image: none;

    color: $(header.text.color);

    -moz-border-radius: $(header.border.radius);
    -webkit-border-radius: $(header.border.radius);
    -goog-ms-border-radius: $(header.border.radius);
    border-radius: $(header.border.radius);
    yohandi99@gmail.com

    BalasHapus
  7. @Yohandi, hapus kode .header-outer {.....s/d...}
    lalu ikuti tutorial diatas dengan seksama. biasanya pesan eror muncul akibat salah ketik tanda kutip (")coba pakai shift atau tanpa shift tombol keyboard.
    mudah-mudahan berhasil

    BalasHapus
  8. Info bagus, tapi ko di blog sya ga bisa. Kenapa yah...?
    Ini kode di header saya :

    background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
    _background-image: none;

    color: $(header.text.color);

    Tolong dibalas yah.
    Makasih

    BalasHapus
  9. @Zebit, dicoba sekali lagi pasti berhasil, soalnya saya sudah mencoba menerapkan tutorial ini pada template seperti yang anda pakai dan berhasil.

    BalasHapus
  10. @Zebit, pertama cari kode header-outer yang seperti ini :
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
    _background-image: none;

    color: $(header.text.color);

    -moz-border-radius: $(header.border.radius);
    -webkit-border-radius: $(header.border.radius);
    -goog-ms-border-radius: $(header.border.radius);
    border-radius: $(header.border.radius);
    }


    kedua, ganti dengan ini :
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}
    #header {
    width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
    margin-right: 10px;float: left; }
    #bgsGR_headerkanan {
    float: right;
    width: 49%; /* mengatur lebar header kanan */
    margin: 20px 10px 5px 10px;
    padding: 2px;}
    #bgsGR_headerkanan .widget {margin: 3px;}


    ketiga, cari kode ini:
    <div class='region-inner header-inner'>

    keempat, letakkan kode ini dibawahnya:
    <b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan'
    maxwidgets='1' showaddelement='yes'></b:section>


    kelima, save

    BalasHapus
  11. mas, sumpah mas, saya mau ngucapin terima kasih banyakk mas
    habisnya saya sudah lama sekali mencari tutorial seperti ini. dan baru ketemu sekarang. terimakasih ya mas

    BalasHapus
  12. @unic29, biasa aza mas g usah terlalu berlebihan pakai sumpah-sumpah segala kayak pejabat mau dilantik saja.

    BalasHapus
  13. mas tutorialnya dah berhasil tp warna judul blogku koq ikut ganti ya,gimana ganti warna nya mas backgroundku hitam judul jd ikut hitam jdi gag kliatan judulnya

    BalasHapus
  14. @rifai, masuk di template designer disitu ada pengaturan buat ganti warna judul dan sebagainya.
    Kalau blog anda memakai setingan bahasa inggris, caranya :
    1. Masuk blogger
    2. Design
    3. Template Designer
    4. Advanced
    5. Blog Title (disitu ada pengaturan buat ganti font, warna font, warna background)

    Demikian jawaban saya, semoga berhasil.

    BalasHapus
  15. mas abis saya coba kok ga bisa di save gadgetnya??

    BalasHapus
  16. @Alam Nur Ikhlas, tanda petiknya diketik ulang mas, banyak yang berhasil koq...

    BalasHapus
  17. mas kalau punya saya kode headernya kayak di bawah ini, kira2 gimana cara membaginya? trims buat penjelasannya

    /* Header
    ----------------------------------------------- */
    .header-inner {
    padding: 27px 0 3px;
    }

    .header-inner .section {
    margin: 0 35px;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font-size: 115%;
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    }

    BalasHapus
  18. @Imkomet , anda memakai template modifikasi bukan asli dari blogger sehingga kode headernya berbeda. coba gugling tutorial lain yang cocok dengan kode template anda. terimaksih

    BalasHapus
  19. Wah, thanks banyak. Saya baru berhasil setelah mengikuti tips anda.

    BalasHapus
  20. makasih infonya gan sekarang headerku udah terbagi menjadi dua ^^

    BalasHapus
  21. terimak kasih kang atas sricpt nya semoga bermanfaat

    BalasHapus

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.