Apabila kita menampilkan judul, thumbnail dan snippet, terkadang snippet (cuplikan) terlalu panjang sehingga melebihi thumbnail gambar. Saat ini saya akan berbagi cara mengatur, atau memotong snippet pada entri populer (popular posts).

Cara Memotong Snippet pada Polular Posts
1. Tambahkan Widget Entri Populer dan tandai thumbnail gambar dan cuplikan.
2. Simpan
Sekarang Masuk ke Edit HTML pada Template
1. Tambahkan kode ini sebelum
</body><script type='text/javascript'>
//<![CDATA[
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,50);
var j=txt.lastIndexOf(' ');
if(j>42)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
//]]>
</script>2. Ganti tulisan yang merah (50) dengan jumlah karakter yang dikehendaki3. Simpan
Gampang bukan cara memotong cuplikan / snippet pada popular post?



wahh baru lagi nih nice trik
BalasHapusdapet ajah code nya kang Ismet..
salut deh
wehehe bawah ane mungkin tertarik nih, soalnya rata2 blogger ga mau snippet nya kepanjangan al hasil snippetnya ga ditampilin (hanya judul nya ajah)
nah kalo ada ini kemungkinan besar para blogger akan menampilkan cuplikannya..
hehe.. salam persahabatan kang.
mudah2an apa yang saya share ada manfaatnya sob..
HapusWah! ini nih, selalu ada yang baru dari Kang Ismet, langsung coba Kang dan terima Kasih
BalasHapusmencoba mencari sob.... :)
Hapuspost snippet ini bisa juga dibuat readmore mas :D
BalasHapuskayak blog sy hihi..
yang pake kode CSS .thumb img bukan?
Hapusyang pake data:post.snippet mas :)
HapusMakasih kang... kalau cara merubah ukuran thumbnail gambarnya gimana kang?
BalasHapusTambahkan kode dibawah sebelum ]]></b:skin>
Hapus.PopularPosts img {
height: 36px;
width: 36px;
}
.PopularPosts .widget-content ul li {
list-style: none;
}
Makasih kang, hebat lah :)
HapusSami2 kang...
Hapussederhana tapi besar fungsinya kang..
BalasHapusizin nyimak sob
BalasHapusoalah ternyata tricnya pake script jquery :D
BalasHapusWow......
BalasHapusmaksih kang udah share. namabah lagi ilmu saya :-)
Thanks kang ismet , kang request dunk cara mengembalikan komentar yang mirip wordpress ke komentar yang seperti kang ismet
BalasHapusMakasih kang tutornya..kalau buat related post model kaya Snippet gitu gimana caranya ya kang?
BalasHapuswah keren kang, ane kira ga bisa di utak atik, ternyata bisa hehe...makasih kang:}
BalasHapusasa ningali penampakan blogna KR ari kadieu teh...wekekekkk :P
BalasHapusPan rubah jadi KI xixixixix :)
HapusMakasih tutornya kang, segera dicoba :D
BalasHapusSama2 sob.. silahkan coba2
HapusPakai JS juga bisa tow .. baru tau. next share Kang Ismet.
BalasHapuskalau saya pakai CSS aja.. :D
text-overflow: ellipsis;
;)
Wah, patut dicoba nih sob...
HapusWah... udah lama banget saya cari trik ini buat blog saya yg satu lagi. Ane coba dulu mas.
BalasHapuswahh mantap tutorialnya kang, jadi pengen balik lg kedunia blogging neh hehe :D
BalasHapusMuatep Kang. lup u pull. heheheeeeeeeee
BalasHapussederhana tapi hasilnya... Ruar biasaaa
BalasHapusgan sya mo buat nya ke samping gimana caranya??
BalasHapusmantap banget nih..layak untuk dipraktekkan
BalasHapusok, thanks..
BalasHapus