Desember 08, 2011

Membagi Header Menjadi 2 Kolom Kanan Kiri

Situseo Blog : Membagi elemen header menjadi dua kolom kanan dan kiri bisa berguna untuk meletakan widget atau pun adsense, sebagian template yang telah dibuat oleh para designer biasanya mempunyai kolom header hanya satu, tidak menutup kemungkinan ada yang 2 kolom headernya.

Sebelumnya pernah dibahas mengenai cara menambahkan satu elemen diatas header, jika tertarik untuk membacanya, kalian bisa mengklik link tersebut.

Bagi para blogger yang sudah tanggung menggunakan dan sudah cocok dengan template yang dipakai tapi kebetulan bagian elemen headernya hanya satu, kalian bisa mengedit dengan membaginya menjadi dua kolom, kebetulan template yang saya pergunakan juga hanya satu kolom. Sekalian berbagi dengan teman blogger yang templatenya hanya satu kolom dan ingin mengubahnya menjadi dua kolom kanan dan kiri, berikut ini cara membagi header menjadi dua kolom kanan dan kiri.

Contoh kode CSS yang ada dibawah ini merupakan kode CSS template yang saya pergunakan, kemungkinan kode CSS nya berbeda dengan yang kalian pakai, langkah membaginya:
  • Login ke akun Blogger - pilih Design/Rancangan - Edit HTML
  • Sebelum melakukan penambahan script sebaiknya melakukan backup template terlebih dahulu, dengan men-Download Full Template, supaya mudah mengembalikan template kebentuk semula bila hasilnya tidak sesuai dengan yang di inginkan.
  • Selanjutnya cari kode CSS bagian header seperti ini:
#header-wrapper {
width:970px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:970px;
text-align:left;
margin:0;
padding:0;
}

buatlah kode CSS kolom kedua dan tambahkan kode kanan dan kiri, sehingga menjadi seperti ini:

#header-wrapper {
width:970px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:350px;
text-align:left;
margin:0;
padding:0;
float:left;
}
#header2 {
width:350px;
text-align:left;
margin:0px 0 0 0;
padding:0;
float:right;
}

jika kode CSS kalian berbeda dengan kode CSS diatas, kalian perhatikan #header-wrapper { bagian widhtnya. kalian bagi 2 ukurannya dan buat kode CSS nya menjadi #header { dan #header2 { seperti dalam contoh, untuk penamaan kode CSS nya itu terserah kalian yang penting nama tersebut belum ada dalam template.

Selanjutnya carilah kode seperti ini:

<div id='header-wrapper'> 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='Situseo Blog (Header)' type='Header'/> 
</b:section> 
</div>

Sisipkanlah kode yang berwarna merah sebagai kode ID pemanggil kode CSS tersebut diatas, sehingga menjadi seperti ini:

<div id='header-wrapper'> 
<div id='header'> 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='Situseo Blog (Header)' type='Header'/> 
</b:section> 
</div> 
<div id='header2'> 
<b:section class='header' id='header2' preferred='yes'/> 
</div> 
</div>

Save template kalian dan lihat hasilnya dibagian Page Element, jika sudah sesuai dengan yang diinginkan, kalian bisa langsung mengisi kolom header yang baru tersebut dengan widget atau adsense, selamat mencoba.

Semoga bermanfaat,

23 Diskusi untuk Membagi Header Menjadi 2 Kolom Kanan Kiri

25 Desember 2011 01.42  

Hai, saya udah coba, tapi posisinya ga sejajar, yang sebelah kiri lebih tinggi dari yang kanan. Udah coba benerin tapi tetep ga sejajar, jadi dihapus lagi.

27 Januari 2012 02.17  

@Dwijayasblog : sori baru jawab, coba ganti ukuran width menjadi lebih kecil, script diatas sudah saya perbaiki

10 Februari 2012 19.12  

keren gan blognya.. http://angkaraku.blogspot.com/

15 Februari 2012 03.33  

Tempelate blognya keren....
thanks telah memberi inspirasi...

16 Februari 2012 18.13  

makasih infonya gan.....

14 April 2012 21.38  

mas, di blog ane ga kode header-wrapper sprti yg diatas. yg ada cuma ini :

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: $(header.padding);
padding-right: $(header.padding);
}

gmn cranya mas???

15 April 2012 04.11  

@Jugul
.header-inner .Header .titlewrapper {
.header-inner .Header .descriptionwrapper {

kode css tersebut koe yang digabungkan, lihat nilai width-nya dan bagi 2, kemudian membuat id terpisah

16 April 2012 04.18  

@Mas Dalang
bisa buat contohnya ga mas?

16 April 2012 04.41  

@Mas Dalang untuk Pemanggil kodenya bgmana caranya mas?? soalnya kode itu tidak ada.

17 April 2012 03.00  

@Jugul bisa minta alamat link download templatenya atau kirim copy-an template-nya, nanti saya coba bagi 2 bagian headernya

30 April 2012 13.22  

Berhasil gan, jos tutorialnya.

Thanks

1 Mei 2012 17.25  

Desain blognya keren dan isinya oke salam kenal ya dalang


Mampir: http:khairilwalid.blogspot.com

8 Juni 2012 11.56  

wah kasus ane sama seperti mas jugul nih...
susah, kodenya ga cocok....

26 Juni 2012 18.04  

wah,infonya berguna bgt,,akirnya jadi

mkasih bnyak mas ud share.its works :)

11 September 2012 23.01  

thnks atas infonya,,,salam persahabatan aja ya,,,

19 Desember 2012 08.48  

mantep sob. punya saya berhasil. terimakasih sob tutornya.

15 April 2013 14.42  

mantap tutorialnya.... blognya mantep banget hehehe....
http://gias-alauddin.blogspot.com

20 Januari 2015 09.19  

aku coba kok ga bisa miin, gimana tuh http://linkvariasi.blogspot.com/2015/01/mobil-bekas-baru-jakarta-hari-ini.html

7 Februari 2015 21.06  

mantap dah artikelnya kawan
http://acemaxs31.com/obat-diabetes-melitus-herbal/
http://i-bikeco.com
http://mas-galih.com

19 Februari 2015 10.00  

Mantaaap sob artikelnya :)
IJin share http://grosiracemaxstasik.com/pengobatan-alami-ambeien/

23 Februari 2015 11.04  

terimakasih atas informasinya sangat bermanfaat :)
http://kedaijellygamatgoldg.com/obat-herbal-diare-anak-paling-manjur/

Terimakasih infonya Gan (y)
Ini yang sedang saya cari-cari
http://grosirobatjellygmat.com/obat-herbal-pityriasis-alba/

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top