Widget Popular Post Animasi

Bookmark and Share
Popular Post Animasi adalah salah satu daya tarik tersendiri untuk sebuah situs. Bagaimanakah caranya membuat widget popular post animasi untuk blogspot ? Caranya sangat mudah. Sobat cukup menambahkan sedikit javascript agar popular post menjadi animasi. Dan sobat juga bisa mengutak atik sendiri agar hasilnya klop sesuai dengan template blogger sobat.
Widget Popular Post Animasi

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!

Title Post: Widget Popular Post Animasi
Rating: 100% based on 9999989 ratings. 98 user reviews.
Author: Dede Purnama

Terimakasih sudah berkunjung di blog ini, Jika ada kritik dan saran silahkan tinggalkan komentar

Related Posts Plugin for WordPress, Blogger...