Cara Membagi Dua Kolom Header


Cara Membagi Dua Kolom Header | Blogspot | Cara Membagi Dua Kolom Header setelah postingan terdahulu Cara Membuat Custom Header di Blogspot, kali ini saya akan membahasa Cara Membagi Dua Kolom Header, banyak yang memanfaatkan kolom header sebagai tempat memasang iklan, karena lebih mudah terlihat oleh pengunjung. 
Anda perlu tahu bahwa desain template itu sangat komplek dan menggunakan banyak teknik, 
Maka cobalah teknik ini di blog uji coba anda, jangan di blog utama anda. Download dulu template yang SEO friendly disini. Langsung Saja.......
  1. Seperti biasa login ke blogger >> Klik rancangan >> Klik tab elemen Halaman >> Klik tab Edit HTML cari kode seperti ini atau yang hampir mirip : (tekan F3 atau untuk bantuan mencari)

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://stzuriah.blogspot.com/2013/04/cara-membagi-dua-kolom-header.html) 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;
}

2. Ganti dengan kode di bawah ini.


/* Header
===================================

*/


#header-wrapper {

width:900px;

margin:0 auto 0px;

background:$bgheadercolor url(http://stzuriah.blogspot.com/2013/04/cara-membagi-dua-kolom-header.html) 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;

}


3. Traik Scrool kebawah cari lagi kode 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='Test Blog (Header)' type='Header'/>

</b:section>

</div>

4. 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>
 
5. Save, lalu lihat hasilnya.......
Semoga bermanfaat....... 
Read More : http://stzuriah.blogspot.com/2013/04/cara-membagi-dua-kolom-header.html

  • Blogger Comments
  • Facebook Comments
Item Reviewed: Cara Membagi Dua Kolom Header Rating: 5 Reviewed By: stzuriah.blogger.com