ow to Add Auto Scrolling - Recent Posts Widget (v3) For Blogger/Blogspot Blogs

ow to Add Auto Scrolling - Recent Posts Widget (v3) For Blogger/Blogspot Blogs

Recently I have posted an article on how to make an auto scrolling text/image widget. Now if you want to display your blog posts in this way either at the top or at the bottom of your blog, then you can use this new widget:

To add this widget to your blog, log in to Blogger
Go to Layout -> Add a Gadget -> HTML/JavaScript type, then add this code to it.



<script type='text/javascript'>
var w2bWidth="100";
var w2bScrollAmount="1";
var w2bScrollDelay="95";
var w2bDirection="left";
var w2btargetlink="";
var w2bnumPosts="15";
var w2bBulletchar =">>>";
var w2bimagebullet="yes";
var w2bimgurl="Your Image URL";
var w2bfontsize="18";
var w2bbgcolor="#E0FFFF";
var w2blinkcolor="#0000A0";
var w2blinkhovercolor="#FF0000";
</script>

<script type="text/javascript" src="http://yourjavascript.com/81304115189/Computer tips and tricks.js"></script>

<script type='text/javascript' src="Your Blog Feed URL?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=15" ></script>


First, simply add and test the code without changing anything from the below (For Live Demo) [ofcourse you have to add the blog address], then after watching it live on your blog, make further adjustments :)

Many Bloggers are asking for Setting out Font Size, Background color, Image Bullet, and so on.

I include all feathers in this widget and redesigned for U. I hope you are happy with this one also....


For Live Demo

<script type='text/javascript'>
    var w2bWidth="100";
    var w2bScrollAmount="1";
    var w2bScrollDelay="95";
    var w2bDirection="left";
    var w2btargetlink="";
    var w2bnumPosts="15";
    var w2bBulletchar =">>>";
    var w2bimagebullet="yes";
    var w2bimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJkWyKJP3R_TNmwhb5YlkKHI9eITppI3CWsHzLfju0p0yoLo-BnjOCrrc93uizlrif82Ir7ZNX-NpJSOTKjaAV2vAjd6e5IRtDdi4_uhswmaHKTrEdu4RqULSP5KNCwcwEMLCCyK_Mf8s/s1600/JerryAni.gif";
    var w2bfontsize="18";
    var w2bbgcolor="#E0FFFF";
    var w2blinkcolor="#0000A0";
    var w2blinkhovercolor="#FF0000";
</script>

<script type="text/javascript" src="http://yourjavascript.com/81304115189/Computer tips and tricks.js"></script>
<script type='text/javascript' src="http://f2day.blogspot.com/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=15" ></script>


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.