Sunday, July 8, 2012

Menambahkan Add Gadget pada Header Blog

Tampilan dalam Blogspot pada dasarnya dibagi dalam beberapa bagian, yaitu HeaderBody,Sidebar, dan FooterHeader sendiri biasanya berisi dengan title blog beserta deskripsi singkat dari blog tersebut. Body berisi konten utama dari blog berupa artikel atau posting. Sidebar danFooterberisi komponen tambahan yang isinya bisa diganti-ganti sesuai dengan keinginan. Dalam Blogspot ini sendiri komponen-komponen tersebut biasa disebut dengan Gadget.
Pada template standar Blogspot dari bagian-bagian tersebut, kita bisa menambahkan atau mengurangi Gadget dengan bebas pada bagian Sidebar dan Footer (ditandai dengan adanya fungsi Add Gadget). Untuk Header, kita tidak bisa menambahkan Gadget, karena padaHeadersudah dikunci hanya digunakan untuk menempatkan Title dan deskripsi blog, atau menambahkan image sebagai pengganti Title.
Nah, dalam tulisan kali ini saya ingin kembali memberikan informasi singkat, bagaimana cara menambahkan Gadget pada bagian Header Blogspot, dengan adanya Gadget ini kita bisa menyisipkan atau memasang item lain seperti Script Html, Teks, Gambar tambahan, atauGadget lainnya sesuai keinginan. Trik berikut ini saya buat berdasarkan template standar Blogspot, tapi tidak menutup kemungkinan bisa digunakan pada template lain (diluar template yang telah disediakan oleh Blogspot).
kita akan melakukan perubahan pada bagian Header(saya beri tanda kotak merah). Langkah pertama yang kita lakukan adalah masuk ke Edit Html(sub tab Layout), jangan lupa untuk mencentang Expand Widget Templates. Pada script yang ada silakan cari script seperti dibawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Internet Connection Tutorial (Header)' type='Header'/>
</b:section>
</div>


Langkah berikutnya adalah mengganti item dari maxwidgets, maxwidgets ini sendiri berfungsi menampilkan jumlah widget (Gadget) dalam Header. Sebagai contoh di sini saya isi dengan angka 5 (maxwidgets=’5’), ini berarti kita bisa menambahkan sampai dengan 5 itemGadget pada bagian Header, jika kita ingin menambahkan dalam jumlah yang tidak terbatas, cukup kosongkan saja (maxwidgets=’’). Setelah itu kita ganti item darishowaddelementdengan yes (showaddelement=’yes’), fungsi tag ini adalah memunculkan fungsi Add Gadgetpada Header. Jika sudah maka tampilan scriptnya jadi seperti ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Internet Connection Tutorial (Header)' type='Header'/>
</b:section>
</div>

Setelah itu simpan template tersebut. Jika perubahan script tersbut benar, maka pada bagianPage Element akan berubah dengan munculnya tambahan Add Gadget sama seperti pada bagian Sidebar.
gimana mudahkan....enjoy...

No comments:

Post a Comment