Setelah sebelumnya saya memuat artikel tentang Cara membuat header menjadi 2 kolom, kali ini saya akan memuat artikel serupa namun dengan kode HTML yang berbeda. Karena saya tahu tidak semua template memilki kode HTML yang sama, terutama untuk template baru yang cenderung sedikit rumit penempatan kode HTMLnya.
Lalu bagaimana Cara membuat header menjadi 2 kolom versi yang ini? Langsung saja akan saya jelaskan:
Cara Membagi Header Menjadi 2 Kolom Bag 2:
- Login ke akun Blogger
- Pilih Template >> Edit HTML
- Lalu cari kode header bawaan Template, kira-kira kode HTML nya mirip seperti di bawah ini:
- Ganti semua kode tersebut dengan kode berikut:
- Kemudian cari kode yang mirip dengan kode berikut ini:
- Tambahkan kode berikut ini setelahnya:
- Simpan Template. Lalu cek Tata Letak untuk memastikan muncul elemen baru di samping header.
.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 154px; /* 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;}
<div class='region-inner header-inner'>
<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>sehingga hasilnya akan menjadi seperti ini:
<div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
Cara Membagi header menjadi 2 kolom (2)
4/
5
Oleh
Bonita Benz