Nah..bagaimana cara membuat popular post menjadi animasi ? Silakan sobat simak langkah - langkahnya berikut ini :
1. Login ke account blogger sobat
2. Jika sobat belum ada gadget Popular Post silakan tambahkan gadget tersebut. Jika sudah menambahkan gadget ikuti langkah selanjutnya.
3. Tambahkan gadget HTML/Javascript, lalu masukkan script berikut ini
<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>
4. Simpan gadget dan silakan lihat hasilnya
Untuk DEMO nya bisa sobat lihat DISINI
Nah..semoga dengan tutorial cara membuat popular post animasi ini bisa membuat situs sobat kelihatan makin oke dan profesional. Silakan sobat praktekkan
Anda baru saja membaca artikel yang berkategori Tips Blogging dengan judul Widget Popular Post Animasi. Jika anda rasa artikel ini bermanfaat, silakan sebarkan dengan meninggalkan URL http://3hsoftcom.blogspot.com/2012/08/widget-popular-post-animasi.html. Terima kasih!
Rating: 100% based on 9999989 ratings. 98 user reviews.
Author: Borneo08
Terimakasih sudah berkunjung di blog ini, Jika ada kritik dan saran silahkan tinggalkan komentar
