Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Dropdown Label pada New Blogger

"Gimana cara buat menu dropdown label seperti dropdown archive pada new blogger?" kutipan dari pertanyaan pada email oom.

Pernah terpikirkan mengganti tampilan nama label dengan style dropdown label? tentu saja ya :) karena semakin banyak artikel yang kita tulis tentu semakin banyak pula label atau kategori yang ditambahkan, tidak masalah jika nama label kita cuma 5 atau 10 nama label, lalu bagaimana jika sampai 20 atau lebih sedangkan label dalam standar blogger akan tampil tersusun kebawah dan tentu saja cara standard ini akan  memakan tempat pada halaman blog kita nantinya.


Tidak seperti menu arsip pada blogger yang bisa diset dalam tampilan dropdown, label dalam blogger tidak memiliki fasilitas ini. Jangan khawatir karena para pemikir jenius diluar sana sudah memikirkan hal ini (bukan om lho hihihi :). Sedikit tambahan, sebelum kita menggunakan kode dibawah ini pastikan bahwa element label sudah terpasang pada blog, jika tidak jangan harap menemukan kodenya :)


Contoh tampil menu dropdown label:



Ikuti tutorial dibawah ini untuk membuat dropdown label:

 

(sebelum mencoba jangan lupa backup code dengan menekan link Download Template Lengkap)

Langkah pertama, masuk pada tab template -> Edit Html  -> jangan lupa beri tanda cek pada Expand Template Widget -> kemudian cari kode dibawah ini:

Tips : Agar mudah dalam pencarian sebaiknya cari kode (<data:label.count/>)


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

Jika sudah ketemu ganti seluruh  kode diatas dengan kode dibawah ini:


<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
   <option>Select a label</option>
   <b:loop values='data:labels' var='label'>
      <option expr:value='data:label.url'><data:label.name/>
         (<data:label.count/>)
      </option>
   </b:loop>
</select>

Warna merah <option>Select a label</option> bisa kita ganti dengan kalimat sendiri.


Selamat mencoba, happy blogging with o-om's blog :)

44 komentar:

  1. Anonim5/2/08

    Pertamaaaaax, akhirnya bisa juga jadi yang komentator pertama :)

    BalasHapus
  2. Anonim5/2/08

    om, kayak yang blog parkir juga ya om?caranya sama ya?? :D

    Best Regard
    http://fuadpahing.blogspot.com/>FuadPahing

    BalasHapus
  3. Anonim5/2/08

    second edition..
    komentator kedua..wehehe..
    thakns suhu,ini menarik mau kucoba, dari dulu aku emang males ngurusin label tp kalo pake cara ini ja rapi.terstruktur gitu kaya pascal..:)

    BalasHapus
  4. Anonim5/2/08

    dah..aku coba tipsnya jalan buat salah satu blog-ku...thanks...

    OOT nanya lagi nih scritp-nya gimana bikin random profile kaya punya-mu itu lho "about oom" yg bisa pindah2 sendiri tiap hari, kemarin di header - skrg di side bar - besok di footer kali ya..=)
    di tunggu ya oom script itu..thanks .

    BalasHapus
  5. Anonim5/2/08

    hmm, numpang komentar juga ah ..
    waduh, susah amat..mau nyobain tapi lom ada waktu neh
    ntar aja ah

    BalasHapus
  6. Anonim5/2/08

    wuih:-) da ilmu baru pi yang default punya saya belum keluar e, jadi nahan dulu untuk buat ilmu baru dari om he.. 1 kelar baru yang lain he3 :-)

    BalasHapus
  7. Anonim6/2/08

    >> anonim : pertamax...solar kali ya :)

    >> fuad >> nah om bingung yang mas fuad tanya apa ya :)

    >> free-7 : mas iwan pake tanya segala hehehe ngetes ya :))

    >> nyari duit : kalo ada waktu silahkan dicoba ya.

    >> wahyu : bertahap ya wahyu kalo sudah kelar semua silahkan dicoba ya :)

    BalasHapus
  8. Anonim6/2/08

    >> anonim : pertamax...solar kali ya :)

    >> fuad >> nah om bingung yang mas fuad tanya apa ya :)

    >> free-7 : mas iwan pake tanya segala hehehe ngetes ya :))

    >> nyari duit : kalo ada waktu silahkan dicoba ya.

    >> wahyu : bertahap ya wahyu kalo sudah kelar semua silahkan dicoba ya :)

    BalasHapus
  9. Anonim7/2/08

    Nyoba ah...
    Maap ya om.. lama ngga' koment :)

    BalasHapus
  10. iya nih bams lama gak keliatan kenama aja?

    BalasHapus
  11. Anonim12/2/08

    lagi betulin kompi..mungkin kena viruz :(
    tanya sekalian dah.. Virusnya tuh bikin file EXE jadi kurang kapasitasnya om, so klo dijalain ngg' bisa. Ada spaiwer jg :)
    Kira2 program apa yg bisa ngilangin, soale masih ada tuh..
    Kemarin pake ad-aware ngga' mempan...

    BalasHapus
  12. Anonim15/2/08

    bambs : khan dah banyak antiviru yang bisa di coba mambs :)

    BalasHapus
  13. La om ntar biar artikel kita masuk ke list label itu gimana caranya???
    masi bingung aku...maklum baru belajar ngeblog kemaren sore...

    BalasHapus
  14. salam kenal mas..., baru nemuinnih blog panjenengan...
    mau nanya gimana nih caranya biar label saya bisa rapi seperti contoh diatas..., kok default label saya (www.gudangmodif.com) jaraknya jauh2 mas...

    Matursembah nuwun.

    NB. Comment ini cool banget mas piye yo gawene

    BalasHapus
  15. Anonim19/4/08

    @sekar : khan pejelasannya sudah ada diatas..bisa di pelajari dulu

    @Blietzkrieg : itu tinggal mengatur css nya aja, kalo mau buat koment kaya punya om tinggal pelajari aja di blog ini ada kok caranya :)

    BalasHapus
  16. Anonim15/5/08

    tengkyu oom!

    BalasHapus
  17. Anonim18/5/08

    ada yng tau gak kl buat lebih dari satu catagories,,,,??
    jadi biyar gak acak-acakan gt soalnya saya mau blogging gak cuma satu tema ja..
    mau tentang komputer,pendidikan dsb pokonya>>>>>

    gimana y,,,
    http://info-heri.blogspot.com/
    http://loanvsinsurance.blogspot.com/
    http://www.lyrics-lirik.co.cc/

    BalasHapus
  18. Anonim2/8/08

    Om trus klo mau kasih daftar link temen pakai kaya gitu daftar link nya ditaruh di mana ?


    Thanks

    BalasHapus
  19. om kode data label di code template saya kok nggak ada padahal sudah saya expand widgets template

    BalasHapus
  20. ok om akhirnya bisa juga,,,,,,,,,,,,,,

    makasih atas tutorialnya,,,,,,,,,,

    manteb!!!!!!!!!!

    oh ya trus bagaimana cara mengubah lebarnya agar pas dengan sidebar

    BalasHapus
  21. om kode data label di code template saya kok nggak ada padahal sudah saya expand widgets template

    BalasHapus
  22. Anonim9/9/08

    o-om semua artikel bakal aku posting di blog aku bleh ga...

    BalasHapus
  23. kalo kategori oom kok yg keluar link potingan doank ya???

    sedangkan saya artikel besert tulisan"annya

    minta saran donk

    BalasHapus
  24. semisal gini om, saya maw buat kategori lebih dari satu,seperti ini

    . Browse By Artist
    . A
    . B
    . C
    . Browse By Genre
    . Metal
    . Deathcore
    . Death Metal

    Coba om liat blog saya di http://straighttokill.blogspot.com/

    Labelnya bnyk bgt, dibantu ya om!Bls Ke email sya ya om " ozoresan@gmail.com"

    Thanks!!

    BalasHapus
  25. sembah nuwun mbah agus....pertamaxx solarr premiummm dah

    BalasHapus
  26. udah dicoba Om, berhasil...
    thanx u....

    BalasHapus
  27. makasih bet ommmmmmmmmmm

    BalasHapus
  28. oom saya mo nanya nih, gmana ya di atur agak lebih susut kolomnya, terlalu nabrak dinding web!

    BalasHapus
  29. thanks

    software full serial number
    http://andik-eternal.blogspot.com

    BalasHapus
  30. Maap om...
    Numpang nanya ya?
    Saya pengen buat blog sendiri alias newbie lah!
    Bagaimana jika load pertama hanya posting awal (hanya menampilkan "sedikit" informasi doank!), jika kita ingin memberi komentar atau klik "selanjutnya" barulah isinya panjang lebar + komentar, gitu?!
    Tolong bgt kasih pencerahannya...
    Thx b4...

    BalasHapus
  31. Bagus ya buat ngirit tempat

    BalasHapus
  32. Makasih om, lumayan nich jadi memperingkas labelnya :D

    Regards,
    Ghustie Samosir

    www.hanyainfo.blogspot.com



    Ada bisnis menarik nih. Program bisnis investasi BCA dengan modal cuma Rp. 10.000,-
    Bisa dapetin 3 x lipat atau lebih (lumayan buat beli cendol :D)
    Gabung ya di www.investasibca.com

    BalasHapus
  33. klo mw nampilin kategori/label mirip category punya om d blog ini gimana ya?

    BalasHapus
  34. bagaimana cara membuat dropdown seperti di www.blogmusikku.blogspot.com

    BalasHapus
  35. thanks mas ats artikelnya

    BalasHapus
  36. makasih infonya,segera di coba di blogspotku.newbie nich,butuh belajar.......

    BalasHapus
  37. Anonim19/6/10

    Thanks for o-om.com

    Bner2 maknyus triknya..

    BalasHapus
  38. Anonim30/6/10

    Mantap om
    langsung praktek ah.

    BalasHapus
  39. makasih banget....!!!http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif

    BalasHapus
  40. Oh, ada toh tutornya..
    Hehehe
    katroxx ahh :p

    BalasHapus
  41. thank om tipsnya...

    BalasHapus
  42. terima kasih ya, tipsnya sangat membantu

    BalasHapus
  43. o-om.com benar2 manstap banyak belajar dari blog ini..keep posting gan... :)

    BalasHapus


 

Back to Top