Memodifikasi Postingan Populer di Blogger 5

Melanjutkan artikel sebelumnya yaitu Membuat Postingan Populer di Blogger yang tampil seadanya (sesuai default dari blogger),maka untuk menarik perhatian para pengunjung blog dan mempercatik tampilan blog kita, kali ini saya akan membahas cara Memodifikasi Postingan Populer tersebut agar lebih menarik.Postingan Populer (Populer Post) dengan default dari blogger akan tampil dengan snippet postingan yang cukup lumayan panjang dan akan memakan ruang pada blog kita,nah agar tampilan Postingan Populer tersebut lebih menarik dan tidak memakan banyak ruang,maka kali ini saya akan mencoba memberikan trik Memodifikasi Postingan Populer di blogger tersebut dengan menabahkan kode css untuk merubah tampilan dan kode jquery untuk memotong snippet postingan agar lebih pendek.Ini merupakan salah satu trik dari sekian banyak trik untuk membuat blog anda enak di lihat dan menarik perhatian penggunjung.

Dan adapun langkah-langkah Memodifikasi Postingan Populer di Blogger adalah:

1. Baca artikel sebelumnya Membuat Postingan Populer di Blogger dan ikuti langkah-langkahnya.

2. Setelah selesai langkah 1 Tambahkan kode css di bawah ini dan pastekan diatas kode ]]></b:skin> atau pada html/javascript gadget setelah kode Postingan Populer gadget.

/******Populer Post Css Start******/

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NClLKo0uNxNQgt5m10jZWY4sfDk_LnxidOTYD1KoG5Cmgvthfi9oQO9zHY-txu9uHe2Mzq8Fa28fVoLfPCIvXKvKG4QfWcsAwcCNdA6-PcjN70_IOr6uVG6tJ9qENe5SFuC7yMZxCuU/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 0px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:0px #000;
background:#f1f1f1;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
color:#FFF8DC;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
/****** Populer Post Css End By bambangpage.blogspot.com ******/

3. Pastikan anda telah memiliki jquery main js terinstall di templete anda atau jika anda tidak memilikinya copy kode di bawah ini dan pastekan diatas kode </head:> .

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

4. Copy kode Jquery dibawah ini dan patekan diatas kode </body> (untuk memotong snippet Postingan Populer dan merubah ukuran thumbnail).

<script type='text/javascript'>
//<![CDATA[
// Memotong Postingan Populer snippets dengan jQuery / MS-potilas 2012
// Letakan kode ini di html/javascript gadget (setelah Postingan popular gadget) atau di atas </body>.
// Baca http://bambangpage.blogspot.com/2012/07/Modifikasi-Postingan-Populer.html

$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,55); // disini anda bisa mengganti jumlah karakter yang dipotong 
  var j=txt.lastIndexOf(' ');
  if(j>42)
     $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
 var newSize = 72;  // disini anda bisa mengganti ukuran thumbnail 

    $(".popular-posts .item-thumbnail img").each(function() {
        var oldSize = $(this).attr("width");
        $(this).attr("width", newSize); $(this).attr("height", newSize);
        $(this).attr("src", $(this).attr("src").replace("/s"+oldSize+"-c/", "/s"+newSize+"-c/"));
    });

//]]>
</script>

Keterangan :

* Untuk mengatur jumlah karakter yang ingin anda potong,anda bisa menggati ( 55 ) yang berwarna biru dengan angka yang anda inginkan.

* Untuk merubah ukuran thumbnail anda bisa mengganti angka( 72 ) yang berwarna hijau dengan angka yang anda inginkan.

Selesai dan selamat mencoba......