Membagi Header Blogger Menjadi Dua Kolom
0
komentar
Saat mengobrak template blog, saya sempat terpikir untuk membagi header blog menjadi dua bagian atau dua kolom. Untuk jelasnya sobat lihat gambar dibawah ini. Pengeditan ini saya lakukan pada template baru blogger.
Kalau sobat juga menggunakan template baru blogger dan ingin header blognya seperti gambar di atas,, caranya seperti langkah dibawah ini..
1. Setelah masuk blogger => Rancangan => Edit HTML.
2. Sebaiknya download dulu template sobat untuk berjaga-jaga, jika terjadi kesalahan dalam pengeditan kita bisa upload templatenya.
3. Centang kotak Expand Template Widget.
4. Cari Kode
5. Cari kode
6. Simpan template dan lihat elemen laman sobat, kalau berhasil akan terlihat seperti dalam gambar tadi.
 |
| Ini adalah gambar header sebelum saya edit. |
 |
| Ini adalah gambar header sesudah saya edit. |
Kalau sobat juga menggunakan template baru blogger dan ingin header blognya seperti gambar di atas,, caranya seperti langkah dibawah ini..
1. Setelah masuk blogger => Rancangan => Edit HTML.
2. Sebaiknya download dulu template sobat untuk berjaga-jaga, jika terjadi kesalahan dalam pengeditan kita bisa upload templatenya.
3. Centang kotak Expand Template Widget.
4. Cari Kode
.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}
Kalo dah ketemu hapus kode diatas dan ganti dengan kode dibawah ini.
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 50px; /* untuk mengatur tinggi header (height) */}
#header {
width: 60%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 39%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px;}
Untuk kode berwarna merah bisa diganti untuk menyesuaikanlebar dan tingginya.background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 50px; /* untuk mengatur tinggi header (height) */}
#header {
width: 60%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 39%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px;}
5. Cari kode
<div class='region-inner header-inner'>
Tambahkan kode berikut setelah kode diatas.
<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
6. Simpan template dan lihat elemen laman sobat, kalau berhasil akan terlihat seperti dalam gambar tadi.
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Membagi Header Blogger Menjadi Dua Kolom
Ditulis oleh Admin
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://chalouiss.blogspot.com/2011/12/membagi-header-blogger-menjadi-2-kolom.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Admin
Rating Blog 5 dari 5
