Assalamualaikum. Selamat malam sobat Blogger Trix - Apa kabar semua ?. Nah hari ini saya mau posting sebuah tips yang bermanfaat mungkin untuk yang ingin meletakkan iklan di samping header. Mungkin sudah banyak blog-blog lain yang memposting tips membuat kolom widget
disamping header. Tapi tidak ada salahnya saya posting ulang sesuai dengan tulisan saya :D. Kalau mau lihat demonya, lihat aja tuh di samping header blog saya. Kira-kira seperti itulah yang akan kita buat sobat. Atau sobat bisa lihat gambar di bawah ini.
Sebenarnya setiap blog memiliki kode CSS yang berbeda. Itulah satu kesulitannya. Mungkin jika sobat ingin mencontohkan kode CSS header saya tidak masalah. berikut langkah-langkahnya.
Cara membuat kolom widget disamping header :
- Login ke blog anda, dan langsung ke edit template
- Jangan lupa mendownload semua kode blog anda terlebih dahulu
- Kemudian cari kode berikut #header
- Cek apakah kode CSS #header sobat sama dengan yang di bawah
#header{
width: 510px;
position: relative;
float:left;
height: 180px;
background: #fff;
overflow: hidden;
border-bottom: 1px solid #ddd;
}
#header{ width: 510px; position: relative; float:left; height: 180px; background: #fff; overflow: hidden; border-bottom: 1px solid #ddd; }
Jika sama ikuti langkah berikutnya, jika tidak hapus kode #header anda dan ganti dengan kode di atas.
kemudian tambahkan kode di bawah ini dibawah kode #header di atas
#header2{float:right;width: 510px; position: relative;height: 180px; background: #fff; overflow: hidden; border-bottom: 1px solid #ddd; }
<div id="header"> atau <div id="header-wrapper"> atau <div id="header-inner">
- Kemudian ganti salah satu kode CSS yang sesuai dengan kode CSS anda tersebut dengan kode di bawah ini
<div id='header'>
<b:section class='blognames' id='blognames' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Easy To Tips (Header)' type='Header'/></b:section></div>
<div id='header2'>
<b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'><b:widget id='HTML3' locked='false' title='' type='HTML'/></b:section></div>
- Setelah itu klik pratinjau, jika berhasil simpan template anda. Jika tidak berarti kode CSS #header kita berbeda :)
Sumber
Demikianlah ulasan saya mengenai tips
membuat kolom widget disamping header. Semoga artikel ini bermanfaat bagi kita semua. Assalamualaikum.
Judul : Membuat Kolom Widget Di Samping Header
Deskripsi : Assalamualaikum. Selamat malam sobat Blogger Trix - Apa kabar semua ?. Nah hari ini saya mau posting sebuah tips yang bermanfaat mungkin unt...