Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Counter Box pada Widget Label

Membuat widget label keren, dengan jumlah postingan dalam kotak terpisah.
widget label
Widget Label dengan Counter Box - Bingung sebenernya saya membuat judul yang pas untuk postingan ini, semoga saja sobat faham maksud saya dengan melihat thumbnail di samping. Intinya membuat jumlah postingan pada label dengan style yang berbeda.

Mungkin sobat sering melihat Widget Label dengan counter seperti itu. Saya pribadi pertama menemukan di DeluxeTemplates.net, kemudian di PremiumBlogTemplates.com dan di DTE.

Bagi sobat yang mau menerpkannya, berikut langkah-langkahnya :

Langkah 1 : Buat widget Label, centang Tampilkan jumlah entri per label.

Langkah 2 : Simpan kode ini di atas ]]></b:skin> atau </style>

#Label1 li a {color: #2c3e50;text-decoration:none;}
#Label1 li a:hover, #Label2 li a:active, #Label1 li a:focus {color: #20aea6;text-decoration:none;}
#Label1 li .label-counter {float:right;background-color:#20aea6;color:#fff;line-height:1;margin:2px 0 0;padding:3px 5px;border-radius:2px;text-align: center;font-size:12px;}
#Label1 li:hover .label-counter {background-color:#255e96;color:white}

Silahkan atur kembali warna sesuai keinginan sobat.

CSS di atas tidak mutlak pada #Label1, apabila ada beberapa label pada template sobat silahkan pilih dan edit menjadi#Label2 atau #Label3 dst.

Langkah 3 : Pada Label terpilih, cari kode :

<span dir='ltr'>(<data:label.count/>)</span>

ganti mejadi

<span class='label-counter'><data:label.count/></span>

Pada hasil akhir, apabila jumlah postingan lebih banyak maka akan lebih lebar seperti ini 123 dibanding yang lebih sedikit seperti ini 32. Untuk membuat ukuran yang sama, pada #Label1 li .label-counter tambahkan ukuran fixed :

width:25px

silahkan sesuaikan ukuran pixel sesuai selera sobat.

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

130 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. mangstabbbbb :-d sudah saya pasang kang, posisinya akan coba saya balik seperti DTE
    1. kereen blognya sob :-bd
    2. Unknown
      Komentar ini telah dihapus oleh pengarang.
    3. @MASTER TUTS tampilan blognya mirip DTE :d
  2. keren kang.. boleh dicoba nih :D
    1. silahkan sob.. :)
  3. Kang,..setelah sekian lama menjadi pengunjung di blog akang, baru kali ini saya bisa meraih gelar komentator nomer dua, salam kenal
    1. lebih rajin aja berkunjungnya sob, kemarin emang saya tutup kolom komentarnya... salam kenal juga
  4. Tos dibuka ayeuna mah pantona heheheehe... Sami kang abdi ge pertama ningali di DTE :D
    1. muhun kang.. kamari mah langki di bumi :) pami di DTE wungkul moal wantun mosting, kumargi abdi ningalina di deluxetemplates, premiumblogtemplates, sreng dte, janten wantun :)
  5. disimpen heula scriptna kang, hatur nuhun...alias terima kasih.
    1. silahkan dikantongin dulu :) kade kantongna dobol
  6. pengen pertamax susah banget ya kang ?, yaudah deh kang saya nyimak aja :D, nanti saya coba di -> http://yoga-tc.blogspot.com/
    1. yang rajin aja berkunjungnya sob :)
  7. Ijin Nyimak kang,ini yang saya cari heheh
    1. silahkan diaplikasikan :)
  8. Saya bookmark dulu kang postingannya... siapa tau nanti dibutuhkan
    1. silahkan sob
  9. Cakep banget kang ismet :)
    1. wkwkkw.. biasa aja ah
  10. Kang, saya mau Nanya nih kang?

    Kok ada yang di beberapa Template , Walaupun Postingannya Pake Gambar . Tetep Langsung Valid Html5 , nah ada juga yang Template kalo setiap Postingannya harus di Edit a href nya di hapus jadi tinggal kode img nya aja atau Pada kode border di jadikan Alt .

    Seperti punya http://mkr-site.blogspot.com (Maksud aku Template Buatan Dia) dan Templatenya http://yoga-tc.blogspot.com/

    Itu Disebabkan apa ya kang? :)
    Mohon Jawabannya
    1. sya belum tau kenapa sob, ada link postingan? soalnya saya coba ditemplate premium punya MKR tetep aja ga valid sob
  11. Dapat ilmu baru lagi kang...terima kasih selalu share ilmu tentang blog nih kang Ismet
    1. emang berusaha niche saya ke tutorial blogging kang
  12. heheh keren kang, tapi sudah tidak ada tempat lagi untuk memasangnya.. :)
    1. diblog orang aja :)
  13. bgus tutorialnya..
    1. tengkyu sob
  14. Mantap brooo :D
    1. hehhe asal jangan turuuun brooo :D
  15. mantab kang :-d
    keren, artikelnnya mantab!
    - salam damai -
    1. salam damai juga sob.. :-d
  16. Thanks kang,,, ini yang saya cari-cari,,, saya sempat ngiler lihat widget labelnya DTE:] :D..
    1. di lap ga ilernya :D
  17. Keren artikelnya Kang.
    1. nuhun kang :)
  18. keren ni kang, saya coba terapkan di blog saya kang, N makasih banyak kang dah share
    1. sama2 sob., silahkan diuji coba
  19. Kreatif kang :-d saya suka! :)
    1. hehehe.. hasil coba2
  20. Seharian tidur eh dah ada surprise keren kang ... kalau orng bilang mah mangstab heuheu
    1. mang stab teh salakina bi stab nya? :D
  21. keren kang ijin nyoba widget nya :)
    1. silahkan dicoba :)
  22. Kayak'y kalau menurut kaca benggala dari selatan .. sepertinya akang lagi ada project euy hehe
    1. teu dibale2 nya komengna.. nuju tapa we kang :)
  23. buagus, widgetnya
    cakep warnanya.
    1. kalau warna kan bisa di edit CSS
  24. Bagus Widgetnya :D
    tapi ini Valid HTML5 dan Berat gak?

    #Blogger
    1. valid gan, coba cek aja blog ane, ga berat ko, cuma widget biasa :)
  25. mantab kang ismet!
    - postingannya lebih jago!
    - absen dulu!
    1. rajin absennya nih :-d
  26. Kang ieu urang ayeuna boga blog nu mosting lirik lagu (blog lirik lagu), ieu urang ayeuna erek kerja sama jeung akang, hayangna mah erek make domain akang, bisa teu kang? ari teu bisa geh te nanaonlah :), maksudna mah sih erek make domain lyrics.kangismet.net, atawa lirik.kangismet.net, hehehe kumaha kang ?, ditunggu kabar sae na ti akang :),

    ieu postingan nu urang tunggu-tunggu, okos blogna DTE :), kantongan heula scriptna kang :D
    1. naha pake domain sayah.. atuh sayah nu diuntungkeun :) ke urang emutan heula nya :D
  27. mantab kang- keren nih jadi bookmark di browser wuss wuss ( GOOGLE CHROME )
    maaf saya promo browser :D ---^^^
    - salam damai kangismet! -
    [ semoga sehat selalu! ]
  28. hmmm,,, boleh jg,,, tapi udah ada di blog sy, bingung mau replace atw gk
    1. kyk ada yg beda waktu ngepost komentar,,,
      ini gimana cara buat warna border biar beda, kalau pengunjung ngepost komentar baru kang ismet?
  29. Nice gan :D
    Ijin nyoba :v
    1. silahkan :)
  30. Gimana kang dengan tawaran saya ? :)
    1. masih difikirkan heheheh :D
  31. kang!
    kalo memotong snippet di .post home page g mana tuh??
    [ salam damai ]
    1. coba simpan kode ini di atas </body> : <script type='text/javascript'>
      //<![CDATA[
      $('.post-body.entry-content .snippetpost').each(function(){
      var txt=$(this).text().substr(0,80);
      var j=txt.lastIndexOf(' ');
      if(j>42)
      $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
      });
      //]]>
      </script>
      menurut saya sih mending digedein gambarnya sedikit
  32. Sekilas kalau dilihat bentuknya udah menyerupai bentuk widget wordpress ya Kang.
    1. emabf mengadopsi WP sih
  33. Dasar si Rio, dimana saja pasti salam damai mulu, gak capek apa... :D
    1. anti tawuran berarti :)
  34. wah keren widgetnya Bang :) salam blogger :)
    1. salam juga sob
  35. Ternyata trik nya susah susah gampang yah.
    1. kalau difahami, gampang ko :)
  36. Itu untuk daftar ya kang? bukan untuk cloud?
    1. iya daftar sob..
  37. harus edit HTML ya kang, bisa langsung jd widget gak ya? takut nambahin html ngaruh ke loadingnya kang
    1. tambah widget, di edit HTML cuma nambah CSS sedikit, kayanya sama aja untuk loading.. ga ngefek
  38. saya juga lagi mau modif widget label kang
  39. wahhh ... baru tau kang ... makin rajin aja neh baca-baca dsini. kemarin komentar nya offline ya kang... :(
  40. Bagus juga modelnya, kang
  41. bagus modelnya kang, sapa seperti DTE~
    sch-xp.blogspot.com
  42. Ntar DTE ganti tampilan lagi nih , gaya nya di ikutin mulu :D
    1. cuma info aja.. saya udah tulis di atas, saya bukan nyontek DTE, karena pertama saya liat di Deluxetemplates
  43. Mas saya boleh request tidak ???

    - Salam Damai mas -
    1. request apa ya? kalau bisa sih saya coba.. kalau ga bisa ya maugimana lagi :)
  44. Kang, sama mau nanya nii, kalau saya menggunakan komentar google di blog, lalu bisa tidak menghapus komentar blogger ?, maksudnya jika kita menghapus js thread comment blogger pada teplate, apakah akan ada efeknya pada blog kita ?
    1. kayaknya ga masalah sih, blom pernah coba.. tapi nantinya kalau mau balikin ke komen blogger, harus dibalikin lagi JS nya :)
  45. Heheheeh sebentar lagi akan ada postingan yang yahhutt nih kang hehehe :D
    1. moal waka di share ah.. wkwkwkkwk :)
  46. Hadirr ,
  47. nyari dari dulu.. eh ketemunya disini.. tengkyu kang
  48. Belajar membuat counter box, buat blog saya nih Kang
    Terima kasih atas artikel dan berbaginya, sukses erus yah Kang Ismet
  49. Kang, ada script yang buat ngejumlahin jumlah pembaca di setiap kontent nggak ya ?
    Kalo ada share ya kang Ismet :D
    1. belum punya sob
  50. ini baru keren, cicipi dl kang
  51. Nyimak lagi Kang artikel menarik ini,
    sepertinya langsung saya praktekan nih
    terima kasih Kang Ismet
  52. Tuh widget counter bisa diaplikasikan di wordpress seperti barbara-palvin.us pa gak kang? atau cuma di blogger doank di templasa.blogspot.com slnya aq nubie nih
    1. ga bisa.. ini untuk blogger aja
  53. kang ismet? kalau menambahkan script label yg versi cybr4rt.com gmna?? aku pingin tau cranya
    1. scriptnya aja saya ga tau kaya gimana? :D
  54. makasih gan infonya
  55. Widget Labelnya sudah saya terapkan diblog saya...trimakasih infonya...
  56. Kok di blogku malah ga tampil ya kang?
    1. jangan lupa, tampilkan jumlah entry
  57. nice info, izin comot
  58. Ijin buat nyoba ya kang. makasih sebelumnya :D
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.