Widget keren untuk popular post

Dunia Ilmu Bersama :  widget populer post keren untuk blogspot - Hai sobat, pada kesempatan malam ini saya akan berbagi sebuah widget yang keren, yaitu widget popular post untuk blog dengan 1 thumbnail dan ukuran bisa sobat sesuaikan sendiri nantinya. ok, langsung saja sobat copy script nya di bawah ini.

Berikut langkah - langkahnya :

• Yang pertama login ke blog sobat, dan buat widget popular post terlebih dahulu seperti gambar dibawah ini
  
  Tata letak -> add widget -> popular post

• Setelah itu sobat save , dan sekarang masuklah kedalam edit HTML.
  
  Tata letak -> template -> edit html
  
  Langkah berikutnya, copykan script dibawah ini tepat di atas kode </head> atau </body>
  
  Note : tekan Highlight All setelah itu tekan ctrl + c untuk mengcopy script dibawah

<style> .PopularPosts .widget-content ul{padding:0;margin-top:-10px;width:98%} .PopularPosts .item-thumbnail{margin:0;border:4px double #ddd;} .PopularPosts .item-title {padding:0;} .PopularPosts .item-title a{text-decoration:none;color:#000;font-weight:400;font-size:14px;} .PopularPosts .item-title a:hover{color:#FCA13A} .PopularPosts .item-snippet{font-size:14px;line-height:1.6em;color:#777;padding-top:10px} .PopularPosts li{border-bottom:1px solid #ddd} .PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none} .PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:170px;margin-bottom:10px;font:13px Arial;width:100%} .PopularPosts img{padding:0;} .PopularPosts .widget-content ul li{padding:10px 0;margin:0} </style> <script type='text/javascript'> //<![CDATA[ var newidth=295;var neweight=170;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)}); //]]> </script>

• Selesai sudah, sekarang tinggal sobat save dan lihat hasilnya, 

Sekian untuk artikel Widget keren untuk popular post kali ini, semoga bermanfaat.

Baca Juga :

• Cara membuat objek bergerak - Construct 2
• Solusi laptop dan komputer lemot
• Mengatasi layar laptop tidak tampil saat dihidupkan
• Animasi power point part 5
• Langkah install windows 8.1 lengkap dengan gambar