Blogger Tuts
Sabtu, 07 Juli 2012

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?

31 komentar:

  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.

    BalasHapus
    Balasan
    1. mudah2an apa yang saya share ada manfaatnya sob..

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

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

    BalasHapus
    Balasan
    1. yang pake kode CSS .thumb img bukan?

      Hapus
    2. yang pake data:post.snippet mas :)

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

    BalasHapus
    Balasan
    1. Tambahkan kode dibawah sebelum ]]></b:skin>

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

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

      Hapus
    2. Makasih kang, hebat lah :)

      Hapus
  5. sederhana tapi besar fungsinya kang..

    BalasHapus
  6. oalah ternyata tricnya pake script jquery :D

    BalasHapus
  7. Wow......

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

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

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

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

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

    BalasHapus
    Balasan
    1. Pan rubah jadi KI xixixixix :)

      Hapus
  12. Makasih tutornya kang, segera dicoba :D

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


    text-overflow: ellipsis;

    ;)

    BalasHapus
    Balasan
    1. Wah, patut dicoba nih sob...

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

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

    BalasHapus
  16. Muatep Kang. lup u pull. heheheeeeeeeee

    BalasHapus
  17. sederhana tapi hasilnya... Ruar biasaaa

    BalasHapus
  18. gan sya mo buat nya ke samping gimana caranya??

    BalasHapus
  19. mantap banget nih..layak untuk dipraktekkan

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">... KODE ...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">... KODE ...</i>
Untuk menyisipkan catatan, gunakan [catatan].. TEKS ...[/catatan]
Untuk menyisipkan gambar, gunakan [img]URL GAMBAR[/img]

Dilarang menulis link aktif... link aktif secara otomatis akan terhapus dari komentar.

Sebelum menyisipkan kode silahkan gunakan Tool Konversi Kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar

Konversi Kode di SiniTop Komentator