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.
Letakkan kode Java Script tersebut diatas kode
A. menggunakan css yang berakhir titik seperti cara menggunakan javascript.
kopi kede berikut:
Kode CSS diatas letakkan saja diatas kode
B. menggunakan css tanpa titik
Sama seperti kode di atas, Kode CSS diatas letakkan saja diatas kode
mudahkan, selamat mencoba dan semoga manfaat...
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, yaituClip
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 :
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
Konversi KodeOOT