Friday, August 17, 2012

How to Add Moving Popular Posts in Blogger

Wants to add a moving popular post in your Blogger? The trick is very simple but it will create a nice impression of your blog. Most probably you already noticed my popluar posts are moving. If you are interested to add  the same type of moving popular posts widget to  your blogger then this post is for you. The process is very simple. Just follow the simple step.


Go to your Blogger's Dashboard  >> Select layout >> Add a Gadget : Popular Posts ( select more then 4 posts) >> Again Add a Gadget : HTML/Java Script >> Paste the code in java Script Gadget  (given Below). Save the Arrangement. This is it. As simple is that.Your Java Script code is given below.





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

    

6 comments:

  1. It's really great, I try to learn HTML more time, but I cannot learn fully it. Can I change this search box color code?.....SEO tips

    free antivirus download

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. http://www.Saeedbaba.com

    nice post and nice blog

    ReplyDelete
  4. thanx bro
    visit our blog
    http://rwebking.blogspot.in/

    ReplyDelete
  5. Thanks brother. I licked it very much. I am making a blog about my country and the places I have visited. Please visit it http://bangladeshinmyeyes.blogspot.com Have a nice day.

    ReplyDelete

Recommended Post Slide Out For Blogger

Infolinks In Text Ads