Trik Membuat Dropdown Label

kampanye damai pemilu indonesia 2009 easy blog trick kali ini akan memberikan trik untuk membuat Dropdown Label.

Sebelum membahas lebih jauh, Ayas mau berterima kasih kepada teman saya 3ndur0 yang ada di http://www.enduro-indra.blogspot.com karena dah memberi ide untuk membuat postingan tentang tips dan trik membuat Dropdown Label ini. Thanks Bro!

Trik kali ini melibatkan 2 unsur (kaya film silat aja), yaitu Label dan Menu Dropdown. Jadi, disini kita akan membuat widget Label dengan fungsi Dropdown Menu.

Keuntungan menggunakan Dropdown Label adalah kita dapat menghemat tempat, seandainya label Sodara dah minta ampun buanyaknya.

Untuk contohnya, bisa Sodara lihat di Sidebar Ayas pada 'Label Dropdown'.

Tertarik membuat Dropdown Label seperti ini? Yuk kita pelajari bersama...


Label, tentunya teman2 sudah banyak yang tahu, karena label sudah sangat umum dipakai. Cara membuat label adalah pada menu 'Add Widget' kemudian pilih 'add label'. Atau baca tentang cara membuat label, ada disini. Ayas sendiri sudah pernah beberapa kali memberikan Trik Customize Label, seperti yang ada disini, disini dan disini. Hohoho9 dah 3x lo...

Sedangkan Dropdown Menu adalah menu yang berjajar kebawah, tetapi hanya akan muncul jika kita meng-klik tanda panah kecil di sampingnya. Pokoknya gitu lah, hehehe9

Sekarang mari kita mulai trik nya.

Pertama, pastikan Sodara sudah menggunakan Label di blog Sodara. Klo belum, silahkan buat :

-Pilih 'Add Widget'
-Pilih 'Label'
-Beri nama dengan 'Dropdown Label', untuk mempermudah mempraktekkan trik ini.

Kemudian, beralih pada menu 'Edit HTML'. Download dulu tempale Sodara y, demi keamanan.

Centang pada 'Expand Template Widget'

Kemudian cari kode label Sodara. Cara yang paling mudah adalah dengan Ctrl+F, kemudian ketik nama label Sodara, misalnya 'Dropdown Label'.

Maka, akan ketemu kode-kode seperti ini :


<b:widget id='Label1' locked='false' title='Dropdown Label' type='Label'>
<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>
</b:if>

<div class='widget-content'>

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>



Itu adalah deretan kode untuk Label Sodara. Tidak usah bingung. Cukup perhatikan Kode yang berwarna Merah.

Klo dah ketemu, silahkan GANTI kode berwarna merah itu dengan kode ini:


<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Pilih Berdasarkan Label</option>
<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/></option>
</b:loop>
</select>



Kemudian Simpen, lalu preview. Insya Allah jadi deh Dropdown Label nya.....

Gimana? Dijamin sekarang label Sodara akan lain dari pada yang lain, dan tentunya, menghemat tempat!!

Simple tapi berguna kan? GAMPANG KOK!!!

11 comments:

  1. berkunjung balik,nitip komentar ae lah.....wakakakaka

    ReplyDelete
  2. Seeppppp... thx sob lsg ditanggepin tuh pertanyaan aku... disave, dipelajari n ntar dipraktekin...
    Hohoho... PR-y masih satu tuh, cara buat sub menu untuk horisontal navigator... juga perlu di buat tu..

    ReplyDelete
  3. Wah, dapet juga nih tips2 buat modif blogspot.
    langsung langganan feed, via google reader.
    bakal sering mampir nih Mas... kek nya akan ada banyak trik menarik dan berguna disini :)

    ReplyDelete
  4. Saya mau Dropdown menu (navigasi) tulung ya, yang esay... ^_^

    ReplyDelete
  5. sangat membantu dalam mengitak-atik blog.makasih....

    ReplyDelete
  6. nah.. kalo pengen buat Blogroll yg dropdown gimana brader..??
    apa sama kaya script diatas..??
    kalo ada yang perlu di edit yang sebelah mana ?
    mohon pencerahannya..

    ReplyDelete

Klo ada pertanyaan, masukan ato tips yang lebih mudah, koment aja y..Insya Allah Ayas bales.. Thanks all..moga2 bermanfaat

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz