Sebelumnya saya pernah mengetengahkan tutorial cara membuat widget recent posts dengan animasi spy, kali ini kita akan menambahkan animasi yang sama tapi pada widget yang berbeda yaitu pada widget popular posts.
Widget Popular posts ini sama dengan widget recent posts yang terdahulu, menggunakan script JQuery dan resource dari master blogger indonesia Abu Farhan.
Untuk lebih jelasnya silahkan lihat demo widget popular posts dengan efek animasi spy ini dengan mengklik button berikut:
Nah jika anda tertarik untuk membuat widget popular posts dengan animasi spy, silahkan ikuti tahap pembuatannya:
- Login ke akun anda
- Pada menu tata letak >> tambahkan gadget popular posts seperti image berikut:
- Kemudian klik tambah gadget lagi >> pilih HTML/JavaScript >> Salin dan tempel kode berikut pada form yang tampil
<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> - Sehingga posisi widget seperti image atau screen shoot berikut;
- Simpan dan lihat hasilnya pada blog anda!
Demikian tutorial menambhakan widget popular posts dengan efek animasi spy pada blog, Semoga bermanfaat.
Jika ingin mencoba efek lain pada widget popular posts silahkan klik link titel posts berikut:
- Widget Popular Posts Dengan Efek Marquee
- Widget Popular Posts Dengan Efek Spinning dan Zooming
- Widget Popular Posts Dengan Efek Border dan Background Color
Selamat berkreasi!
0 Komentar untuk "Widget Popular Posts Dengan Efek Animasi Spy"