Membuat Counter Box pada Widget Label
0 views
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.
130 komentar
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
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
sepertinya langsung saya praktekan nih
terima kasih Kang Ismet
Kalo ada share ya kang Ismet :D
Terima kasih atas artikel dan berbaginya, sukses erus yah Kang Ismet
- Salam Damai mas -
sch-xp.blogspot.com
kalo memotong snippet di .post home page g mana tuh??
[ salam damai ]
//<![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
Ijin nyoba :v
ini gimana cara buat warna border biar beda, kalau pengunjung ngepost komentar baru kang ismet?
maaf saya promo browser :D ---^^^
- salam damai kangismet! -
[ semoga sehat selalu! ]
ieu postingan nu urang tunggu-tunggu, okos blogna DTE :), kantongan heula scriptna kang :D
- postingannya lebih jago!
- absen dulu!
tapi ini Valid HTML5 dan Berat gak?
#Blogger
cakep warnanya.
keren, artikelnnya mantab!
- salam damai -
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