Widget Popular Post Yang Di Modifikasi, Yang ini Beda!

Widget Popular Post

Sebelumnya bisa dilihat,

Widget Popular Post Yang Di Modifikasi. Part. 1
Widget Popular Post Yang Di Modifikasi. Part. 2
Widget Popular Post Warna-warni, Vertikal dan Horizontal

Lumayan lama gk update Postingan Tutorial Blogspot, untuk update kali ini masih seputar Popular post, jangan bosan-bosan ya...?!

Untuk modifikasi Popular post kali ini berbeda dengan modif-modif yang sebelumnya, yang sebelumnya itu murni CSS tapi untuk ini ada penambahan jQuery dan javascript. Judulnya saja sudah beda. *smile

Cara membuatnya.
1. Login ke Akun blogger
2. Klik Template
3. Klik Edit HTML
4. Klik Proceed
5. Centang Expand Widget Templates
6. Cari taq ]]></b:skin> (gunakan kontrol F untuk memudahkan pencarian)
7. Setelah dapat lalu masukkan kode dibawah ini diatas taq ]]></b:skin>  

.PopularPosts .widget-content ul li { padding: 0; list-style:none; background: #eee; margin: 10px 0px; border:0; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; } .PopularPosts .item-title { padding: 0 5px; } .PopularPosts .item-snippet { padding: 0 5px 5px; } .PopularPosts .widget-content ul li { overflow: hidden; } .PopularPosts .widget-content ul li:hover { background: #000; } .PopularPosts .widget-content ul li:hover .item-snippet { color: #fff; } .PopularPosts .widget-content ul li:hover .item-title a { color: #fff; } .PopularPosts .item-thumbnail { height: 100px; overflow: hidden; margin-right:0; } .PopularPosts img { width:100%; margin-top: -40px; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; } .PopularPosts ul li:hover .item-thumbnail img { margin-top: -150px; }

8. Lalu masukkan kode ini sebelum taq </head>

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

9. Terakhir masukkan kode ini sebelum taq </body>

<script type='text/javascript'> //<![CDATA[ var newSize = 296; // this is the new thumbnail size, you can change this $(".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>

DEMO

(lihat pada widget  Popular Posts)

(sayang banget widget  Popular Postsnya telah dihapus) 

Sumber:
http://www.softglad.com