35 Membagi Header Menjadi Dua Kolom

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Alhamdulillah hari ini bisa update lagi setelah beberapa hari asyik ngotak ngatik CSS dan belajar menggunakan beberapa program (Adobe Photoshop, Corel Draw X4, DreamLight Photo Editor dan PhotoShine) yang baru saya instal dilaptop kesayangan, yang tentu program itu saya harapkan bisa membantu saya lebih kreatif lagi dalam mendesain template kedepan dan menggunakannya pada hal-hal lain yang juga memeberi maslahat.
Tutorial sebelumnya kita sudah pernah membahas cara menambahkan kolom atau elemen halaman diatas header dan dibawah header juga menambahkan dua dan tiga kolom dibawah header. Kali ini kita akan belajar menambahkan elemen halaman baru pada header atau membagi header menjadi dua kolom.
Hasilnya seperti screenshot berikut:
membagi header menjadi dua kolom
Berikut langkah-langkahnya:

1. Seperti biasa dalam keadaan log in pada account sobat
2. Klik Tata Letak
3. Klik Edit HTML
4. Bisa Download Template Lengkap jika khawatir gagal
5. Sekarang cari kode CSS seperti beikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
6. Ganti semua kode diatas dengan kode berikut:
/* Header
----------------------------------------------- */
#header-wrapper {
width:930px; 
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding
-top:10px;
}
Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka widht dengan lebar header template sobat.
7. Sekarang cari kode seperti berikut:
<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat  Eksperimen Kecil (Header)' type='Header'/>
</b:section>
    </div>
8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:
<div id='header-wrapper'>
<div id='header-one'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat  Eksperimen Kecil (Header)' type='Header'/>
</b:section>
    </div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
9. Klik Simpan Template
10. Selesai
Untuk melihat hasil, klik elemen halaman, jika tampilan header sobat-sobat sekalian serupa  screenshoot  diatas, berarti eksperimennya berhasil. Silahkan isi kolom baru dengan ragam widget atau ads.
Semoga bermanfaat dan sukses selalu!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

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 Tips Trik Blogging

35 komentar :

  1. @ denie: Oke. Thanks apresiasinya.

    BalasHapus
  2. Masya'Allah Alaik, Wabarakallahu Fiiki, Wa Adamallahu Tawfiqahu Laki Fi Shun'il Khaer Wanaf'annas.
    Wala Tagtarrina Bikatsratil Mu'jibin, Fainnahu Man Tawadha'a Lillahi Rafa'ahullah. Dumyy Ala Darbil Birri Wal Huda, Wattaqi Rabbaki Haetsu Ma Kunti.

    BalasHapus
  3. luarbiasa tutorialnya semakin hari semakin mantab sukses n salut buat mba anaa atas kreatifitasnya

    salam

    BalasHapus
  4. wah selalu ada ilmu yang baru dan menarik seputar blogger di sini, thanks seklai yah sob^^
    blog ini bisa dijadikan panduan saya untuk mengutak atik blog nih,, keep sahring!

    salam blogger :D

    BalasHapus
  5. gk biasanya nih, belum da postingan baru, btw ada rasa terimakasihku bwt amatullah syukur, cekidot di tempatku ya

    BalasHapus
  6. makasih ya mba, makin hari makin kreatif dan keren aja nih...
    terus berbagi ilmunya ya mba.

    BalasHapus
  7. tutorial yang sangat bermanfaat.
    TFS ukhti.

    BalasHapus
  8. @ all: terimakasih apresiasinya

    BalasHapus
  9. kembali tersaji tutorial mantap disini...
    Selamat malam dan terima kasih.
    Moga sukses selalu.

    BalasHapus
  10. @ Seti@wan Dirgant@Ra: Terimakasih apresiasinya

    BalasHapus
  11. bagus nih tips membagi header menjadi beberapa kolom ...bisa kau coba ah..
    buat nambah wawasan otak atik templatenya!

    BalasHapus
  12. @ master: silahkan, moga berhasil dan bermanfaat

    BalasHapus
  13. wah ternyata nggak terlalu susah ngeditnya. tapi saya pakai wordpress sih, jadi beda deh :D..

    blognya bagus nih bro. kalo mau tambah penghasilan lewat blognya pasang iklan CPM aja. Yang ini langsung ngebayar ke rekening paypal tiap bulannya lho.

    BalasHapus
  14. @ Toko DVD: Iya, Wordpress blm tau nie... maaf!

    Terimakasih linkx, pgn jg insyaAllah planning kdpn...

    Terimakasih jg apresiasinya.

    BalasHapus
  15. mkash bagt ya infonya ...

    BalasHapus
  16. thanks nie tipsnya
    langsung coba nie hehehe

    BalasHapus
  17. Thnks, Infonya, sekarang Blog ku bisa di bagi 2 tu header nya, ... hehehe.. pinter juga
    semoga sukses selalu dah...

    BalasHapus
  18. HEHEHEH aku udah cba ko gak berhasil ? solusi nya nih !

    BalasHapus
  19. opz, ane nyangkut dimari?? Tapi OK lah Postingannya. Salam kenal hib ! Agel Ibrahim

    BalasHapus
  20. Salam ukhti, termakasih atas tips dan tutorialnya. sangat membantu.
    saya mau tanya gimana cara menghapus Elemen halaman di bawah header...
    terimakasih...

    BalasHapus
  21. aduhh,,
    saya coba,, tapi kok muncul sidebar baru ya untuk menambah widget baru?

    BalasHapus
  22. Asslamu'alaikum.

    tutorialnya mudah untuk dipahami
    layoutnya indah dan rapih
    akan saya coba..

    terimakasih atas tutorialnya. ukhti

    BalasHapus
  23. Apa trik ini berlaku untuk semua jenis templet
    http://yohandi99.blogspot.com/

    BalasHapus
  24. oalah ternyata ladies to. pantesan kok serba pink, ngapunten baru newbie. jadi masih menimbah ilmu gt. dicobi rumiyen ae. thank's

    BalasHapus
  25. terimakasih infonya boss, langsung praktek

    BalasHapus
  26. salam kenal,
    saya kebetulan lagi nyari-nyari ini...
    untuk buat header saya jadi 2 kolom,
    terimakasih

    BalasHapus
  27. Bagaimana buat header di blogspot bila tampil di semua lebar monitor ukurannya menyesuaikan bila dlihat di sebaranga browser. Maksudnya header tidak jadi kecil bila dilihat, trims

    BalasHapus
  28. terimakasih mas artikelnya membantu saya untuk menyempurnakan tampilan blog saya

    BalasHapus
  29. sangat membantu sekali untuk orang seperti saya yang baru belajar, terima kasih mas

    BalasHapus
  30. nice info,,,thnks ya. salam persahabatan aja ya,,,,,

    BalasHapus
  31. nice info thnks ya,,,salam kenal dan persahabatan dari saya.

    BalasHapus
  32. Thanks sudah berbagi tips&trik bloggingnya mbak...kayanya boleh di coba neh dgn menambah fitur baru atau membagi 2 header dlm template blog paling tidak nanti bisa di buat Iklan adsense ya hehehe.

    BalasHapus
  33. jaza killa khoiro bu...sudah banyak yg masuk diemailku semua artikelnya

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!