How to Add Auto Scrolling Recent Post Bar on Blogger Blog?

Recent post widget is a very important thing for a Blog. Visitors can easily see the latest content of your Blog clicking on the link of recent post widget. And if the widget is auto scrolling like this then how do you feel? I think, it will make to your Blog more attractive and professional to look at. So, if you want to add the widget you must need to log into your Blogger Blog with your Google account and just follow the instructions given below.


1. Go to Blogger Dashboard >> Layout

2. Click on Add a Gadget link above right side of layout (like below screenshot of new version)

3. Scroll down the Add a Gadget window and click on HTML/JavaScript (Like below Screenshot of new version)

4. Keep blank the Title box.

5. Copy and Paste the below HTML code into the Content field.

<script type='text/javascript'>
var jnWidth="50";
var jnScrollAmount="1";
var jnScrollDelay="0";
var jnDirection="right";
var jntargetlink="yes";
var jnnumPosts="10";
var jnBulletchar =">>>";
var jnimagebullet="yes";
var jnimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI2IecL1EOeC0aL1JykzvmdqeGkBdoY2WECdnnz4tOPSHatASF_o6WuDusVLMspl3hL_FJb6S8LzRSBCGhDBWGTz0-DZUiyEU_Iv1CkPIovJmdLTTN_VRhA9DUKgVxvYY-HMmt4h99euyV/s1600/cartoon-1.gif ";
var jnfontsize="14";
var jnbgcolor="transparent";
var jnlinkcolor="#FFFF00 ";
var jnlinkhovercolor="3366CC";
</script>
<script type='text/javascript' src='https://sites.google.com/site/thisismydropboxokay/files/advance%20scrolling.js' ></script>
<script type='text/javascript' src=" http://dynamicblogr.blogspot.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script>

6. Click Save button.

7. Now drag and drop the Gadget just below the Header. 

Note: (1) Replace carefully on this highlighted code " http://www.dynamicblogr.blogspot.com/ " with your Blog URL.

(2) You can change the small cartoon image with your own image changing the blue colour image URL.

(3) You also can change Width, Speed, Direction, Font size, Background color, Link Colour of the widget. You will see these options between "var jnWidth="100" to "var jnlinkhovercolor="3366CC" in the script. 

(3) To edit the options you need to be very careful. Otherwise the script may not work properly. 

Ok, you have done !! See View Blog.

** If you face any problem to add this please leave comment into the comment box. I will try my best to help you every time.