Popular Post Widget Dengan Animasi

Bismillah, Alhamdulillah. Sudah lama saya sebenarnya ingin jadi Guest Author di Blognya Kang Rohman, baru kali ini ada kesempatan dan diperbolehkan Kang Rohman. Widget kali ini adalah Popular Post Dengan Animasi. Sekarang Blogger telah membuat popular post dari Blogger Stats . Sekarang saya membuat Popular Post Untuk Blogger dengan animasi.

Silahkan lihat Demo

Script ini sangat mudah tinggal masukkan Script di bawah ke dalam "Gadget" Blogger

• Masuk ke Blogger Dashboard dan Pilih Design - Page Elements
• Klik "Add Gadget" dan pilih "Popular Posts" jumlah popular postingan harus lebih banyak dari 4 (Jika sudah ada gadget ini jangan masukan lagi)
• Setelah anda mempunyai Popular Post Gadget kemudian klik "Add Gadget" lagi dan pilih "HTML/Javascript"
• Letakan semua script di bawah ke dalam "Content" dari HTML/Javascript Gadget
• Selesai, semua otomatis menjadi Popular post mempunyai animasi     

                                                                                            

<style type="text/css" media="screen">

#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;

}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
color:#A5A9AB;
font-size:1em;
margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}

#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}

#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

a img {
border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

• Kemudian Simpan Template

Jangan copy postingan ini, ini original dalam bahasa inggirs pada New Popular Post for Blogger With Animation