Cara Membuat Popular Post Dengan Animasi

Bismillah Alhamdulillah pada kesempatan ini tepatnya di bulan ramadhan tanggal tujuh belas kurang lebih sekitar jam berapa yah jadi lupa deh. he he .. yah itung itung nungguin wakto sore (nga buburit) bloger widget ingin sharing sedikit tentang  Cara Membuat Popular Post Dengan Animasi...contohnya seperti tampilan di side bar blog ini.

sekarang langsung saja ke tutorial cara membuat  popular post 

Popular Post dengan Animasi

langkah pertama seperti biasa anda Add a Gadget dan pilih popular post yang telah di sediakan oleh blogger  dan jangan lupa set tampilan / display post harus lebih dari 4 post

 
Nah setelah anda add dan set popular post anda tambahin lagi  gadget HTML/Javascript caranya add Gadget dan pilih HTML/JavaScript

Setelah terbuka form nya anda ini dengan secript di bawah 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>

Dan hasilnya seperti di bwah ini  terus anda simpan dan jangan lupa letaknya harus tepat dia atas widget Popular Post yang anda tadi buat

Posisi Script dan Popular Post

Posisi Script dan Popular Post... nah mungkin itu yang saya dapat sampaikan pada kesempatan ini semoga bermanfaat dan semangat terus di duia blogger .....

About the Author

I'm Hung Duy, the founder of Xml Blogger Templates (XBT). I'm a freelance writer on topics related to Website Optimization (SEO), blogger customizations and making money online. I'm blogging since 2006 and I'm currently a guest blogger on Blogging With Success.
Follow Me on Twitter or On Facebook

Visit xmlbloggertemplates.com for more Blogger Templates

Posted in: Blogging,Tutorial,Widget