Memotong Snippet / Cuplikan Postingan Popular Post di Blogger. Popular Post atau entri populer pada Blogspot banyak pilihan pada penggunaannya. Baik hanya menampilkan judul saja, judul dan thumbnail gambar, atau disertai dengan snippet (cuplikan). Bahkan kita bisa menampilkan entri pupuler dengan jarak waktu, baik 1 minggu, 1 bulan, atau selamanya.

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 popular post di blogger

Cara Memotong Snippet pada Polular Posts

1. Tambahkan Widget Entri Populer dan tandai thumbnail gambar dan cuplikan.

cara memotong snippet popular post di blogger

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 dikehendaki
3. Simpan

Gampang bukan cara memotong cuplikan / snippet pada popular post?

46 komentar

wahh baru lagi nih nice trik

dapet 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.

Balas

Wah! ini nih, selalu ada yang baru dari Kang Ismet, langsung coba Kang dan terima Kasih

Balas

post snippet ini bisa juga dibuat readmore mas :D
kayak blog sy hihi..

Balas

Makasih kang... kalau cara merubah ukuran thumbnail gambarnya gimana kang?

Balas

mudah2an apa yang saya share ada manfaatnya sob..

Balas

mencoba mencari sob.... :)

Balas

yang pake kode CSS .thumb img bukan?

Balas

Tambahkan kode dibawah sebelum ]]></b:skin>

.PopularPosts img {
height: 36px;
width: 36px;
}

.PopularPosts .widget-content ul li {
list-style: none;
}

Balas

Makasih kang, hebat lah :)

Balas

sederhana tapi besar fungsinya kang..

Balas

yang pake data:post.snippet mas :)

Balas

oalah ternyata tricnya pake script jquery :D

Balas

Wow......

maksih kang udah share. namabah lagi ilmu saya :-)

Balas

Thanks kang ismet , kang request dunk cara mengembalikan komentar yang mirip wordpress ke komentar yang seperti kang ismet

Balas

Makasih kang tutornya..kalau buat related post model kaya Snippet gitu gimana caranya ya kang?

Balas

wah keren kang, ane kira ga bisa di utak atik, ternyata bisa hehe...makasih kang:}

Balas

asa ningali penampakan blogna KR ari kadieu teh...wekekekkk :P

Balas

Makasih tutornya kang, segera dicoba :D

Balas

Pakai JS juga bisa tow .. baru tau. next share Kang Ismet.
kalau saya pakai CSS aja.. :D


text-overflow: ellipsis;

;)

Balas

Wah, patut dicoba nih sob...

Balas

Sama2 sob.. silahkan coba2

Balas

Pan rubah jadi KI xixixixix :)

Balas

Wah... udah lama banget saya cari trik ini buat blog saya yg satu lagi. Ane coba dulu mas.

Balas

wahh mantap tutorialnya kang, jadi pengen balik lg kedunia blogging neh hehe :D

Balas

Muatep Kang. lup u pull. heheheeeeeeeee

Balas

sederhana tapi hasilnya... Ruar biasaaa

Balas

gan sya mo buat nya ke samping gimana caranya??

Balas

mantap banget nih..layak untuk dipraktekkan

Balas

sudah saya praktekkn lgsung kang, jadiny popular posts tampak lebih rapi !
trimakasih kang salam blogger!
sblumnya saya mnmukan artikel yg sama percis disini http://czx-riko.blogspot.com/2012/08/memotong-snippet-popular-post-di-blogger.html
plagiat itu, udah copas tulisan org kaga d taruh link sumber artikel..
masi mending kodenya yg d copas, ini dari basa basi sampe gambar sama percis gada yg dirubah..
wkwkwk :D

Balas

kang masalah saya kayaknya lebih sulit....gimana ya cara menghilangkan garis antara popular postnya

Balas

Nah, lagi butuh banget ini nih. Sudah saya terapkan di Blog saya. Kunjungi juga yah Blog sederhana saya kang. http://regibrader-free.blogspot.com/

Balas

sebenernya kasian ke dianya sih :)

Balas

wow keren kang!
- salam damai -

Balas

Cara lama dengan polesan baru
Menarik nihbuat di pelajari Hatur nuhun Kang Ismet

Balas

Kalau popular posts di blog saya, di detek di W3C masih
ada laporan error saja Kang, apa yang harus di perbaiki yah.?

Balas

KOK punya saya gak bisa kang, saya udah mengikuti tutor diatas, mohon dirujuk saya pakai template default blogger josh peterson, indosata,blogspot,com

Balas

makasih mas, script ini membantu saya mengurangi jumlah karakter dalam auto readmore yang menggunakan snippet dan saya juga telah membuatkan panduannya mas :)
makasih banyak..

Balas

kang ismet, kalau judulnya saja di potong gimana ya? ini sudah cari sana sini belum ketemu juga =(

Balas

kok ane kaga berhasiL gan...!!! mungkin tempLate script.na beda kaLi yaa gan...!!! hehe

Balas

Poskan Komentar


×
Chat