Membuat Counter Box pada Widget Label
Kang Ismet
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
silahkan sesuaikan ukuran pixel sesuai selera sobat.
#Label1 li .label-counter tambahkan ukuran fixed :width:25pxsilahkan sesuaikan ukuran pixel sesuai selera sobat.
mangstabbbbb :-d sudah saya pasang kang, posisinya akan coba saya balik seperti DTE
kereen blognya sob :-bd
Komentar ini telah dihapus oleh Unknown sebagai penulis.
@MASTER TUTS tampilan blognya mirip DTE :d
keren kang.. boleh dicoba nih :D
silahkan sob.. :)
Kang,..setelah sekian lama menjadi pengunjung di blog akang, baru kali ini saya bisa meraih gelar komentator nomer dua, salam kenal
lebih rajin aja berkunjungnya sob, kemarin emang saya tutup kolom komentarnya... salam kenal juga
Tos dibuka ayeuna mah pantona heheheehe... Sami kang abdi ge pertama ningali di DTE :D
muhun kang.. kamari mah langki di bumi :) pami di DTE wungkul moal wantun mosting, kumargi abdi ningalina di deluxetemplates, premiumblogtemplates, sreng dte, janten wantun :)
disimpen heula scriptna kang, hatur nuhun...alias terima kasih.
silahkan dikantongin dulu :) kade kantongna dobol
pengen pertamax susah banget ya kang ?, yaudah deh kang saya nyimak aja :D, nanti saya coba di -> http://yoga-tc.blogspot.com/
yang rajin aja berkunjungnya sob :)
Ijin Nyimak kang,ini yang saya cari heheh
silahkan diaplikasikan :)
Saya bookmark dulu kang postingannya... siapa tau nanti dibutuhkan
silahkan sob
Cakep banget kang ismet :)
wkwkkw.. biasa aja ah
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
sya belum tau kenapa sob, ada link postingan? soalnya saya coba ditemplate premium punya MKR tetep aja ga valid sob
Dapat ilmu baru lagi kang...terima kasih selalu share ilmu tentang blog nih kang Ismet
emang berusaha niche saya ke tutorial blogging kang
heheh keren kang, tapi sudah tidak ada tempat lagi untuk memasangnya.. :)
diblog orang aja :)
bgus tutorialnya..
tengkyu sob
Mantap brooo :D
hehhe asal jangan turuuun brooo :D
mantab kang :-d
keren, artikelnnya mantab!
- salam damai -
salam damai juga sob.. :-d
Thanks kang,,, ini yang saya cari-cari,,, saya sempat ngiler lihat widget labelnya DTE:] :D..
di lap ga ilernya :D
Keren artikelnya Kang.
nuhun kang :)
keren ni kang, saya coba terapkan di blog saya kang, N makasih banyak kang dah share
sama2 sob., silahkan diuji coba
Kreatif kang :-d saya suka! :)
hehehe.. hasil coba2
Seharian tidur eh dah ada surprise keren kang ... kalau orng bilang mah mangstab heuheu
mang stab teh salakina bi stab nya? :D
keren kang ijin nyoba widget nya :)
silahkan dicoba :)
Kayak'y kalau menurut kaca benggala dari selatan .. sepertinya akang lagi ada project euy hehe
teu dibale2 nya komengna.. nuju tapa we kang :)
buagus, widgetnya
cakep warnanya.
kalau warna kan bisa di edit CSS
Bagus Widgetnya :D
tapi ini Valid HTML5 dan Berat gak?
#Blogger
valid gan, coba cek aja blog ane, ga berat ko, cuma widget biasa :)
mantab kang ismet!
- postingannya lebih jago!
- absen dulu!
rajin absennya nih :-d
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
naha pake domain sayah.. atuh sayah nu diuntungkeun :) ke urang emutan heula nya :D
mantab kang- keren nih jadi bookmark di browser wuss wuss ( GOOGLE CHROME )
maaf saya promo browser :D ---^^^
- salam damai kangismet! -
[ semoga sehat selalu! ]
hmmm,,, boleh jg,,, tapi udah ada di blog sy, bingung mau replace atw gk
kyk ada yg beda waktu ngepost komentar,,,
ini gimana cara buat warna border biar beda, kalau pengunjung ngepost komentar baru kang ismet?
Nice gan :D
Ijin nyoba :v
silahkan :)
Gimana kang dengan tawaran saya ? :)
masih difikirkan heheheh :D
kang!
kalo memotong snippet di .post home page g mana tuh??
[ salam damai ]
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
Sekilas kalau dilihat bentuknya udah menyerupai bentuk widget wordpress ya Kang.
emabf mengadopsi WP sih
Dasar si Rio, dimana saja pasti salam damai mulu, gak capek apa... :D
anti tawuran berarti :)
wah keren widgetnya Bang :) salam blogger :)
salam juga sob
Ternyata trik nya susah susah gampang yah.
kalau difahami, gampang ko :)
Itu untuk daftar ya kang? bukan untuk cloud?
iya daftar sob..
harus edit HTML ya kang, bisa langsung jd widget gak ya? takut nambahin html ngaruh ke loadingnya kang
tambah widget, di edit HTML cuma nambah CSS sedikit, kayanya sama aja untuk loading.. ga ngefek
saya juga lagi mau modif widget label kang
wahhh ... baru tau kang ... makin rajin aja neh baca-baca dsini. kemarin komentar nya offline ya kang... :(
Bagus juga modelnya, kang
bagus modelnya kang, sapa seperti DTE~
sch-xp.blogspot.com
Ntar DTE ganti tampilan lagi nih , gaya nya di ikutin mulu :D
cuma info aja.. saya udah tulis di atas, saya bukan nyontek DTE, karena pertama saya liat di Deluxetemplates
Mas saya boleh request tidak ???
- Salam Damai mas -
request apa ya? kalau bisa sih saya coba.. kalau ga bisa ya maugimana lagi :)
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 ?
kayaknya ga masalah sih, blom pernah coba.. tapi nantinya kalau mau balikin ke komen blogger, harus dibalikin lagi JS nya :)
Heheheeh sebentar lagi akan ada postingan yang yahhutt nih kang hehehe :D
moal waka di share ah.. wkwkwkkwk :)
Hadirr ,
nyari dari dulu.. eh ketemunya disini.. tengkyu kang
Belajar membuat counter box, buat blog saya nih Kang
Terima kasih atas artikel dan berbaginya, sukses erus yah Kang Ismet
Kang, ada script yang buat ngejumlahin jumlah pembaca di setiap kontent nggak ya ?
Kalo ada share ya kang Ismet :D
belum punya sob
ini baru keren, cicipi dl kang
Nyimak lagi Kang artikel menarik ini,
sepertinya langsung saya praktekan nih
terima kasih Kang Ismet
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
ga bisa.. ini untuk blogger aja
kang ismet? kalau menambahkan script label yg versi cybr4rt.com gmna?? aku pingin tau cranya
scriptnya aja saya ga tau kaya gimana? :D
makasih gan infonya
Widget Labelnya sudah saya terapkan diblog saya...trimakasih infonya...
nice info, izin comot
Ijin buat nyoba ya kang. makasih sebelumnya :D