Auto Scrolling Recent Posts Gadget For Blogger

In this tutorial, I will teach you how to add Auto Scrolling Recent Posts Gadget in your blog. This is very useful gadget to show your posts scrolling on blog. This is similar to the display of recent post in your sidebar, but this has 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 jnWidth="100";
var jnScrollAmount="10";
var jnScrollDelay="50";
var jnDirection="left";
var jntargetlink="yes";
var jnnumPosts="10";
var jnBulletchar =">>>";
var jnimagebullet="yes";
var jnimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinwRNu6WnoJgYn-OLoLkOamiVmfL4-Rl9UiGD5PckmpalVRzQsnR0Hqmm3z0Ub8LcXDp6euBYTRtovd2wEwRulP7XK2wOPRfH5gO1ykXV1LUYzFixcusCpzeAn_Sti4cleS4FB3WDEyi1W/s1600/arrowe.gif";
var jnfontsize="16";
var jnbgcolor="FFFFFF";
var jnlinkcolor="FF0000";
var jnlinkhovercolor="3366CC";
</script><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" 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 And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<script type='text/javascript' src='http://dl.dropboxusercontent.com/s/fqy9x54r0lgaomx/scrolling-recent-v3-ycode.js' ></script>
<script type='text/javascript' src="http://itgooglepk.blogspot.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script>

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

And now click Save 

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  

The Widget Generator Given Below is For Just Recent Marquee Link Posts :)

                                                       Live Demo