Pada template standar dari blogger biasanya header blog kita hanya berupa 1 buah kolom header, tapi ketika kita berkunjung ke blog teman - teman yang lain terdapat 2 sampai 3 kolom header
..
Bagaimana cara membuatnya..
Oleh karena itu kali ini kita akan membahas bagaimana Cara membuat header menjadi 2 kolom yang berada di kiri dan kanan, dimana kolom header yang ada di sebelah kanan bisa kita manfaatkan untuk menaruh banner iklan atau apa saja..
Tanpa harus saya jelaskan panjang lebar lagi berikut cara membuat header menjadi 2 kolom
Berikut langkah-langkahnya:
1. Login ke blog sobat
2. Klik Rancangan
3. Klik Edit HTML
4. Jangan lupa centang Expand Template Widget
5. Cari kode css yang mirip kode di bawah ini
*/
#header-wrapper {
width:960px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:180px;
}
#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
Hapus kode tersebut dan ganti kode dibawah ini
===================================
*/
#header-wrapper {
width:960px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:180px;
}
#head-inner {
width:480px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:#FFFFFF;
}
#r_head {
width:480px;
float:left;
padding-top:10px;
}
6. Kemudian cari kode seperti di bawah ini
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' Blog (Header)' type='Header'/>
</b:section>
</div>
Hapus kode teesebut, kemudian ganti dengan kode di bawah ini :
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
7. Klik Simpan, Selesai..
Baca Lainnya..
- Menyembunyikan Shoutmix ChatBox (ChatBox Hidden) Di Kiri dan Di Kanan blog
- Membuat Readmore Otomatis
- Membuat Artikel Terkait dengan Gambar
- Membuat Artikel Terkait (Related Post) dalam Bentuk Scroll
- Postingan Blog Otomatis Ke Twitter dan Facebook
- Cara Meningkatkan PageRank dan Memperbanyak Link di Alexa
- Menampilkan judul postingan pada label
- Menghilangkan judul dan deskripsi blog
- Menghilangkan tulisan Berlangganan Entri Atom
0 comments:
Posting Komentar