Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Tuesday, July 9, 2013

Cara membuat label drop down di blog

Setelah pada postingan di hari hari yang lalu tentang memodifikasi tampilan label pada kategori/label halaman blog, dalam tutorial kita kali ini saya juga akan mengangkat suatu judul tentang tehnik memodifikasi label dengan sistem DROP DOWN. Fungsi ini sangat berguna buat para teman teman yang memang halaman blognya memiliki banyak label. Bila anda sebagai pemilik halaman blog anda patut mencobanya untuk mempercantik sekaligus dan tidak memakan banyak ruang widget pada halaman blog.
Kinerja dari tutorial saya kali ini adalah label. jadi saya rasa anda harus lebih dulu memasang widget label pada halaman anda, silahkan edit tampilannya agar lebih menarik dilihat para pengunjung halaman anda.Dengan mengedit sedikit kode tag htmlnya, tutorial kali ini akan membuat label blog tampil elegan. Klik DEMO dibawah dan lihat tampilan kategori di siddebar halaman .

Demo


Tutorial


  • Login to blog
  • Pilih " Template " lalu klik " Edit HTML "
  • Cari kode
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

  • Setelah ketemu silahkan gantikan code yang diatas dengan code yang ada dibawah ini. Kemudian save template dan lihat hasilnya.
<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'> <b:if cond='data:title'>
<h2><data:title/></h2> </b:if>
<div class='widget-content'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'> <option>Judul</option>
<b:loop values='data:labels' var='label'> <option expr:value='data:label.url'>
<data:label.name/> (<data:label.count/>) </option> </b:loop> </select></div> </b:includable> </b:widget>

Note

Widget label dalam postingan kali ini digantikan dengan sistem selek drop down, tampilan yang menarik dan tidak memakan banyak tempat untuk label halaman. Untuk mengganti code <b:widget id='Label1' locked='false' title='Labels' type='Label'/> anda harus menggantikan code tersebut sampai batas code </b:widget>. Untuk tulisan warna hijau , silahkan anda ganti dengan judul kategori halaman anda. Code tulisan warna biru berguna untuk menunjukkan berapa banyak artikel dalam sebuah kategori atau biasa disebut dengan counter label. Bila anda tidak ingin menunjukkan counter labelnya silahkan hapus code tersebut.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 1:52 AM

33 comments :

  1. thank you bang Laban sangat menarik dan mudah difahami tutorialnya sukses buat anda, keep writing !

    ReplyDelete
  2. Thx For You @Oyin.. slam kenal dari saya dan makasih atas kunjungannya..

    ReplyDelete
  3. Siip gan menarik tipsnya

    ReplyDelete
    Replies
    1. sama sama sob.
      makasih atas kunjungannya salam kenal..

      Delete
  4. thanks banget gan atas infonya. tapi jadinya kok kurang bagus ya hehehehehe.
    salam vansheng beauty

    ReplyDelete
    Replies
    1. sama sama sob, salam kenal dari saya..
      soal tampilannya mungkin ukuran lebarnya disesuaikan gan..

      Delete
  5. mantabs gan...
    sangat membantu
    wongtran.blogspot.com

    ReplyDelete
  6. Banyak sekali membantu artikel nya tok.

    ReplyDelete
    Replies
    1. thx atas kunjungannya
      dan pendapatnya..
      silahkan di baca baca to, mana tau ada yang suka atau cocok dipasang di blognya ito..

      Delete
  7. kalau untuk menampilkan label dalam bentuk thumbnail gambar gimana bro?

    ReplyDelete
    Replies
    1. thx atas kunjungannya dan pertanyaannya sob..
      saya rasa bentuk label dengan thumdnail itu hanya memakai icon saja misalkan icon image tutorial, tips dll tapi linknya memakai icon, soalnya untuk label kita tidak bisa membuat script untuk memanggil suatu label dengan tampilan gambar sebab sebuah label / kategori merupakan sebuah link dan bukan postingan sob...

      atau mungkin maksudnya sistem artikel random atau recent post ?

      Delete
  8. kayak mana ne contoh gambar hasil jadinya, bisa tolong kasih foto/gambar ga? trims

    ReplyDelete
    Replies
    1. saya sudah update balik lihat saja demonya diatas..

      Delete
  9. Nice info gan ^^ kunjungan balik/komen balik gan :D info-pasid.blogspot.com

    ReplyDelete
    Replies
    1. wah blognya mantap gan.. kren.. jadi malu dengan blog saya ini heheh yang polos..

      thx atas kunjungannya dan pendapatnya..

      Delete
  10. sangat bermanfaat sekali...bagi saya yang masih belajar utak-atik HTML...Tks code ini berjalan dengan baik pada blog saya..Tks sekali lagi..

    ReplyDelete
  11. untuk refrensi mohon kunjungan baliknya bacawebster.com

    ReplyDelete
  12. artikelnya sangat bagus dan sangat bermanfaat, makasih
    semoga sukses saja.. dan salam hangat buat admin blog dari ibbenk21

    ReplyDelete
  13. asyik, izin pasang ya gan :)
    saling berkunjung Surya Personal Blog ^_^

    ReplyDelete
  14. Arttikel ini sangat bermanfaat bagi saya blogger pemula, terima kasih. kunjungi balik: http://cahyamangkku.blogspot.com

    ReplyDelete
  15. artikel ini sangat bermanfaat bagi saya blogger pemula. termia kasih. http://cahyamangku.blogspot.com

    ReplyDelete
  16. Replies
    1. ini memakai evault blogspot sebagai htmlnya gan, tutorial ini hanya modifikasi lewat CSS aja untuk tampilannya

      Delete
  17. gimana mau tukar font mas???

    ReplyDelete
    Replies
    1. sebenarnya pada tutorial ini tidak ada code merubah hurufnya gan tapi saya akan memberikan codenya..

      #label1 {
      font-family: Arial;
      font-size: 12px;
      }

      silahkan pasang di bagian CSS template agan, untuk merubah fontnya silahkan ganti " Arial " menjadi font kesukaan agan.. untuk lebih kreatif lagi agar font blognya lebih elegan silahkan kunjungi link tutorial dibawah ini semoga bermanfaat..

      http://www.ideblogspot.com/2014/01/cara-menggunakan-google-fonts.html

      Delete
  18. bray gua tes diblog gua belum bisa bray, tolong bantu bray

    ReplyDelete
  19. wah makasih om, sangat bermanfaat

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog