Scrolling Recent Posts Widget For Blogger

Pro bloggers and webmasters have installed the RECENT POSTS widget to help the visitors and readers know about their latest and most recent posts. The RECENT POSTS widgets are of different types some are simple and some are like scrolling and other animations. The widget made up of animations that always attracts the visitors so that it also play a kind of a role in increasing traffic. So today we are here with the RECENT POSTS widget which have scrolling feature. By following this tutorial you can help your followers to know about your latest content in style. 

• Also Read This: Recent Posts Widget For Blogger

How It Works?

Scrolling Recent Posts widget works with the jQuery like the TICKER. You might have seen the news in TICKER scrolls one by one. Similarly Scrolling Recent Posts widget works as it. The Each snippet is loaded with the post title, post thumbnails, post published date & also the number of comments. Moreover when you hover the mouse over each snippet thumbnail it rotates. Check out the DEMO below:

DEMO

Add Scrolling Recent Posts Widget In Blogger:

Follow the tutorial to install the Scrolling Recent Posts widget in blogger:

1. Log-in to your Blogger Dashboard.

2. Go to Layout > Add A Gadget.

3. From the list select HTML/JAVASCRIPT.

4. Add the following code in HTML/JAVASCRIPT window.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script>
<style type="text/css" media="screen">
#helperblogger-widget
{
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}
#helperblogger-widget ul
{
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#helperblogger-widget li
{
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://lh6.googleusercontent.com/-A6a829gqfDQ/T3xppy6MlI/AAAAAAAACFE/RrOao4P11Uk/
s1600/helperblogger.com-post.jpg) repeat-x;
border: 1px solid #ddd;
}
#helperblogger-widget li a
{
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#helperblogger-widget img
{
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#helperblogger-widget img
{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#helperblogger-widget img:hover
{
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyzZdEI0VSrdaqJin36N_FoPgRUAn5631QwN3DXGs_iU22rDHQfXkcoCRqDV7R6TwSztNmx16p3bziN0kdXyFM7bBejjhep-GFXtiG0rzmJ-r3hyhyphenhyphenNZ1cHMoQfm0oMmicO7dNI9mGHc/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyzZdEI0VSrdaqJin36N_FoPgRUAn5631QwN3DXGs_iU22rDHQfXkcoCRqDV7R6TwSztNmx16p3bziN0kdXyFM7bBejjhep-GFXtiG0rzmJ-r3hyhyphenhyphenNZ1cHMoQfm0oMmicO7dNI9mGHc/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyzZdEI0VSrdaqJin36N_FoPgRUAn5631QwN3DXGs_iU22rDHQfXkcoCRqDV7R6TwSztNmx16p3bziN0kdXyFM7bBejjhep-GFXtiG0rzmJ-r3hyhyphenhyphenNZ1cHMoQfm0oMmicO7dNI9mGHc/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyzZdEI0VSrdaqJin36N_FoPgRUAn5631QwN3DXGs_iU22rDHQfXkcoCRqDV7R6TwSztNmx16p3bziN0kdXyFM7bBejjhep-GFXtiG0rzmJ-r3hyhyphenhyphenNZ1cHMoQfm0oMmicO7dNI9mGHc/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyzZdEI0VSrdaqJin36N_FoPgRUAn5631QwN3DXGs_iU22rDHQfXkcoCRqDV7R6TwSztNmx16p3bziN0kdXyFM7bBejjhep-GFXtiG0rzmJ-r3hyhyphenhyphenNZ1cHMoQfm0oMmicO7dNI9mGHc/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.mytutorialscafe.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'>
</script>
</div>

5. Click “SAVE”.

You are all done. refresh your blog to see the recent posts scrolling just perfectly.

Customization:

1. Change "http://www.mytutorialscafe.com" to your own blog/site name.

2. limitspy=4; means that 4 recent stories will be shown in the widget. Yuo can change it to the number of stories you want to show. 

3. intervalspy=4000; shows the time interval of the stories appearing in the widget, if you decrease, the speed will be fast and if you increase the speed will be slow. 

That’s All.

Happy Blogging.

Need Help?

If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. Peace, blessings & cheers.! :)