Menambahkan Widget Didalam Header (Judul) Blog


Tutorial kali ini masih membahas tentang desain Blog. yaitu cara untuk menambahkan widget didalam header blog. sebenarnya kurang tepat dah kalo memberikan judul seperti diatas, karena emang nyatanya widget tidak berada didalam header melainkan disamping header (judul) Blog, malah para blogger senior biasa menyebutnya membuat header Blog menjadi dua kolom. lantas kenapa saya masih memberikan judul artikelnya seperti diatas? jawabanya karena waktu saya menggunakan search engine, kata itu lah yang saya ketikkan untuk mencari artikel yang dimaksud (namanya juga amatir). jadi saya putuskan untuk memberikan judul artikel ini sama seperti kala saya mencarinya di search engine (biar kita amatiran bareng). kalau kita menggunakan template bawaan dari Blogger tentunya header akan terlihat memanjang horizontal dibawah navbar. kayanya terlalu standar apalagi untuk anda yang menginginkan Blognya terlihat penuh. widget disamping header ini biasanya digunakan untuk memasang iklan. terus gimana sih bentuknya? lihat nih gambar dibawah,
header blog dua kolom

Perhatikan gambar yang saya beri kotak berwarna biru, didalamnya terdapat dua kotak yang saya beri garis tepi berwarna merah, kotak yang sebelah kiri merupakan header (judul) Blog, sedangkan kotak yang sebelah kanan merupakan header ke dua dan merupakan tempat untuk menambahkan widget baru. Sekarang, jika anda tertarik untuk membuat Blog anda seperti pada gambar diatas, kalian hanya perlu mengikuti tutorial yang ada dibawah ini,

Langkah-langkah membuat header blog menjadi dua kolom,
  • Login ke akun Blog masing-masing.
  • Pilih menu "Template".
  • Klik "Edit HTML".
  • Centang "Expand Template Widget".
  • Cari kode dibawah, (ketikkan CTRL+F pada keyboard untuk mempermudah pencarian).
.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}
  • Jika sudah anda temukan hapus kode tersebut, ganti dengan kode dibawah.
.header-outer {background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;_background-image: none;min-height: 120px;}#header {width: 40%;margin-right: 10px;float: left; }#pba_rightheader {float: right;width: 55%;margin: 20px 10px 5px 10px;padding: 2px;}#pba_rightheader .widget {margin: 3px;}
  • Masih pada menu Template >> Edit HTLM >> Centang Expand Template Widget. Sekarang cari kode dibawah,
<div class='region-inner header-inner'>
  • Sudah ketemu kan? lihat kode yang ada dibawah ini, kemudian anda copy dan letakkan setelah kode <div class='region-inner header-inner'>.
<b:section class='pba_rightheader' id='pba_rightheader' maxwidgets='1' showaddelement='yes'></b:section>
  • Jika sudah klik "Simpan template".
  • Sekarang lihat menu "Tata Letak".

Tadaaaaaa...berubah kan? :P

Ok cukup untuk tutorial membuat header kolom menjadi dua bagian.

Terima kasih untuk kunjungannya.
Semoga bermanfaat.

Catatan : Perhatikan scirpt kode yang berwarna biru,
min-height: 120px => merupakan tinggi dari header anda.
width: 40% => Lebar dari header utama/ header yang sebelah kanan.
width: 55% => Lebar Widget/ Header yang ada disebelah kiri.
Silakan sesuaikan dengan template anda.

No comments:

Post a Comment