Template bawaan Blogspot hanya memiliki satu kolom header. mungkin kita merasa kurang puas dan ingin membagi kolomnya menjadi dua bagian.Caranya tidak begitu sulit,mnambahdan merubah sedikit codenya saja,dibawah ini langkah-langkah Cara membagi Header Template Menjadi 2 Kolom :
1 . Masuk ke akun Blogger anda >>Klik Rancangan >> Klik Edit HTML,jngan lupa Centang Expand
Template Widget
2 . Cari code yang mirip seperti code dibawah ini ,untuk memudahkan pencarian gunakan Ctrl + F.
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}
3 . Kalau sudah ketemu hapus dan ganti dengan kode di bawah ini:
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 145px; /* untuk mengatur tinggi header (height) */
}
#header {
width: 45%; /* untuk mengatur lebar header kiri – title, description, image */
margin-right: 10px;float: left;
}
#bgsGR_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;
}
#bgsGR_headerkanan .widget {margin: 3px;}
}
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 145px; /* untuk mengatur tinggi header (height) */
}
#header {
width: 45%; /* untuk mengatur lebar header kiri – title, description, image */
margin-right: 10px;float: left;
}
#bgsGR_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;
}
#bgsGR_headerkanan .widget {margin: 3px;}
}
4 . Setelah itu cari kode seperti ini:
<div class='region-inner header-inner'>
5 . Tambahkan kode berikut dibawahnya:
<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
jika sobat blogger ingin menambah lagi susunan kolom kebawah (tambah gadget), maka tulisan yang berwarna biru, angkanya bisa diganti dengan angka '2'..tetapi agar kedua kolomnya bisa berfungsi sama, anda harus mengganti kode yang satunya lagi, cari lagi kode seperti ini:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Angkanya diganti dengan angka '2' dan 'no' diganti dengan 'yes'
Kedua angka diatas bisa diganti lagi dengan 3, 4 dan seterusnya sesuai jumlah yang kita inginkan.
6 . Kemudia Klik Simpan.
Selamat mencoba semoga berhasil, Salam Blogger : ZONA INFO






0 komentar:
Posting Komentar