Cara Membagi Ruang Header

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

Klik :

.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,

Klik :

#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.

Klik :

#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 script berikut setelah kode di atas,

Klik :

<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.

Permak Link

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membagi Ruang Header. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://pasrah123.blogspot.com/2014/01/cara-membagi-ruang-header.html" target="_blank">Cara Membagi Ruang Header</a>

:: Get this widget ! ::

Artikel Terkait

Artikel Lainnya

Title 3

Isi konten 3

Title 4

Isi konten 4

Title 5

Isi konten 5