How To Add Animated Scrolling Recent Post Widget In Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Animated scrolling recent post widget can enhance your Blogspot blog beauty. Its very easy to set animated scrolling recent post widget in your Blogspot blog. This auto scrolling recent post widget only scroll highest 4 most with thumbnail and summery. This widget is usually placed at sidebar not at footer

Go to Blogger > Design

Now go to Page Element and click on "Add A Widget" > "HTML/Javascript widget" (position does not matter)

Now paste the following code in the widget and save it

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwid1oqIIVjswIe08n5VEy2xlE_KkEuNH4DGMNIVOk8Jge9rSXuhK5PG7XAfL77m71yq8xydD2ScoB9KZDH3USwbwXEzcupUGMgxXpxujOoNVYwvYE4ajuqFlN5OQtvhtf7T6NpePUujdg/s1600/bdlab-blogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.edutechnology.net/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='https://rafiblog.googlecode.com/svn/autoscrolling.js' type='text/javascript'></script>
</div>

You will have to change the Blog URL replacing your blog URL

If you like this please share this tutorial

Tweet

Animated scrolling recent post widget can enhance your Blogspot blog beauty. Its very easy to set animated scrolling recent post widget in your Blogspot blog. This auto scrolling recent post widget only scroll highest 4 most with thumbnail and summery. This widget is usually placed at sidebar not at footer Go to Blogger > Design Now go to Page Element and click on "Add A Widget" > "HTML/Javascript widget" (position does not matter) Now paste the following code in the widget and save it <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <style type="text/css" media="screen"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:350px; } #spylist ul{ width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwid1oqIIVjswIe08n5VEy2xlE_KkEuNH4DGMNIVOk8Jge9rSXuhK5PG7XAfL77m71yq8xydD2ScoB9KZDH3USwbwXEzcupUGMgxXpxujOoNVYwvYE4ajuqFlN5OQtvhtf7T6NpePUujdg/s1600/bdlab-blogspot-com.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .spydate{ overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } --> </style> <script language='JavaScript'> imgr = new Array(); imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[1] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[2] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[3] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 70; thumbheight = 70; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://www.edutechnology.net/"; limitspy=4 intervalspy=4000 </script> <div id="spylist"> <script src='https://rafiblog.googlecode.com/svn/autoscrolling.js' type='text/javascript'></script> </div> You will have to change the Blog URL replacing your blog URL If you like this please share this tutorial