Cara membuat header blog jadi 2 kolom | ninosaji bloggers akan mengajak pembaca untuk belajar tutorial blogspot. Beberapa waktu yang lalu saya sempat mengganti template blog ini memilih template blog lebih simple dan sedikit seo friendly agar cepat terindeks google. namum ketika saya coba buat header-nya menjadi 2 kolom ternyata Cara membuat header blog jadi 2 kolom part 1 tidak berhasil di terapkan..
Akhirnya saya blogwalking dan ketemu solusinya hingga blog ini bisa memiliki 2 kolom header.
yang membuat saya memposting artikel ini, siapa tau blog anda memiliki template yang serupa dengan blog ini dan ingin membuat headernya jadi 2 kolom, dan tentunya ini menjadi tutorial yang cukup bermanfaat ..!
Dan berikut tahap-tahap pembuatannya :
1. Login Blogger
2. Pilih Tabs "Rancangan" -> Pilih "Edit HTML" -> Cek "Expand Template Widget"
3. Cari kode #header-wrapper {
Selengkapnya lihat dibawah ini
#header-wrapper {
width:970px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:970px;
text-align:left;
margin:0;
padding:0;
}4. Buatlah kode CSS di atas menjadi seperti di bawah ini
#header-wrapper {
width:970px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:350px;
text-align:left;
margin:0;
padding:0;
float:left;
}
#header2 {
width:350px;
text-align:left;
margin-top:20px;
padding:0;
float:right;
}Perhatian :
- Kode warna Merah dan Hijau adalah kode tambahan dari kode no.3.
5. Setelah itu Cari kode <div id='header-wrapper'>
Selengkapnya lihat di bawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Situseo Blog (Header)' type='Header'/>
</b:section>
</div>
6. Buatlah kode CSS di atas menjadi seperti di bawah ini
<div id='header-wrapper'>
<div id='header'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Dangstars Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='header2'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
Perhatian :
- Kode warna Merah dan Hijau adalah kode tambahan dari kode no.6.
7. Klik "Simpan Template"
8. Selesai
Untuk lihat hasilnya anda bisa cek di Tab Menu "Tata Letak" bagian Header
Sekian tips dari saya ini semoga bermanfaat bagi anda semua ..!!
Description : Cara membuat header blog jadi 2 kolom | ninosaji bloggers akan mengajak pembaca untuk belajar tutorial blogspot . Beberapa waktu yang lalu ...
