Bismillah, Alhamdulillah

Skip to Content

New Popular Post for Blogger With Animation

August 10th, 2011

Bismillah, Alhamdulillah. Long time ago I made Popular post for blogger using Json But now blogger made popular post from Blogger Stats . Now I made Popular Post for Blogger with animation. This widget I made from my Recent Post with animation using simple spy.
Popular Post with Animation for Abu Farhan


Demo

This script very easy to install, you only have to put the script to the new Gadget

  • Login to Blogger Dashboard and navigate to Design – Page Elements
  • Click “Add Gadget” and Choose “Popular Posts”, Customize the gadget with more than 4 popular post will show–> “Display Up to” … Posts

    (If you already have this gadget skip this step)
  • After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
  • Put all script bellow to the “Content” of HTML/Javascript Gadget
  • Done- your popular post now with animation

Explanation of Popular Post with Animation

<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>

Don’t Copy This Post because this Original from my Blog (www.abu-farhan.com)
Please read Copyright of All post at the Footer.


Categories: Content Slider, Popular Post for Blogger, Widget

Tags: , , ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

74 Responses to “New Popular Post for Blogger With Animation”

  1. It’s appropriate time to make some plans for the future
    and it is time to be happy. I’ve read this post and if I could
    I desire to suggest you some interesting things or suggestions.
    Maybe you could write next articles referring to this article.
    I desire to read more things about it!

  2. Thank alot for this information, i really appreciate it.

  3. thanks alot for this information, i really appreciate it.

  4. Giorgio says:

    Hello Abu, would it work with the Blogroll widget? it wouls be a nice effect! Thank you

  5. kok says:

    http://xn--q3caabaax4nf0m1a3e.blogspot.com/
    don’t show image with another host image
    if post not have image post with google
    this dose working

  6. sreenivasan says:

    frompixeltopicture.blogspot.in

    hi pal visit the website above

  7. ary widodo says:

    Sorry mas farhan I want to ask, does not need to edit the html we ..?.

Leave a Reply


seven + = fourteen

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen