Cara Membagi Header Menjadi 2 Kolom - Pada kesempatan kali ini sundaboy akan mencoba membahas bagaimana Cara Membagi Header Menjadi 2 Kolom, ini khusus bagi template yang hanya mempunyai Header 1 Kolom. nah dengan Membagi Header Menjadi 2 Kolom maka sahabat dapat mempergunakan kolom tersebut untuk memasang sebuah iklan.
Sebelum kita membahas tentang Cara Membagi Header Menjadi 2 Kolom sahabat juga bisa membaca artikel sebelumnya yaitu : Cara Membuat Forum Pada Blog, Cara Membuat Tombol Back To Top, Cara Membuat Widget Artikel Terpopuler, Cara Membuat Link Exchange Dengan Sroll.
Baiklah sekarang kalau sahabat tertarik dan ingin Membagi Header Menjadi 2 Kolom, berikut langkah langkah yang harus sahabat lakukan.
1. Login ke Akun Blogger
2. Pilih Rancangan
3. Pilih Edit HTML
4. Download terlebih dahulu template sahabat, untuk menghindari dari kesalahan memasukan kode script
5. Centang Expand Widget
6. Selanjutnya silahkan sahabat cari kode yang mirip dengan kode dibawah ini. untuk memudahkan pencarian sahabat bisa menekan tombol Ctrl+F secara bersamaan.
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Kalau sudah ketemu Ganti kode script diatas dengan kode dibawah ini :
#header {
float:left;
width:35%;
height:120px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2{float:left; width:60%; height:100px}
Selanjutnya silahkan sahabat cari lagi kode dibawah ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAMA BLOG (Header)' type='Header'/>
</b:section>
</div>
NAMA BLOG Cari sesuai dengan nama blog milik sahabat.
Kalau sudah ketemu silahkan Ganti dengan ode script dibawah ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAMA BLOG (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div>
<!-- end header-wrapper -->
NB : sahabat bisa menentukan lebar dan tinggi kolom yang akan sahabat buat, dengan mengganti Width:35% dan height:120px
7. Simpan template dan lihatlah hasilnya
Nah itu Tutorial tentang Cara Membagi Header Menjadi 2 Kolom yang dapat sundaboy share, kurang lebihnya mohon untuk dimaafkan. good luck
Thanks sob atas info y yg sgt brmnfaat,,,,
BalasHapussalam kenal sob...!
happy Blogging!
@irwan : terimakasih sudah berkunjung gan..
BalasHapuswah om..infonya sangat lengkap..tapi elum berniat memecah header hehe..nanti kapan2 kalo beneran niat mecah header...bisa dipraktekkan dah :D
BalasHapusmantap bos. work 100% di blogku :) makasih yaa
BalasHapusnice info..thnks ya. salam persahabatan aja ya,,,
BalasHapusalhamdulillah, akhirnya selesai sudah saya mempraktekkan tutorial ini dan berhasil 100% .. akhirnya pencarian saya berakhir sampai disini di tutorial Cara Membagi Header Menjadi 2 Kolom. trimakasih saya haturkan. wassalam.
BalasHapusHi! im soo in love with your blog.. keep on writing.. please visit my blog..
BalasHapusartikelnya sangat menarik untuk di coba... salam singgah blogwalking
BalasHapus