Cara membagi header menjadi 2 kolom

Untuk membuat 2 kolom header biasanya dipergunakan untuk menyimpan iklan, menu share social media, dan lainnya sehingga tampilan blog menjadi lebih gagah, jika ingin membuat dan menambahkan 2 kolom header silahkan ikuti cara dibawah ini dan semoga tutorial saya kali ini bisa membantu keinginannya kawan :

1. Sign in di blogger
2. Klik Opsi lainnya
3. Klik Templete
4. klik Edit HTML
5. Centang tulisan Expand Widget Templates
6. Cari Kode CSS .header-outer (gunakan tombol CTRL + F untuk mempermudahkan pencarian kode)


.header-outer {
 background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;} 


7. Setelah menemukan kode seperti di atas, block kode tersebut kemudian hapus 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: 160px;
} 
#header {
width: 45%;
margin-right: 10px;float: left;
}
#tsa-headerbaru {
float: right;
width: 47%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#tsa-headerbaru {margin: 3px;
}


Keterangan


1. min-height: 160px; = Tinggi tampil di header anda adalah sebesar 160px, ganti sesuai selera
2. width: 47% = Lebar Header kanan atau yang baru ditambahkan dan ada 8% ruang antar header.
3. width: 45%;. = Lebar Header kiri


8. Setelah mengatur kode CSS tersebut diatas selanjutnya cari kode dibawah ini:


<div class="region-inner header-inner">


9. Setelah anda temukan kode  <div class="region-inner header-inner"> tempatkan kode dibawah ini diatas kode tersebut diatas


<b:section class="tsa-headerbaru" id="tsa-headerbaru" maxwidgets="1" showaddelement="yes"></b:section>



10. Setelah selesai, simpan dan tutup template


Selamat mencoba

Baca juga artikel menarik lainnya :