Trik untuk memotong Snippet Popular Post

Home Widget Trik untuk memotong Snippet Popular Post

Trik untuk memotong Snippet Popular Post

Diposting oleh: Dafin defandaky pada: 14 April 2013

Kebanyakan snippet atau deskripsi populer default blogger terlalu panjang, sehingga membuat widget di sidebar tampak tidak rapi untuk tampilan dan memakan ruang yang begitu lebih. trik ini juga bisa digunakan untuk mempercantik widget populer post hasil dari kreasi sobat sendiri sebagai tambahan css agar widget populer post sobat tambah keren dan beda dari pada yang lain. langsung saja simak trik dan caranya.

1. Menggunaan Java Script

Sobat bisa menggunakan javascript berikut untuk trik ini

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

Letakkan kode Java Script tersebut diatas kode </body>

2. Menggunaan CSS

CSS untuk memotong kalimat ini ada dua model satu tanpa titik dan dengan titik, yaitu Clip dan ellipsis.

A. menggunakan css yang berakhir titik seperti cara menggunakan javascript.
kopi kede berikut:

.PopularPosts .item-snippet {
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           -o-text-overflow: ellipsis;
           -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

Kode CSS diatas letakkan saja diatas kode ]]></b:skin>

B. menggunakan css tanpa titik

.PopularPosts .item-snippet {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: clip;
}

Sama seperti kode di atas, Kode CSS diatas letakkan saja diatas kode ]]></b:skin>

mudahkan, selamat mencoba dan semoga manfaat...

Tidak ada komentar :

Kode klik emo:

$:\$

$\o/$

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag ...KODE ANDA DI SINI...
Untuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...
Untuk menyisipkan gambar, gunakan tag ...URL GAMBAR ANDA ...
Untuk menyisipkan judul, gunakan tag ...JUDUL ANDA...
Untuk menyisipkan catatan, gunakan tag ...CATATAN ANDA...
Untuk menciptakan efek tebal gunakan tag ...TEKS ANDA...
Untuk menciptakan efek huruf miring gunakan tag ...TEKS ANDA...

Konversi KodeOOT