Memotong Snippet Popular Post di Blogger

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?
Berita Lebih Baru Berita Lebih Lama
  • Surga Kenari
    Profil: https://www.blogger.com/profile/13268143815189957248
    07 Juli, 2012

    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.

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Juli, 2012

      mudah2an apa yang saya share ada manfaatnya sob..

  • Jane Doe
    Profil: https://www.blogger.com/profile/04233884732688447822
    07 Juli, 2012

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Juli, 2012

      mencoba mencari sob.... :)

  • Putra
    Profil: https://www.blogger.com/profile/17421858768793419293
    07 Juli, 2012

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Juli, 2012

      yang pake kode CSS .thumb img bukan?

    • Putra
      Profil:https://www.blogger.com/profile/17421858768793419293
      08 Juli, 2012

      yang pake data:post.snippet mas :)

  • Hade Pisan
    Profil: http://hadepisan.com
    07 Juli, 2012

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Juli, 2012

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

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

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

    • Hade Pisan
      Profil:http://hadepisan.com
      07 Juli, 2012

      Makasih kang, hebat lah :)

  • Gopar
    Profil: http://gopar-site.blogspot.com
    08 Juli, 2012

    sederhana tapi besar fungsinya kang..

  • Unknown
    Profil: https://www.blogger.com/profile/04575830113801171547
    08 Juli, 2012

    izin nyimak sob

  • Fahmi Athailla
    Profil: https://www.blogger.com/profile/06751958408119428110
    10 Juli, 2012

    oalah ternyata tricnya pake script jquery :D

  • SND
    Profil: http://eds91.blogspot.com/2012/07/new-style-threaded-comments.html
    11 Juli, 2012

    Wow......

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

  • Admin
    Profil: https://www.blogger.com/profile/13669907216529647030
    11 Juli, 2012

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

  • Unknown
    Profil: https://www.blogger.com/profile/17968898638199549206
    13 Juli, 2012

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

  • Kang Muroi
    Profil: https://www.blogger.com/profile/15022422809113377143
    13 Juli, 2012

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

  • Beben Koben
    Profil: https://www.blogger.com/profile/08754225607191914278
    14 Juli, 2012

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      25 Juli, 2012

      Pan rubah jadi KI xixixixix :)

  • Blue Magazine Plus
    Profil: http://www.mytemplatezone.com/2012/07/blue-magazine-plus.html
    15 Juli, 2012

    Makasih tutornya kang, segera dicoba :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      25 Juli, 2012

      Sama2 sob.. silahkan coba2

  • Sodikin Kurniawan
    Profil: https://www.blogger.com/profile/09325774355575553519
    24 Juli, 2012

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


    text-overflow: ellipsis;

    ;)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      25 Juli, 2012

      Wah, patut dicoba nih sob...

  • ketagihan baca
    Profil: http://ketagihanbaca.blogspot.com/
    14 Agustus, 2012

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

  • Dayz
    Profil: http://om-dayz.blospot.com
    28 Agustus, 2012

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

  • Unknown
    Profil: https://www.blogger.com/profile/02886967828645011046
    18 September, 2012

    Muatep Kang. lup u pull. heheheeeeeeeee

  • rumahexcel
    Profil: http://www.rumahexcel.com
    01 Oktober, 2012

    sederhana tapi hasilnya... Ruar biasaaa

  • 90animax
    Profil: http://90animax.com
    04 November, 2012

    gan sya mo buat nya ke samping gimana caranya??

  • arminapen
    Profil: https://www.blogger.com/profile/08159159738158624053
    08 November, 2012

    mantap banget nih..layak untuk dipraktekkan

  • visit my blog
    Profil: http://official-seller.blogspot.com
    11 November, 2012

    ok, thanks..

  • Anonim
    Profil:
    18 Juni, 2013

    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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      15 September, 2013

      sebenernya kasian ke dianya sih :)

  • Anonim
    Profil:
    18 Agustus, 2013

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      15 September, 2013

      itu di CSS sidebar nya

  • Regi Ademoelya
    Profil: https://www.blogger.com/profile/17186357913239879297
    15 September, 2013

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      15 September, 2013

      menuju TKP sob

  • no data
    Profil: https://www.blogger.com/profile/13465796310160423114
    18 Oktober, 2013

    wow keren kang!
    - salam damai -

  • Unknown
    Profil: https://www.blogger.com/profile/03028304356873120390
    18 Oktober, 2013

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

  • Anonim
    Profil:
    10 Desember, 2013

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

  • Anonim
    Profil:
    10 Desember, 2013

    HELP me Kang Ismet

  • Ana Sriwahyuni
    Profil: https://www.blogger.com/profile/03989604436443041642
    17 Januari, 2014

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

  • Fauzi Ramadhan
    Profil: https://www.blogger.com/profile/00429906894727165687
    19 Februari, 2014

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

  • Blogger Sulawesi
    Profil: https://www.blogger.com/profile/06214169296760909532
    27 Juli, 2014

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

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
46 Komentar