Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Memotong Snippet Popular Post di Blogger

Cara termudah memotong snippet / cuplikan pada Popular Posts di Blogger / Blogspot.
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?

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

46 komentar

1. Komentar ini, diurutkan dari yang terbaru
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
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. 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.
    1. mudah2an apa yang saya share ada manfaatnya sob..
  2. Wah! ini nih, selalu ada yang baru dari Kang Ismet, langsung coba Kang dan terima Kasih
    1. mencoba mencari sob.... :)
  3. post snippet ini bisa juga dibuat readmore mas :D
    kayak blog sy hihi..
    1. yang pake kode CSS .thumb img bukan?
    2. yang pake data:post.snippet mas :)
  4. Makasih kang... kalau cara merubah ukuran thumbnail gambarnya gimana kang?
    1. Tambahkan kode dibawah sebelum ]]></b:skin>

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

      .PopularPosts .widget-content ul li {
      list-style: none;
      }
    2. Makasih kang, hebat lah :)
  5. sederhana tapi besar fungsinya kang..
  6. izin nyimak sob
  7. oalah ternyata tricnya pake script jquery :D
  8. Wow......

    maksih kang udah share. namabah lagi ilmu saya :-)
  9. Thanks kang ismet , kang request dunk cara mengembalikan komentar yang mirip wordpress ke komentar yang seperti kang ismet
  10. Makasih kang tutornya..kalau buat related post model kaya Snippet gitu gimana caranya ya kang?
  11. wah keren kang, ane kira ga bisa di utak atik, ternyata bisa hehe...makasih kang:}
  12. asa ningali penampakan blogna KR ari kadieu teh...wekekekkk :P
    1. Pan rubah jadi KI xixixixix :)
  13. Makasih tutornya kang, segera dicoba :D
    1. Sama2 sob.. silahkan coba2
  14. Pakai JS juga bisa tow .. baru tau. next share Kang Ismet.
    kalau saya pakai CSS aja.. :D


    text-overflow: ellipsis;

    ;)
    1. Wah, patut dicoba nih sob...
  15. Wah... udah lama banget saya cari trik ini buat blog saya yg satu lagi. Ane coba dulu mas.
  16. wahh mantap tutorialnya kang, jadi pengen balik lg kedunia blogging neh hehe :D
  17. Muatep Kang. lup u pull. heheheeeeeeeee
  18. sederhana tapi hasilnya... Ruar biasaaa
  19. gan sya mo buat nya ke samping gimana caranya??
  20. mantap banget nih..layak untuk dipraktekkan
  21. ok, thanks..
  22. 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
    1. sebenernya kasian ke dianya sih :)
  23. kang masalah saya kayaknya lebih sulit....gimana ya cara menghilangkan garis antara popular postnya
    1. itu di CSS sidebar nya
  24. Nah, lagi butuh banget ini nih. Sudah saya terapkan di Blog saya. Kunjungi juga yah Blog sederhana saya kang. http://regibrader-free.blogspot.com/
    1. menuju TKP sob
  25. wow keren kang!
    - salam damai -
  26. Cara lama dengan polesan baru
    Menarik nihbuat di pelajari Hatur nuhun Kang Ismet
  27. KOK punya saya gak bisa kang, saya udah mengikuti tutor diatas, mohon dirujuk saya pakai template default blogger josh peterson, indosata,blogspot,com
  28. HELP me Kang Ismet
  29. makasih mas, script ini membantu saya mengurangi jumlah karakter dalam auto readmore yang menggunakan snippet dan saya juga telah membuatkan panduannya mas :)
    makasih banyak..
  30. kang ismet, kalau judulnya saja di potong gimana ya? ini sudah cari sana sini belum ketemu juga =(
  31. kok ane kaga berhasiL gan...!!! mungkin tempLate script.na beda kaLi yaa gan...!!! hehe
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.