Scrolling Marquee Recent Post Widget For Blogger

From the last few days, 
I was not able to regularly post new articles in my blog.

Because, I was working on creating my 1st blogger widget.

And today I am very happy as I have completed the work of my blogger widget and I'm releasing the widget here !!
It is my 1st experiment in html/css coding, and I would like to thank Sagar T Rajan of Gameryard for helping me.

Scrolling Marquee Recent Post Widget :

So, now let's move on to the widget !!
Today I am going to release a marquee scrolling recent post widget for blogger platform.     
The Live Demo Can Be Seen At The Top Of This Page (Below Header).                   

                                                             

Similar Articles In Tech Ghoul ---> Can Blogging Be A Successful Source Of Income For Students

Features :

• Scrolling widget.
• Stops on mouse hover.
• Displays your new posts.
• Nice layout.

How To Add This Widget To Your Blogger Blog :

Adding this widget to your blogger blog is very easy. Here's how :

1. Go to blogger.com and select your desired blog.
2. Go to the Layout section and select Add a Gadget.
3. From the options,scroll down and click Html/Javascript widget.
4. Copy/Paste the code given below into the widget box. [It is a big code. Be sure you copy it completely.]
5. Save the widget and You're Done !!

Similar Articles In Tech Ghoul --->Tips To Increase Your Blog's Load Speed

<table border="0" cellspacing="0" cellpadding="0" style="width:901px;background:url(http://4.bp.blogspot.com/-_sBtZVOGD34/UQa09odBmPI/AAAAAAAABtQ/LygeBTb_ANY/s1600/Untitled.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.techghoul.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>

Customizations :

1. Replace www.techghoul.com with your blog url.
2. You can change MaxPosts =10 to your desired number to increase or decrease the number of posts displayed.

Hope you liked this widget.

Please Share This Article !!

And Subscribe Me In Facebook,Twitter,Google Plus or via email. I will be coming with more html tricks for blogger. Stay Tuned !!

Incase of any trouble with this widget, please comment below !!

Akhil Pulotil

About the Author:
Akhil Pulotil is the Founder and Administrator of Tech Ghoul. He is a 17 year old boy from India. He writes articles based on technology,blogging and smartphones. You can contact him via Facebook,Twitter or Google Plus.