Untuk membagi dua kolom header dapat dilakukan dengan mengikuti langkah-langkah sebagai berikut: 1. Login ke blogger dengan ID anda dong tentunya, jangan ID saya..ntar blog saya jadi berantakan lagi.
2. Klik Layout.
3. Klik tab elemen Halaman, maka anda akan melihat tampilan format kolom header anda seperti ini :
page element
4. Jika sudah di lihat, kemudian 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;
}
5. 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;
}
6. Coba scroll ke bagian bawah, dan temukan kode seperti ini :
7. Hapus kode di atas, lalu ganti dengan kode di bawah ini :
8. Klik tombol Simpan Perubahan.
9. Selesai.
Untuk melihat hasilnya, silahkan anda klik lagi tab Elemen Halaman dan anda akan melihat format kolom header anda menjadi seperti ini :
new page element
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.
Ya udah, cukup..cukup..dan cukup... soalnya jari saya sudah mulai pegal-pegal gara-gara ngetik mulu dari tadi... sampai ketemu lagi deh pada tutorial berikutnya.
2. Klik Layout.
3. Klik tab elemen Halaman, maka anda akan melihat tampilan format kolom header anda seperti ini :
page element
4. Jika sudah di lihat, kemudian 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;
}
5. 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;
}
6. Coba scroll ke bagian bawah, dan temukan kode seperti ini :
7. Hapus kode di atas, lalu ganti dengan kode di bawah ini :
8. Klik tombol Simpan Perubahan.
9. Selesai.
Untuk melihat hasilnya, silahkan anda klik lagi tab Elemen Halaman dan anda akan melihat format kolom header anda menjadi seperti ini :
new page element
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.
Ya udah, cukup..cukup..dan cukup... soalnya jari saya sudah mulai pegal-pegal gara-gara ngetik mulu dari tadi... sampai ketemu lagi deh pada tutorial berikutnya.
0 comments:
Post a Comment