News Ticker Widget For Blogger Recent Posts

In this post im going to tell you the Recent Posts News Ticker for Blogger Blogs.Its Simple to Add if you follow the Steps Given below Carefully.

What is News Ticker ?

News Ticker is a Scrolling Recent Posts Widget Which Appears at the Top of the Blog Like the Below Image.

How to Add this Widget?

1. Goto Blogger Dashboard --> Layout --> Add a gadget --> HTML/JavaScript (Its a best to choose Add a gadget Present in top )

2. Now paste the Below code on the HTML/Javascript.

<table border="0" cellspacing="0" cellpadding="0" style="width:901px;background:url(http://oi62.tinypic.com/zyat7a.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.gobloggertricks.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>

 Customize: Replace gobloggertricks with your Blog name.
                  Change 10 With the Number of Posts you want to scroll.

3. Now Save the Widget. That's All.

If you have any doubts please comment below.