Menambahkan Kolom Widget Didalam Header Judul Blog

Senin, 10 Februari 20140 komentar

Menambahkan Kolom Widget di dalam Header Judul Blog, Tutorial kali ini 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 ini :

kotak search


Perhatikan gambar yang saya beri kotak panah, didalamnya terdapat dua 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". Dalam header terdapat dua kolom

Itulah kurang lebihnya  Menambahkan Kolom Widget Didalam Header Judul Blog. Terima kasih untuk kunjungannya. Semoga bermanfaat.

Share this article :

Posting Komentar

 
Tanggal: 16 | Maret | 2014
Copyright © 2014. Satu Nusa Satu Bangsa Satu Bahasa - All Rights Reserved
Hari Minggu
Proudly powered by Blogger