Best View with Mozila Firefox

Wednesday, 11 March 2009

Menambahkan Widget pada Header Blog

Template blogger gratis yang banyak tersedia di internet kadang tidak memiliki pilihan untuk menambah widget dibagian atas dibawah header. Hal ini sebenarnya disebabkan ada pembatasan pada perintah XML yang dibuat oleh si pembuat template tersebut. Alasan dibatasi ini mungkin agar tampilan template sesuai dengan keinginan pembuatnya.

Hanya saja kita kadang ingin menambahkan widget dibagian atas, bisa untuk memasang link adsense atau menambah menu model horizontal. Karena batasan pembuat Blog tersebut kita tidak dapat melakukannya.

Dalam belajar ngeblog jangan mudah putus asa, dalam mengatasi masalah ini tidak perlu ganti template, karena mungkin template yang anda gunakan saat ini adalah template kesayangan anda. Untuk menambahkannya hanya memerlukan langkah mudah dibawah ini:

Pada edit HTML, cari kode dibawah ini:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
</b:section>

Sedikit saya jelaskan mengenai perintah XML yang value-nya saya warnai merah diatas.
maxwidgets : Jumlah maksimal dari widget dibagian "section" tersebut, dalam hal ini adalah section atau bagian header.
showaddelement :Pada elemen halaman biasanya pada tiap "section" ada pilihan "tambah widget". Perintah ini untuk mengatur apakah penambahan widget pada section tersebut diperbolehkan atau tidak.
locked :Mengatur apakah widget dikunci atau tidak. Jika dikunci maka widget tidak dapat dipindah dengan cara "drag and drop", dan biasanya tampilannya akan lain dengan widget biasa. Jika tidak dikunci maka sebaliknya.

Saya rasa penjelasannya sudah cukup jelas, dan kembali pada cara menambah widget header, silahkan anda ganti kode diatas sesuai keinginan anda. Misalnya seperti dibawah ini:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>
</b:section>

Jumlah maxwidgets bisa anda atur sesuai keinginan, atau jika ingin tanpa pengaturan sama sekali hapus saja perintah pengaturannya seperti dibawah ini:

<b:section class='header' id='header'>
<b:widget id='Header1' title='your blog title (Header)' type='Header'/>
</b:section>

Untuk melihat apakah efek perubahan kode silahkan menuju elemen halaman dan lihat apakah pada bagian header sudah bisa ditambahkan widget baru.

Untuk template Classic cari kode di bawah ini:

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>

pindah kedo berwarna merah di bawah body tepat seperti kode dibawah ini

<body>
<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>

<div id='outer-wrapper'><div id='wrap2'>


<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

Cari Kode CSS di bawah ini:

#header-wrapper {
width:880px;
height:100px;
margin-bottom:2px;
padding-bottom:15px;
background:#FFFFFF;
border:1px solid #E0E0E0;

Nah ganti tulisan 880px yang berwarna merah diatas dengan 100%. Dan silahkan otak-atik CSS diatas sesuai bentuk yang Anda inginkan.

Nah selesai deh kemudian save.

HTML diatas berdasarkan template minima default blogspot. berhubung semua template tidak sama HTML-Nya silahkan kamu sesuaikan menurut template kamu sendiri. Silahkan berexperimen sendiri sobat semoga berhasil.




sumber :
http://www.ateonsoft.com/2009/02/cara-menambah-widget-header-pada.html
http://tutorial-jitu.blogspot.com/2008/10/membuat-header-penuh-dengan-body.html


2 comments:

  1. Pertamax...
    Artikel yang mantep banget, jadi agak beda dengan yang ada di http://www.ateonsoft.com/2009/02/cara-menambah-widget-header-pada.html

    ReplyDelete
  2. makasih infonya gan.. langsung praktek nih...

    ReplyDelete