Cara Mudah Membagi Kolom Header

Kalau pada postingan sebelumya pada tutorial Education For All, membahas tentang cara membuat kolom dibawah header atau diatas header, maka pada tutorial blog pemula kali ini EFA akan membahas tentang Cara Mudah Membagi Kolom Header. kolom header ini bisa demanfaatkan untuk keperluan banyak hal, sperti misalnya untuk iklan dan sebagainya. namun karena EFA sendiri tidak memasang iklan pada blog ini maka EFA manfaatkan untuk memasang gambar animasi. contohnya ya ...bisa sobat blogger mania lihat pada kolom header EFA yang ada disebelah kanan itu. Apabila sobat blogger mania berminat memasang slide show photo seperti pada header EFA silahkan baca tutorialnya dengan cara klik DISINI nah jika template sobat blogger mania memang headernya belum terbagi silahkan saja ikuti langkah langkah berikut ini:

Pertama :Login ke blogger dengan ID anda
Kedua : Klik Layout
Ketiga : Klik tab elemen Halaman , kemudian klik tab Edit HTML, lihat ke bagian kode CSS, lalu cari kode seperti ini :  

/* 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;
}

Hapus Kode diatas lalu ganti dengan kode script dibawah ini

/* 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;
}


 
Kemudian scroll lagi kebawah dan cari kode script yang seperti ini:

<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>

Hapus kode diatas lalu ganti dengan kode dibawah ini

<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>



Terakhir dan yang paling utama simpan.

Selamat mencoba semoga berhasil. apabila ada yang kurang jelas silahkan tulis dikom komentar

Selamat berkarya melalui Blogger...................


 
  

 

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «