rylcolikes.com

Cara membagi Dua Kolom Header


Sudah siap anak-anak , padahal banyak pembaca blog ini yang sudah bapak-bapak atau ibu-ibu, pak polisi juga suka baca juga lho, ya pak prie? (tapi kemana pak blognya, ko saya cari-cari jadi ga ada sekarang, di delete ya blognya), kalo anak mudanya sih banyak.
Yup... serius nih, dah download trus diupload templatenya kan? kalo sudah sok atuh di baca sajah trik atau cara membagi dua kolom header. Nih triknya kaya gini :
  1. Login ke blogger dengan ID anda dong tentunya, jangan ID saya..ntar blog saya jadi berantakan lagi.
  2. Klik Layout.

  1. Klik tab elemen Halaman.


  1. Jika sudah 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;
}


  1. hapus kode di atas, lalu ganti dengan kode berikut 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;
}



  1. Coba scroll ke bagian bawah, dan temukan kode 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>


  1. Hapus kode di atas, lalu ganti dengan kode di bawah 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>


  1. Klik tombol Simpan Perubahan.

  1. Selesai.


Untuk melihat hasilnya, silahkan anda klik lagi tab Elemen Halaman.

Kolom header anda sudah menjadi dua bagian, yang sebelah kiri dan sebelah kanan. Trus bagaimana kalau sudah begitu? ya terserah anda, kolom sebelah kanan saya buat menjadi elemen layaknya yang ada di sidebar, jadi mau di masukan seach engine, mau iklan, mau gambar, ya terserah yang masukin.