Cara membagi header menjadi 2 kolom

Cara membagi header menjadi 2 kolom

Hallo sobat, jumpa lagi dengan kang reggy :D. Sekarang, kang reggy akan kembali posting tutorial blog kali ini tentang Cara membagi header menjadi 2 kolom. Nah, sobat pasti bertanya, untuk apakah kolom header dibagi menjadi 2 kolom? jawabannya, kalau header blog, pada umumnya kolom pertama yaitu kolom judul blog sobat dan kolom kedua bisa sobat pakai seperti untuk adsense, pemasangan iklan, search engine dll. Membagi / membelah header menjadi 2 kolom, perlu diketahui desain template itu sangatlah komplek dan menggunakan banyak sekali teknik.

Agar mudah dan terfokus, sebagai contoh untuk menbagi header menjadi 2 bagian kang reggy menggunakan template buatan blogjuragan yaitu Thesis seo blogger template, silahkan sobat mendownloadnya disini Disini. Tetapi jika sobat merasa sudah ahli dalam pengeditan template tidak masalah lah jika menggunakan template sobat sendiri ;). Jika sobat sudah mendownload dan mengupload templatenya ke blog sobat, tampilan header sebelum di edit gambarnya seperti di bawah ini
Cara membagi header menjadi 2 kolom
Oh iya, sebelum kita ke tkp, agar tidak terjadi hal yang tidak diinginkan seperti blog kesayangan sobat menjadi acak - acakan hanya karena hal percobaan, kang reggy sarankan jangan dulu mencoba tutorial ini pada blog kesayangan sobat. Buatlah blog untuk percobaan kemudian upload template thesisnya.  Are you ready guys? ok 1...2...3 lets go, eiitts, kayak mau perlombaan lari aja, hehehe :p. Okedeh sobat, kita langsung ke cara membagi header menjadi 2 kolom
  1. Login pada pada Blogger menggunakan id blog sobat
  2. Template
  3. Edit HTML lalu Lanjutkan
  4. pertama - tama cari kode #header-wrapper { atau lebih lengkapnya mirip seperti di bawah ini
    #header-wrapper {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(http://3.bp.blogspot.com/_rLYhkzmU7RY/TDvdaQEQJhI/AAAAAAAAAAM/tQr4P8Rb7AQ/s1600/line.gif) repeat-x scroll left bottom;
    height:119px;
    width:900px;
    }
    #header-inner {
    background-position:center center;
    margin-left:auto;
    margin-right:auto;
    }
    #header {
    color:#000000;
    text-align:left;
    }
  5. hapus dan ganti kode tersebut dengan kode dibawah ini:
    #header-wrapper {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(http://3.bp.blogspot.com/_rLYhkzmU7RY/TDvdaQEQJhI/AAAAAAAAAAM/tQr4P8Rb7AQ/s1600/line.gif) repeat-x scroll left bottom;
    height:100px;
    width:900px;
    }
    #header-inner {
    width:428px;
    margin:0 auto;
    padding-top:6px;float:left;
    }
    #header {
    color:#000000;
    text-align:left;
    }
    #r_head{
    width:468px;
    float:right;
    padding-top:6px;
    }
  6. selanjutnya geser scroll ke bawah dan cari kode <div id='header-wrapper'> atau lebih lengkapnya mirip seperti di bawah ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
    </b:section>
    </div> 
  7. hapus kode di atas dan ganti dengan kode di bawah ini
    <div id='header-wrapper'>
    <div id='header-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
    </b:section>
    </div>
    <div id='header-kanan'>
    <b:section class='header2' id='header2'/>
    </b:section>
    </div>
    </div>
  8. Simpan Template
Selesai deh, jika semua langkah sudah sobat lakukan seperti di atas, tampilan kolom sesudah diedit akan menjadi seperti pada gambar di bawah ini
Cara membagi header menjadi 2 kolom
Bagaimana sob ? susah apa mudah ? oh iya, kang reggy baru ingat, jika sobat ingin mengubah ukuran setiap kolom, tinggal utak - atik kode yang berwarna merah dengan ukuran yang sesuai dengan kebutuhan sobat. Okedeh sob, sampai disini dulu untuk Cara membagi header menjadi 2 kolom. Sampai Jumpa ;)
ZSF33Z7V3366
Cara membagi header menjadi 2 kolom
Writter: Reggy Zian Purnama
DMCA.com Orang pandai tau tata krama. Dilarang copy paste artikel tanpa seizin penulis!

32 comments Skip to comments

makasih banyak nih tutorialnya, sangat membantu sekali, :D

Kang, blog ini dihalaman depan samping judul post ada comment link berwarna hijau, itu bagaimana cara bikinnya ???
Share donk.... N sebelumnya terima kasih atas tutorialnya :)

akan saya coba di blog demo,,,
makasih sob,,

wilujeng ngeblog

terimakasih infonya saya sudah praktekan

Tq sobat atas info yg brmnfaat....!
nice info sobat,
salam kenal dari saya...

Terima kasih tutorialnya...Salam Blogger

Mantabb Ini Aku Cari2 Udah Lama Akhirnya ketemu,Maklum Ane Baru Di Dunia Bloging,Tapi kalo Boleh Tanya Ni Gan??

Rencana Nya Buat taruh Iklan Atau search Engine Di Header Blog Ane!

Ni template Blog Nya Agan dapat Dimana ya? Kalo Boleh Bagi Berita Nya
Biar Aku Naksir Ama template Ini Seo Friendly banget Nih!!

Salam..! martateknik.blogspot.com

maaf gan, ini template official blog ini. dan desain saya sendiri :D

super lengkap gan..tapi judul blog ane masih di tengah nih...baru muter2 cari info mecah header dulu..kapan2 kalo beneran pengen dipecah..bisa dicoba nih hehe

kok enggak ada ya Kode #header-wrapper

?

Gan, saya pakai template bawaan blogspot, susah editnya... ada saran gan..?

sangat berguna,tipsnya oke........

gan , kok eror ea,, g isa di save,, bagian mana ea padahal dah sama langkah"a,, kode"a pun ma yg dicontohin sama,,,

ada gini nie

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "div" must be terminated by the matching end-tag "/div".

Error 500

maaf gan "div" sebenarnya ada tanda <> nya,, klo ditulis di kotak komentar lengkap g isa jd aq rubah jadi "div" az,,

saran buat mas reggy, lebih mantap kalo di akhir postingan di kasih contoh gambar header 2 kolom. terima kasih

Alhamdulillah blog saya sudah 2 kolom. :)

ini dia yang saya cari-cari..
makasih sob atas tipsnya...
terus berkarya

Wah asyik neh tamplatenya bos, apa namanya ya

nice info,,,,,thnks ya. salam persahabatan aja dari saya,,,,,

mantab,
ini yg saya butuhkan men...
makaseh gant

mak joss informasi nya, perlu di praktek..thanks Gan

gan... aku mau cba trik di atas tp kode #header-wrapper { agak beda gan,, ga kya gtu di atas.

mohon bantuannya... aku pngen taro iklan header kya di blog agan...

bgini gan tampilan html nya...

/* Header-----------------------------------------------*/
#header-wrapper{width:950px;margin:0 auto 0;height:68px;padding:41px 0px 40px 0px;overflow:hidden;}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:45%;overflow:hidden;}
#header h1{margin:0 5px 0;padding:0px 0px 0px 0px;font-family:Droid Serif,Serif,Arial, Helvetica, Sans-serif;font-weight:bold;font-size:36px;line-height:36px;color:#F4D196;text-shadow:0px 1px 0px #000;}
#header .description{padding-left:8px;color:#F4D196;line-height:16px;font-size:16px;padding-top:0px;margin-top:5px;text-shadow:0px 1px 0px #000;font-family:Droid Serif,Serif,Arial, Helvetica, Sans-serif;}
#header h1 a,#header h1 a:visited{color:#F4D196;text-decoration:none}
#header h2{padding-left:15px;color:#F4D196;font:14px Arial,Helvetica,Sans-serif}
#header2{float:right;width:53%;margin-right:0px;padding-right:0px;overflow:hidden;}
#header2 .widget{padding:6px 0px 0px 0px;float:right}
.header-after{background:url(http://4.bp.blogspot.com/-6ltkXfdChhE/Tj8KRXGNDZI/AAAAAAAACG8/RAWgw9shJLc/s1600/menu-primary-bg.png) left top repeat-x;height:40px}

untuk merubah ukuran header blog agan, coba cari #header lalu cari width:45%, nah width itu ganti sesuai keinginan

selanjutnya, cari kode #header2, lalu cari width:53%, nah kode with tersebut ganti sesuai keinginan

lalu jangan lupa mengatur ukuran width pada #header-wrapper

Sangat berguna sekali nih informasinya salam kenal gan moga sukses trus...

pertanyaanku sederhana bos,
apakah membagi sel kolom header blog dari 1 menjadi 2 itu akan mempengaruhi terhadap SEO?

Tidak menemukan header wrapper???????????

punya saya gak ada code header-wrapper sob. trus yang dibagi yang mana?

DItemplate saya tidak berhasil.tidak ada kode
#header-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://3.bp.blogspot.com/_rLYhkzmU7RY/TDvdaQEQJhI/AAAAAAAAAAM/tQr4P8Rb7AQ/s1600/line.gif) repeat-x scroll left bottom;
height:119px;
width:900px;
}
#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:#000000;
text-align:left;
}

Berkomentarlah dengan baik dan sopan. Dilarang oot dari artikel diatas. Komentar yang menyertakan link aktif maupun statis termasuk promosi akan langsung kami hapus.
Show Konversi Kode Hide Konversi Kode Show Emoticon Hide Emoticon