Berikut ini adalah tutorial untuk cara membuat header 1 kolom menjadi 2 kolom untuk template baru blogger, seperti yang kita lihat pada gambar dibawah ini . Header sebelah kiri adalah header utama yang dipotong sedangkan header yang kanan adalah header potongan dari header utama.
Pada tutorial ini dibawah header masih tetap dapat ditambahkan gadget.
Mari langsung kita ketahap-tahap pembuatannya.
1. Masuk ke dashboard -> Desain-> Edit HTML
2. Klik pada "Expand Template Widget"
3. cari kode dibawah ini (CTRL+F)
Silahkan dihapus dan diganti dengan kode dibawah ini.
Mari langsung kita ketahap-tahap pembuatannya.
1. Masuk ke dashboard -> Desain-> Edit HTML
2. Klik pada "Expand Template Widget"
3. cari kode dibawah ini (CTRL+F)
.header-outer {
......
}
......
}
Silahkan dihapus dan diganti dengan kode dibawah ini.
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
min-height: 154px; /* untuk mengatur tinggi header (height) */
}
.header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;
float: left;
}
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
min-height: 154px; /* untuk mengatur tinggi header (height) */
}
.header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;
float: left;
}
.headerkanan {
float: right;
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;
padding: 2px;
}
.headerkanan .widget {
margin: 3px;
}
margin: 3px;
}
4. lalu cari kode dibawah in
Tambahkan kode dibawah ini dibawah kode diatas:
<div class='region-inner header-inner'>
Tambahkan kode dibawah ini dibawah kode diatas:
<b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'>
</b:section>
</b:section>
Ket: Untuk yang bercetak merah angka nya bisa anda bisa ganti dengan angka 2,3,4 atau lain nya..maksud nya untuk susunan kolom kebawah.
5. Lalu simpan dan lihat hasilnya.
Demikian tutorial untuk Cara Membuat Header Menjadi Dua Kolom untuk templete Baru semoga behasil,, ^_^
0 komentar:
Posting Komentar