Scrolling Recent Posts News Ticker Widget For Blogger.

Recent posts news ticker widget

Every webmaster loves to make their users busy on their website and for this they use various widgets like related posts, popular post, recent posts widget etc. Today i am here with a new stylish widget which is a scrolling news ticker, it shows recent posts so that you can make your visitors busy by showing them your new innovative posts.


This news ticker is pretty cool, it looks decent on blogs and easy to install and customize. I am currently using this recent posts news ticker on one of my blog and it is looking cool on my blog. You can see its demo by using the demo link below.
 
Demo
To add this widget to your blog just follow the simple steps:

• Log in to your Blogger Account.
• Go to Layout>> Add a gadget>> HTML/JavaScript. 
• Then copy and paste the below code in HTML/JavaScript box and save it.

<table border="0" cellspacing="0" cellpadding="0" style="width:901px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLQPFay0fPPWQVvBkXANe4HmBgw9PdYBqojXXeIR-RfNkdkRalbjAqnX5sOvUFnhiYSsd0hYFGhiRFYoPP8JzLPyGkky5jWtVoULc0Gm8E_z3bZ7SNoiH-dTVQjHMJ8e2ihEk4xJ0gpHQ/s1600/hot-articles.jpg) no-repeat center left;;padding:3px 3px 3px 100px;border: 1px solid #ddd;;"><tbody><tr><td><div style="position:relative;overflow:hidden;width:895px;height:20px;" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=memoryspeed"><div id="memoryscroller" style="position: absolute; left: -101px; top: 0px;"><nobr><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script><script type="text/javascript">
var nMaxPosts =10;
        var nWidth = 100;
        var nScrollDelay = 0;
        var sDirection = "left";
        var sOpenLinkLocation = "N";
        var sBulletChar = "✿"
</script>
<script type="text/javascript">
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;

try {

sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";

if (nWidth) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
} else {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
}
if (nScrollDelay) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}
if (sDirection) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";

if (sDirection == "left" || sDirection == "right") {
sHeadlineTerminator = "&nbsp;&nbsp;";
} else {
sHeadlineTerminator = "\<br/\>";
}
}
if (sOpenLinkLocation == "N") {
sPostLinkLocation = " target= \"_blank\" ";
} else {
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"

sHeadLines = "";

for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
var objPost = json.feed.entry[nFeedCounter];

if (nFeedCounter == json.feed.entry.length) break;

for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
if (objPost.link[nCounter].rel == 'alternate') {
sPostURL = objPost.link[nCounter].href;
break;
}
}
sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}

if (sDirection == "left") {
sHeadLines = sHeadLines + "&nbsp;&nbsp;" + sPoweredBy;
} else if (sDirection == "right") {
sHeadLines = sPoweredBy + "&nbsp;&nbsp;" + sHeadLines;
} else if (sDirection == "up") {
sHeadLines = sHeadLines + "\<br/\>" + sHeadLines;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
alert(exception);
}
}</script>
<script src="http://www.thebravesandsmarts.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10" type="text/javascript"></script></nobr></div></div></td></tr></tbody></table>

Note: This widget is mainly for the header section.

Also Read: Recent comments widget with avatar and hover effect for Blogger.

Customizations: 

• To change the width of the widget change the pixels value in red.

To Enlarge the images please click on them

• To change the starting point of text change the pixel value in green.

• To change the height of the widget change the pixel value in yellow.

• To change the number of posts to show, change the value in blue.
• To change the direction of flow of text, replace left with right.
• If you want different posts separator then change the flower image in light green with your text or symbol.
• Finally the main thing replace my blog URL with your own, shown in orange.

Also Read:

• How To Check or Monitor your website traffic ?
• Beautiful Ramadan Lantern Widget for Blogger ?