Cara Membagi Dua Kolom Header

Anda disini » Home » Blogspot , Header » Cara Membagi Dua Kolom Header

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

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://membuatwebsite-pemula.blogspot.com/2012/11/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://membuatwebsite-pemula.blogspot.com/2012/11/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.......

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Anda sedang membaca artikel tentang Cara Membagi Dua Kolom Header. Oleh Chep, Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

<a href="http://membuatwebsite-pemula.blogspot.com/2012/11/cara-membagi-dua-kolom-header.html" target="_blank">Cara Membagi Dua Kolom Header</a>

:: Get this widget ! ::

2 komentar:

KING HERBAL said...: Mksh info'x gan sangat membantu sekali.; April 4, 2013 at 2:04 AM
Anonymous said...: nanti di coba deh membagi sedebar menjadi 2 kolom; October 27, 2014 at 5:56 PM