Cara Membuat Header Menjadi 2 Kolom

Assalammualaikum sobat KuPas, kali ini KuPas mau kasi Tips Cara Membuat Header Menjadi 2 Kolom. Dengan membuat header blog sobat menjadi 2 kolom, sobat bisa meletakkan banner di samping logo blog sobat. Mau tahu cara membuatnya?

• Login ke Akun blog sobat
• Klik Layout
• Klik Elemen Halaman
• Terus Klik Edit HTML
• Cari kode CSS 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;
}

• Tidak sama persis tidak masalah, yang penting  Bagian Header 
• Kalau sudah ketemu hapus kode tersebut, lalu ganti dengan kode 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;
}

• Untuk lebar header bisa sobat oprek sendiri sesuai template sobat  
• Kemudian cari kode dibawah 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 tersebut, 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>

•  Save

Demikian Tips singkat tentang Cara Membuat Header Menjadi 2 Kolom. Semoga tips ini dapat bermanfaat

Anda sedang membaca artikel tentang Cara Membuat Header Menjadi 2 Kolom dan anda bisa menemukan artikel Cara Membuat Header Menjadi 2 Kolom ini dengan url https://kuntil-lepas.blogspot.com/2012/04/cara-membuat-header-menjadi-2-kolom.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Header Menjadi 2 Kolom ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat Header Menjadi 2 Kolom sumbernya.

Disclaimer : Artikel, atau apapun yang ada di blog ini kadang-kala berasal dari berbagai sumber media lain, dan Hak Cipta sepenuhnya dipegang oleh sumber lain tersebut. Jika kami salah dalam menentukan sumber yang asli, kami mohon maaf dan beritahu kami -di sini-

---

Posted in: Tips Dan Trick

---

Related posts with thumbnail