Auto Scrolling Recent Posts Widget For Blogger / Blogspot

If you have a lot of post on the blog, or if you want to show everyone your list of favorite books, but have little space in the sidebar widget this will be a great help to you. This post explains how to add auto scrolling (marquee) recent posts Widget on his blog that looks good on your blogspot blog. This is similar to the display of recent post in your sidebar, but this will have a marquee in this widget. Now if you want to show your blog in this way, either on top or bottom of your blog, then you can use this new widget:

Live Demo

How to Install Auto Scrolling Recent Posts Widget

Adding The Widget To Blogger

Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget

Copy the following code and paste inside an HTML/JavaScript widget

<script type='text/javascript'>
var w2bWidth="100";
var w2bScrollAmount="10";
var w2bScrollDelay="50";
var w2bDirection="left";
var w2btargetlink="yes";
var w2bnumPosts="10";
var w2bBulletchar =">>>";
var w2bimagebullet="yes";
var w2bimgurl="http://www.dan-dare.org/Dan%20FRD/JerryAni.gif";
var w2bfontsize="16";
var w2bbgcolor="ffffff";
var w2blinkcolor="161cde";
var w2blinkhovercolor="db21b3";
</script>
<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<a href="http://24work.blogspot.com/" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script type='text/javascript' src='http://24work.ucoz.com/24work-blogspot/scrolling-rece/test/24work-rpscroller.js' ></script>
<script type='text/javascript' src="http://bdlab.blogspot.com/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10" ></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.


And now click Save 





Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size   

ScrollAmount:	(0 = No Scroll)
ScrollDelay:	(0 = MaxScrollSpeed)

You can only modify the code with red color (variables) according to your requirements, for ex. in case of "var w2bScrollDelay", lower the number, higher  the speed.

How to Install This Widget On 'Blogger' ?

1. Customize Options in Given Widget Generator Form
2. Click on Generate Button
3. Click Preview** Button to see your widget Preview
4. Finally Click Add to Blogger Button to add this widget on Your blog

**Note:- After changing any values, First Click Generate Button and then See Your Preview

 Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size  

Automatic scrolling Recent posts widget will give scrolling of post titles with links

Live Demo

This widget has automated MARQUEE Effect will result scrolling titles

<script style="" src="http://24work.ucoz.com/24work-blogspot/scrolling-rece/test/24work-recentpostsscroller.js"></script>
<script style="" >
var nMaxPosts = 10;
var nWidth = 100;
var nScrollDelay = 175;
var sDirection = "left";
var sOpenLinkLocation = "N";
var sBulletChar = ">>";
</script>
<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<a href="http://24work.blogspot.com/" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style="" src="http://bdlab.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " ></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.


And now click Save 

How To Add This Widget :

1. Customize Bellow form and Click on Generate button.

2. And Click Add to Blogger button to add this widget to your blog.

Many thanks to Harish for making this code and I just tested and modified to work on blogger