Cara Membagi Header Menjadi 2 Kolom

Membuat 2 kolom header biasanya adalah salah satu hal pertama yang saya lakukan saat membuat blog baru, header tambahan tersebut seringkali dipakai untuk menyimpan iklan, menu share social media, dan lainnya. Untuk anda yang sedang mencari cara membagi header menjadi 2 kolom, semoga tutorial saya kali ini bisa membantu anda.

Cara membuat 2 kolom header

Untuk membagi header menjadi 2 kolom, silahkan anda menuju ke menu rancangan dan edit HTML template blog anda. Saya sarankan anda untuk mem-back up template anda terlebih dahulu untuk berjaga-jaga.

Setelah menambahkan centang pada expand template widget, silahkan anda cari kode seperti berikut:
(untuk memudahkan, gunakan ctrl + F)

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

Untuk memudahkan, anda bisa fokus pada markah .header-outer

Setelah menemukan kode seperti di atas, block kode tersebut kemudian hapus dan ganti dengan kode berikut

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
 _background-image: none;min-height: 160px; } 

Perhatikan bahwa pada kode baru yang kita buat, saya menambahkan  min-height: 160px; dengan begitu tinggi minimal yang akan tampil di header anda adalah sebesar 160px, anda bisa membuatnya lebih tinggi atau lebih rendah sesuai selera anda.

Dibawah kode yang telah anda tambahkan tadi, kemudian tambahkan kembali kode berikut,

#header {
width: 45%;
margin-right: 10px;float: left; }

Kode yang kita tambahkan tersebut adalah pengaturan untuk header sebelah kiri, yang dapat anda rubah adalah ukuran width nya, di kode tersebut saya membuat ukuran width header kiri sebesar 45%.
Sekarang saatnya untuk menambahkan header baru di sebelah kanan yang akan kita namai header baru.
tambahkan kode berikut di bawah kode di atas.

#tsa-headerbaru {
float: right;
width: 47%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#tsa-headerbaru {margin: 3px;}

Perhatikan bahwa dalam kode di atas saya mengatur lebar header baru tersebut sebesar 47% dengan begitu jika dua header tersebut ditambahkan, kita masih memiliki sisa 8% ruang antar header.

Menambahkan header baru

Setelah mengatur style untuk kolom header baru, saatnya kita menampilkan header baru tersebut.
Silahkan anda cari kode berikut:

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

Setelah anda temukan kode di atas, silahkan anda tambahkan markah berikut setelah kode di atas,

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

Ingin mengubah kode tersebut? coba menambahkan pada maxwidget menjadi 2 atau 3, dengan begitu anda bisa menampilkan dua atau tiga widget berbeda berjejer ke bawah di bagian header baru sebelah kanan.

Setelah selesai, simpan dan tutup template anda.

2 kolom header

Setelah melakukan modifikasi pada template anda, silahkan menuju ke menu tata letak di blog anda, jika anda menemukan header anda terbagi dua di sebelah kiri dan kanan seperti gambar berikut :

Selamat, anda telah membagi header menjadi 2 kolom.
Semoga bermanfaat.

Artikel Cara Membagi Header Menjadi 2 Kolom ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh Unknown
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;