How to Add Moving Popular Posts in Blogger Blog

How to Add Moving Popular Posts in Blogger Blog

 Wants to add moving/animated stylish popular post feature in your Blogger? The trick is extremely easy however it will produce a pleasant impression of your diary. If you're interested to feature the same style of moving common posts contraption to your blogger then this post is for you. The method is extremely easy. Simply follow the easy steps.

1. Login to your Blogger account.

2. Click on Dashboard >> Layout.

3. Click on Add a Gadget.

4. Select HTML/Javascript widget.

5. Paste the following code and Save.

<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="https://sr-site.googlecode.com/files/movingpopularpost.js" type="text/javascript"></script>

You are done. You can customize the size of the moving popular post. Just find width, height, color section and change it according to your need.

Anda baru saja membaca artikel yang berkategori SEO Tips dengan judul How to Add Moving Popular Posts in Blogger Blog. Anda bisa bookmark halaman ini dengan URL http://msr-site.blogspot.com/2013/03/how-to-add-moving-popular-posts-in.html. Terima kasih!

Ditulis oleh: Unknown - Friday, March 29, 2013