Pengikut

16 Februari 2007

Blogger : Add Header to New Blogger

Hot request.

"kl mis.nya aku mo naro gambar di headerku gmn ya? dah pernah dibahas ya?"
"kang agus supaya di header bisa ada gambarnya gimana?"

Keduanya mewakili keinginan dari beberapa pengunjung yang secara serius menanyakan pemasangan gambar di bagian header. Boleh jadi pertanyaan ini juga mengusik keingintahuan beberapa pengguna blogger lainnya. Tak cukup dengan menulis di shout box, meninggalkan pesan melalui messenger juga digunakan. Memang tak bisa dipungkiri bila salah satu trik yang sangat mudah untuk menyajikan penampilan blog berbeda secara instan yakni memasang header.

Bila jawaban dari pertanyaan serupa pernah diungkap di blogger lama, bagaimana dengan di blogger baru. Terutama yang menggunakan metode xml atau lebih mudahnya menggunakan mode layout (bukan template.) Dengan mode layout ini kita mengenal adanya fitur widget. Dari sinilah pemasangan shout, rss, gambar, teks hingga pengeditan sidebar, header, footer hanya memerlukan teknik drag and drop. Praktis untuk mereka yang alergi bila bertemu dengan kode HTML.

Namun, bila ingin sekali memasang gambar di header, maka anda perlu berkeringat sedikit karena pada bagian intinya kita akan mengedit kode didalamnya. Cukup yakin? bila jawabannya iya maka bisa kita teruskan membacanya. Tak lupa untuk menyimpan cadangan (back up) sebelum kita melakukan penyutingan. Hingga bila terjadi sesuatu kita masih bisa kembali ke kode sebelumnya. Masih cukup aman kan?

Langkah 1. Buka layout.
Setelah memasuki dasbor, klik tautan layout pada blog yang ingin disunting. Lalu tujulah Template. Bila di halaman ini muncul 'Add A Page Elements', langsung saja melompat ke langkah ke-3. Bila tidak maka tuju Edit HTML. Berhenti sejenak di bagian ini. Lihat ada pilihan expand widgets template disana, coba centang kotak di sebelahnya dan tunggu beberapa saat.

Langkah 2. Edit layout.
Ini bagian rumitnya. Untuk memudahkannya, edittag sengaja mengambil salah satu layout bawaan blogger yakni Harbor dari minima.com. Dengan kode dari sini semoga bisa menjadi acuan untuk diterapkan di layout yang serupa. Cari kode berikut :

<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='kupakai (Header)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>

Nah perhatikan angka 1 di baris pertama. Ganti menjadi angka 2, atau lengkapnya akan menjadi :

<b:section class='header' id='header' maxwidgets='2'>
<b:widget id='Header1' locked='true' title='kupakai (Header)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>

Setelah itu save template.

Selesai? ok lanjut ...

Langkah 3. Klik page elements (sebaris dengan keberadaan Edit HTML pada menu Template)
Klik Add a Page Elements di bagian Header.Mungkin ada banyak tautan Page Elements di sini. Fokuskan hanya dibagian header. Lalu klik add a page elements di bagian header, hingga dimunculkan pop-up window.
Dari sini pilih Picture yang posisinya berada di barisan kiri kedua dari atas, lalu klikadd to blog. Isi formnya, (tak perlu semua kolom, yang penting upload gambar terisi) tunggu sebentar hingga calon gambar header dimunculkan, lalu tutup dengan .

Langkah 4. View Blog.
Lihat hasilnya....picture header muncul disana.

Asyiknya pula bila merasa ukuran gambar untuk header terlalu lebar atau sebaliknya terlalu kecil, gambar tadi bisa diganti dengan yang lain. Masuk ke Page elements pada menu template dan edit tautan picture disana.

Selamat mencoba.

Contoh hasil penerapan bisa dilihat di http://betapakai.blogspot.com/

Tag : blogger gambar header, edit header blogger, trik memasang header.
Add to Technorati Favorites