HEADLINES:-

Simple horizontal scrolling recent post news ticker widget for blogger

Every blogger loves to display new things in their blogs and also wants to display recent posts to blog visitors. This can be easily achieved by blog News Ticker. Today I will show you how you can make a simple JavaScript horizontal news ticker for your blog. The script will grab your recent posts list and display as a news ticker.

How to add news ticker to my Blog template?

Step 1: Login to Blogger and Select your blog

Step 2: Now from dashboard select "Layout"

Step 3: Now click on "Add a Gadget" and

Step 4: Add Html/JavaScipt

Step 5: Now copy the following code and paste in Html/JavaScript

<script type='text/javascript'>
var w2bWidth="100";
var w2bScrollAmount="1";
var w2bScrollDelay="150";
var w2bDirection="left";
var w2btargetlink="yes";
var w2bnumPosts="5";
var w2bBulletchar =">>>";
var w2bimagebullet="yes";
var w2bimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGftDyCi_wEs5Y4ojrHCsMkLQ-zbMvVa7jL6nLW782of9wx9WHWTCgTE2hdC6XaLlImtHqsdzBL228rdZ1ORLD2Mzdi5thG-hP-YI4jlr14abl7oo-1Dxu4MMNHSOvpQsrgYfECVFAcZQ/s1600/NAV2.png";
var w2bfontsize="14";
var w2bbgcolor="transparent";
var w2blinkcolor="333333";
var w2blinkhovercolor="3366CC";
</script><br />
<script type='text/javascript' src='https://www.opendrive.com/files/M18yMTMzNzE2X3hGNmlpXzE4ZmI/smritirogi-rpscroller-v3.js' ></script><br />
<script type='text/javascript' src=" http://studyinfozone.blogspot.com//feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10"></script>

Step 6: Save it

Step 7: Place this Html/JavaScript widget before "Blog Post" in layout and click on "Save Arrangement".

If you want to change the scroll speed then modify the "w2bScrollDelay" value.

If you want to increase the number of post in ticker then modify the "w2bnumPosts" value. 

Replace http://studyinfozone.blogspot.com with your own blog URL

If you want to change text color then modify the "w2blinkcolor" value.

If you want to change the text link hover color then modify the "w2blinkhovercolor" value.

If you want to change the font size then modify the "w2bfontsize" value.

1 comment: