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.

130 komentar

mangstabbbbb :-d sudah saya pasang kang, posisinya akan coba saya balik seperti DTE

Balas

keren kang.. boleh dicoba nih :D

Balas

Kang,..setelah sekian lama menjadi pengunjung di blog akang, baru kali ini saya bisa meraih gelar komentator nomer dua, salam kenal

Balas

Tos dibuka ayeuna mah pantona heheheehe... Sami kang abdi ge pertama ningali di DTE :D

Balas

disimpen heula scriptna kang, hatur nuhun...alias terima kasih.

Balas

lebih rajin aja berkunjungnya sob, kemarin emang saya tutup kolom komentarnya... salam kenal juga

Balas

muhun kang.. kamari mah langki di bumi :) pami di DTE wungkul moal wantun mosting, kumargi abdi ningalina di deluxetemplates, premiumblogtemplates, sreng dte, janten wantun :)

Balas

silahkan dikantongin dulu :) kade kantongna dobol

Balas

pengen pertamax susah banget ya kang ?, yaudah deh kang saya nyimak aja :D, nanti saya coba di -> http://yoga-tc.blogspot.com/

Balas
Komentar ini telah dihapus oleh pengarang.

@MASTER TUTS tampilan blognya mirip DTE :d

Balas

Ijin Nyimak kang,ini yang saya cari heheh

Balas

Saya bookmark dulu kang postingannya... siapa tau nanti dibutuhkan

Balas

Cakep banget kang ismet :)

Balas

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

Balas

Dapat ilmu baru lagi kang...terima kasih selalu share ilmu tentang blog nih kang Ismet

Balas

asal jangan dte mirip saya aja hehehhe ;)

Balas

heheh keren kang, tapi sudah tidak ada tempat lagi untuk memasangnya.. :)

Balas

mantab kang :-d
keren, artikelnnya mantab!
- salam damai -

Balas

wah agan BEN SPARROW blognnya mantab!
- salam damai kang ismet! -

Balas

Thanks kang,,, ini yang saya cari-cari,,, saya sempat ngiler lihat widget labelnya DTE:] :D..

Balas

keren ni kang, saya coba terapkan di blog saya kang, N makasih banyak kang dah share

Balas

Kreatif kang :-d saya suka! :)

Balas

Seharian tidur eh dah ada surprise keren kang ... kalau orng bilang mah mangstab heuheu

Balas

keren kang ijin nyoba widget nya :)

Balas

Kayak'y kalau menurut kaca benggala dari selatan .. sepertinya akang lagi ada project euy hehe

Balas

buagus, widgetnya
cakep warnanya.

Balas

Bagus Widgetnya :D
tapi ini Valid HTML5 dan Berat gak?

#Blogger

Balas

mantab kang ismet!
- postingannya lebih jago!
- absen dulu!

Balas

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

Balas

valid gan, coba cek aja blog ane, ga berat ko, cuma widget biasa :)

Balas

yang rajin aja berkunjungnya sob :)

Balas

silahkan diaplikasikan :)

Balas

sya belum tau kenapa sob, ada link postingan? soalnya saya coba ditemplate premium punya MKR tetep aja ga valid sob

Balas

emang berusaha niche saya ke tutorial blogging kang

Balas

hehhe asal jangan turuuun brooo :D

Balas

salam damai juga sob.. :-d

Balas

sama2 sob., silahkan diuji coba

Balas

mang stab teh salakina bi stab nya? :D

Balas

teu dibale2 nya komengna.. nuju tapa we kang :)

Balas

kalau warna kan bisa di edit CSS

Balas

betul kata bang joel.. widget biasa, hanya ditambah CSS

Balas

naha pake domain sayah.. atuh sayah nu diuntungkeun :) ke urang emutan heula nya :D

Balas

Eta bahasana jiga urang lebak banten euy .. haha atawa tangerang

Balas

apal wae lah.. mun urang tangerang mah biasana bilangna jauh jasa ieu jalan nya :D

Balas

Hahaha urang asli tangerang :D

Balas

Hehehe, kumaha kang ?, insyaallah saya akan update tiap hari :D

Balas

Tuh nya pasti weh .. te sawios ketang ari bahasa mah da mung ukur panganter ,nu penting mah maksadna we sae ... sanes kitu pangersa hehe

Balas

mantab kang- keren nih jadi bookmark di browser wuss wuss ( GOOGLE CHROME )
maaf saya promo browser :D ---^^^
- salam damai kangismet! -
[ semoga sehat selalu! ]

Balas

hmmm,,, boleh jg,,, tapi udah ada di blog sy, bingung mau replace atw gk

Balas

kyk ada yg beda waktu ngepost komentar,,,
ini gimana cara buat warna border biar beda, kalau pengunjung ngepost komentar baru kang ismet?

Balas

Gimana kang dengan tawaran saya ? :)

Balas

kang!
kalo memotong snippet di .post home page g mana tuh??
[ salam damai ]

Balas

Sekilas kalau dilihat bentuknya udah menyerupai bentuk widget wordpress ya Kang.

Balas

saya baru 2 kali dapat pertamax! :\
[ SALAM DAMAI ]

Balas

Alhamdulillah saya lap kang :v

Balas

Dasar si Rio, dimana saja pasti salam damai mulu, gak capek apa... :D

Balas

pake CSS terget.. selengkapnya nanti saya share

Balas

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

Balas

masih difikirkan heheheh :D

Balas

wah keren widgetnya Bang :) salam blogger :)

Balas

Ternyata trik nya susah susah gampang yah.

Balas

kalau difahami, gampang ko :)

Balas

makasih banyak kang ismet!, kang ismet memang blogger welcome!
[ selalu berbagi dan bisa menjawab pertanyaan :-d ]
- Salam Damai -

$Saya terapkan dulu kang :D

Balas

Itu untuk daftar ya kang? bukan untuk cloud?

Balas

harus edit HTML ya kang, bisa langsung jd widget gak ya? takut nambahin html ngaruh ke loadingnya kang

Balas

saya juga lagi mau modif widget label kang

Balas

siipp kang,, saya tunggu artikelna :) doa'in biar pertamax

Balas

wahhh ... baru tau kang ... makin rajin aja neh baca-baca dsini. kemarin komentar nya offline ya kang... :(

Balas

bagus modelnya kang, sapa seperti DTE~
sch-xp.blogspot.com

Balas

Sing asak-asak nya ngejo
bisi tutung tambagana
sing asak-asak nya nempo
bisi kaduhung jagana
haha

Balas

Ntar DTE ganti tampilan lagi nih , gaya nya di ikutin mulu :D

Balas

cuma info aja.. saya udah tulis di atas, saya bukan nyontek DTE, karena pertama saya liat di Deluxetemplates

Balas

Mas saya boleh request tidak ???

- Salam Damai mas -

Balas

request apa ya? kalau bisa sih saya coba.. kalau ga bisa ya maugimana lagi :)

Balas

saya mau nanya mas, gmna tuh buat menu fixed gitu beserta komentar terbaru ??

Balas

Fixed menu : http://blog.kangismet.net/2013/04/membuat-floating-menu-fixed-menu-di-blog.html, Komentar Terbaru : http://blog.kangismet.net/2013/09/recent-comment-dengan-avatar-untuk-blogger-v3.html

Balas

wew, makasih kang..
boleh request lagi ??
hehehe... maklum kang newbie.. :D

Balas

untuk efek loading halaman gitu gmna ?? :D

Balas

kayaknya udah banyak di gugel keo :)
coba cari dengan kayta kunci 'membuat efek loading di blog'

Balas

tambah widget, di edit HTML cuma nambah CSS sedikit, kayanya sama aja untuk loading.. ga ngefek

Balas

woy si kang simet capek yasdi, lu kebanyakan nanya :D :-p
- Salam damai -
* pake ambil salam damai gw juga :p

Balas

mas, boleh kgk saya niru menu fixed mas ?

Balas

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 ?

Balas

Heheheeh sebentar lagi akan ada postingan yang yahhutt nih kang hehehe :D

Balas

moal waka di share ah.. wkwkwkkwk :)

Balas

kayaknya ga masalah sih, blom pernah coba.. tapi nantinya kalau mau balikin ke komen blogger, harus dibalikin lagi JS nya :)

Balas

nyari dari dulu.. eh ketemunya disini.. tengkyu kang

Balas

Belajar membuat counter box, buat blog saya nih Kang
Terima kasih atas artikel dan berbaginya, sukses erus yah Kang Ismet

Balas

Kang, ada script yang buat ngejumlahin jumlah pembaca di setiap kontent nggak ya ?
Kalo ada share ya kang Ismet :D

Balas

Kang comments blogger bisa di tutup sementara, dan bisa dibuka
Lagi, cara nya gimana Kang, minta Resep yah Trima kasih

Balas

Tutornya : [url=http://blog.kangismet.net/2013/08/membuat-kolom-komentar-offline.html]Membuat Kotak Komentar Offline[/url]

Balas

ini baru keren, cicipi dl kang

Balas

Nyimak lagi Kang artikel menarik ini,
sepertinya langsung saya praktekan nih
terima kasih Kang Ismet

Balas

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

Balas

ga bisa.. ini untuk blogger aja

Balas

kang ismet? kalau menambahkan script label yg versi cybr4rt.com gmna?? aku pingin tau cranya

Balas

scriptnya aja saya ga tau kaya gimana? :D

Balas

Widget Labelnya sudah saya terapkan diblog saya...trimakasih infonya...

Balas

Kok di blogku malah ga tampil ya kang?

Balas

jangan lupa, tampilkan jumlah entry

Balas

Ijin buat nyoba ya kang. makasih sebelumnya :D

Balas

Poskan Komentar


×
Chat