Mengurangi Jumlah Kata di Snippet Popular Post Blogger

Romeltea | Follow @romel_tea
Cara Menambah, Mengurangi, atau Mengatur Jumlah Kata di Snippet Popular Post di Sidebar Blog.

WIDGET Popular Posts atau entri terpopuler di sidebar Blog bisa disetting berupa daftar judul saja, judul dan gambar, serta judul, gambar, dan snippets (ringkasan, kutipan alinea pertama).

Jika kita menampilkan judul, thumbnail image, dan snippet, terkadang snippet (cuplikan) terlalu panjang sehingga melebihi thumbnail gambar. Jadinya tidak rapi. Contohnya di gambar ini:

Snippet Popular Post Blogger

Setelah dipotong atau diatur, maka hasilnya seperti ini:

Snippet Popular Post Blogger

CARA MENGATUR ATAU MEMOTONG SNIPPET POPULAR POSTS

Berikut ini cara mengatur, atau memotong snippet pada entri populer (popular posts) agar pas dengan lebar-panjang gambar thumbnail sehingga tampak tapi. 

Bagi yang belum pasang widgetnya, pasang dulu dengan cara:

1. Layout > Add a Gagdet > pilih "Popular Posts"
2. Konfigurasikan seperti gambar di bawah ini:

popular posts


3. Save!

MENGATUR JUMLAH KATA

Langkah berikutnya adalah mengatur jumlah snippet tadi biar "pas" dengan gambar:

1. Template > Edit HTML
2. Tambahkan (Copy & Paste) kode berikut ini sebelum kode </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>


3. Ganti angka yang merah (50) dengan jumlah karakter yang sekiranya pas dengan ukuran gambar.
4. Save Template!

Demikian Cara Mengurangi Jumlah Kata di Snippet Popular Post di Sidebar Blog.*

Sumber
Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

1 comment on Mengurangi Jumlah Kata di Snippet Popular Post Blogger

No Spam, Please!

Contact Form

Name

Email *

Message *