Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Cara membagi Dua Kolom Header

Beberapa hari yang lalu sempat ada yang bertanya, bagaimana cara menyimpan search engine di bagian header seperti blognya kang rohman? duhh gimana ya…hehehe , kang rohman coba jawabin deh, soalnya sudah lama nih tidak posting soal desain template blogger. Untuk memasukan search engine di header, ataupun iklan, atau photo, atau apa sajalah namanya, anda perlu membelah atau membagi dua kolom header anda. Namun perlu di ketahui sebelumnya bahwa desain template itu sangat komplek dan menggunakan banyak teknik, agar kita (kita… lho aja kali, padahal gua juga iya ) lebih terfokus, maka kang rohman mengambil sampel template buatan kang rohman sendiri yaitu Template magazine 1 yang jika anda ingin mengetahui teknik ini, anda harus terlebih dahulu mendownload nya disini!, dan kang rohman sarankan jangan pada blog kesayangan anda tapi buatlah satu blog percobaan trus upload deh tuh template magazine nya, kan sayang apabila blog yang anda sayangi jadi berantakan gara-gara jadi bahan percobaan.

Sudah siap anak-anak , padahal banyak pembaca blog ini yang sudah bapak-bapak atau ibu-ibu, pak polisi juga suka baca juga lho, ya pak prie? (tapi kemana pak blognya, ko saya cari-cari jadi ga ada sekarang, di delete ya blognya), kalo anak mudanya sih banyak seperti eko priyanto yang kerjanya nge blog mulu ampe lupa pulang kerumah, trus juga oom sang guru blogger yang walaupun ilmunya segudang masih tetep mau silaturahmi ke blog ku ini, kemudian masenchipz yang rajin komentar, dan E..alahh.. ko jadi acara kirim-kirim salam kaya di raddio aza… ya wis lah kita kemmbali ke lapppppp… pokok bahasan atuh.. emangnya mas tukul yang suka kembali ke lappppp..top.

Yup… serius nih, dah download trus diupload templatenya kan? kalo sudah sok atuh di baca sajah trik atau cara membagi dua kolom header. Nih triknya kaya gini :

  1. Login ke blogger dengan ID anda dong tentunya, jangan ID saya..ntar blog saya jadi berantakan lagi.

  2. Klik Layout.
  3. Klik tab elemen Halaman, maka anda akan melihat tampilan format kolom header anda seperti ini :
  4. page element

  5. Jika sudah di lihat, kemudian klik tab Edit HTML, lihat ke bagian kode CSS, lalu cari kode seperti ini :
  6. /* Header
    ===================================
    */
    #header-wrapper {
    width:900px;
    margin:0 auto 0px;
    background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) 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;
    }

  7. hapus kode di atas, lalu ganti dengan kode berikut ini :
  8. /* Header
    ===================================
    */

    #header-wrapper {
    width:900px;
    margin:0 auto 0px;
    background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
    height:190px;
    }

    #head-inner {
    width:600px;
    background-position: left;
    margin-left: auto;
    margin-right: auto;
    float:left;
    }

    #header {
    margin: 0px;
    text-align: left;
    color:#ffcc66;
    }

    #r_head{
    width:300px;
    float:left;
    padding-top:10px;
    }

  9. Coba scroll ke bagian bawah, dan temukan kode seperti ini :
  10. <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>

  11. Hapus kode di atas, lalu ganti dengan kode di bawah ini :
  12. <div id='header-wrapper'>
    <div id='head-inner'>
    <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='r_head'>
    <b:section class='header' id='header2' preferred='yes'/>
    </div>
    </div>

  13. Klik tombol Simpan Perubahan.
  14. Selesai.

Untuk melihat hasilnya, silahkan anda klik lagi tab Elemen Halaman dan anda akan melihat format kolom header anda menjadi seperti ini :

new page element

Kolom header anda sudah menjadi dua bagian, yang sebelah kiri dan sebelah kanan. Trus bagaimana kalau sudah begitu? ya terserah anda, kolom sebelah kanan saya buat menjadi elemen layaknya yang ada di sidebar, jadi mau di masukan seach engine, mau iklan, mau gambar, ya terserah yang masukin.

Ya udah, cukup..cukup..dan cukup… soalnya jari saya sudah mulai pegal-pegal gara-gara ngetik mulu dari tadi… sampai ketemu lagi deh pada tutorial berikutnya.


Yang sedang asik ngeblog : Info Kesehatan, buyung upik, Ghost, free Info, Wawan wae. Mau ikut nimbrung?

25 Mei 2008 - Posted by | Uncategorized

30 Komentar »

  1. Mantabs kang….
    Thanks….Langsung tak praktek😀

    Komentar oleh Syahuri | 25 Mei 2008 | Balas

  2. keren bos.. tapi sayang aku ndak pake.. soalnya headerku sudah itu saja cukup menghibur.. hehehe…

    Komentar oleh Dzofar | 25 Mei 2008 | Balas

  3. Sangat Membantu Kang…

    Komentar oleh Duta | 25 Mei 2008 | Balas

  4. siip. dah. kapan backgron komentarnya?

    Komentar oleh AKUMUKITA | 26 Mei 2008 | Balas

  5. wah mantap sekali ini kang, rupanya ga cuma duren aja yang bisa di belah, header juga bisa di bedah juga ya kang…!! sekalian tulis kang tips dan triks belah duren di malam pertama🙂

    Komentar oleh Eko Priyanto | 26 Mei 2008 | Balas

  6. malem kang.. klo header bsa di bagi 2.. brarti da cara bt ngebagi dua main post donk.. ayo bahas kang.. yg wordpress ya.. ditunggu sareng abdi yeu?

    Komentar oleh Masenchipz | 26 Mei 2008 | Balas

  7. Kang rohman teh mantep euy

    Komentar oleh BiE | 26 Mei 2008 | Balas

  8. booss!!!

    kalo mo ngilangin garis header gmn ya???

    Komentar oleh ali rahman | 28 Mei 2008 | Balas

  9. @Ali rahman : kalo saya lihat di templatenya seperti ini deh :

    /* Header
    ————————————— */
    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:1px solid $bordercolor; /* baris kode yg ini yang di hapus
    }
    #header-inner {
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    }
    #header {
    margin: 5px;
    border: 1px solid $bordercolor; /* baris kode yg ini yang di hapus
    text-align: center;
    color:$pagetitlecolor;
    }

    perhatikan catatan saya pada kode di atas.

    Komentar oleh Rohman | 28 Mei 2008 | Balas

  10. kalo bikin kolomnya di footer gmana kang?

    Komentar oleh nofee | 29 Mei 2008 | Balas

  11. dapat satu lagi!! Thank’s kang…

    Komentar oleh Hendrawan | 30 Mei 2008 | Balas

  12. mas, tutorial na banyak aku terapin di blog aku lho. Terutama yang ini pas banget ma masalah yag sedan ak hadapi…..thx ya buat solusinya…

    Komentar oleh Welly | 1 Juni 2008 | Balas

  13. ok bos …

    mo dicoba dulu yah …
    bagus juga buat blog ku agar gk ada ruang kosongnya..

    Komentar oleh D i d i | 7 Juni 2008 | Balas

  14. OKe … bisa juga bos !

    walau harus menambah variabel code utk layout template ku (kyk bgheadercolor yg gk ada).

    Makasih banyak yah …

    Komentar oleh D i d i | 8 Juni 2008 | Balas

  15. bagus bangat untuk pemula

    Komentar oleh PMI Cabang Bantul | 9 Juni 2008 | Balas

  16. kang rohman makasih atas ilmunya…saya masih baru…template sudah berhasil saya buat sekarang gimana cara ngubah edit menunya…home…dll…yang ada diheadar…makasih mas suskses selalu untuk kang rohman

    Komentar oleh M U A Z | 19 Juni 2008 | Balas

  17. tolong dibantu kang cara ngedit header untuk link menu…home …edit me…dll…makasih ya

    Komentar oleh M U A Z | 19 Juni 2008 | Balas

  18. Kang, minta sarannya ya…
    di kolom sidebar tepatnya di arsip blog punyaku kok tulisannya bisa lewat dari batas, apa yang salah…
    and cara nambah kolom pada footer blog donk…. OK BOSSSS

    Komentar oleh Briptu_PRIE | 19 Juni 2008 | Balas

  19. Kang maaf, uda di coba tapi hasilnya kacau kalo di buka di firefox, navbarnya (menu) posisi nya jadi pindah ke atas dengan sendirinya. Kalo di IE normal

    Komentar oleh BiE | 7 Juli 2008 | Balas

  20. ;)) ini yang lagi ku cari kang hehe,,,biar bisa kaya punya mas oom gtu hehe,,,tapi bisa di bikin agar sejajar kan kang?? hehe.. ;;) untuk footer kira2 digimananin yah?? kekeke,,experimen lagi ah

    Komentar oleh Shedtya | 14 Juli 2008 | Balas

  21. moho pencerahan… gimana yah cara nambah page element persis dibawah header..?

    Komentar oleh widuri | 20 Juli 2008 | Balas

  22. boss, kalo gwa kengen membuat kolom postingan dan kolom sidebar sama besar gimana caranya Boss?

    trus, cara nambah atau buat sidebar kiri gimana bos ?

    klik : http://nimponk.blogspot.com/

    blog yang berhasil aku ganti Backroundnya.

    eh satu lagi, ngilangin border di judul blog sama garis garis pembatas antar postingan itu gimana caranya?

    Salam Blogger

    Komentar oleh Kojek | 25 Juli 2008 | Balas

  23. punya saya ndak bisa mas

    Komentar oleh klik | 9 Agustus 2008 | Balas

  24. KUEREENNN ABIESSS…!!!!!!!!

    Komentar oleh Thandjoenk | 12 Agustus 2008 | Balas

  25. kenapa waktu gue edit HMTL tersebut slalu keluar ini…………

    Invalid variable declaration in page skin: Variable is used but not defined. Input: bgheadercolor

    Komentar oleh tellme | 17 Agustus 2008 | Balas

  26. @tellme : wah berarti prakteknya bukan pake template magazine 1 satu ya?, ini khusus utk yg pake magazine 1. itu error karena ada string yang berbeda dengan variable nya. coba deh praktekin pake template magazine 1.

    Komentar oleh rohman | 17 Agustus 2008 | Balas

  27. Nggap bisa di parse ke blogger neh. template hasil modifikasi. di koreksi code2 nya donk kang

    Komentar oleh ..........! | 17 Agustus 2008 | Balas

  28. @…….! : sebelum saya menulis ini, tentunya saya sudah mencobanya terlebih dahulu. Mungkin anda mencobanya bukan pada magazine template 1 nih, soalnya saya mengambil sampel template itu, jadi ga berlaku buat semua template di karenakan tentu saja ada string dan variable yang berbeda dengan template lain.

    Komentar oleh rohman | 17 Agustus 2008 | Balas

  29. oww gitu yah, kalo bisa mas di ajarin sama templates yg biasa aja lah, biar kami ngga puyeng

    Komentar oleh klik | 19 Agustus 2008 | Balas

  30. ini yang aku cari2 kang
    thanks berat kang rohman
    ta comot ya codenya
    tar balik lagi….

    Komentar oleh ristianb | 23 Agustus 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: