Cara Membagi Header Menjadi 2 Kolom (2)
Setelah sebelumnya saya memuat artikel perihal Cara menciptakan header menjadi 2 kolom, kali ini saya akan memuat artikel serupa namun dengan arahan HTML yang berbeda. Karena saya tahu tidak semua template memilki arahan HTML yang sama, terutama untuk template gres yang cenderung sedikit rumit penempatan arahan HTMLnya.
Cara Membagi Header Menjadi 2 Kolom Bag 2:
- Login ke akun Blogger
- Pilih Template >> Edit HTML
- Lalu cari arahan header bawaan Template, kira-kira arahan HTML nya menyerupai mirip di bawah ini:
- Ganti semua arahan tersebut dengan arahan berikut:
- Kemudian cari arahan yang menyerupai dengan arahan berikut ini:
- Tambahkan arahan berikut ini setelahnya:
- Simpan Template. Lalu cek Tata Letak untuk memastikan muncul elemen gres 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 karenanya akan menjadi menyerupai ini:
<div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
){kind=link}