Membagi Header Blogger Menjadi Dua Kolom
Pendidikan

Membagi Header Blogger Menjadi Dua Kolom

Membagi Header Blogger Menjadi Dua Kolom

Membagi Header Blogger Menjadi Dua Kolom
Membagi Header Blogger Menjadi Dua Kolom

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.

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.

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.

Sumber : https://www.givology.org/~danuaji/blog/696982/