Latest/Recent Posts Pure JavaScript Scrolling Bar Widget For Blogger

After releasing many latest/recent post blogger, Latest post for labels widgets, Here we are with another widget that is coded lightly. There are many fixed bars that you are using or you blog for latest post, news or anything else like Hulo Bar, Fixed Top Bar, Simple Scrolling Recent/Latest Blogger Post Bar With Close Button” target=”_blank”>Old Latest Post Bar, Footer Bar but no this one is simple and automatically updated with your newer post title and there links that will have the same effect as other bars have.

In this post I want to share a nice stylish blogger post bar with auto scrolling that contain recent or latest post titles from your blog rss,the Widget appears anywhere on your blog either on page or post or template and I have also included a close button, May be not every visitor enjoys viewing that this bar on your page, so they deserve to be provided with an option to view or hide the bar,and it is Simply Awesome.

This recent posts widget is similar to the standard recent posts with text only but with one great twist.This gadget displays your most recent posts title with there link only that also smoothly scrolls through the posts.

Features:

1.) Stylish And Awesome Design.
2.) Pure JavaScript, No Jquery.
3.) Based On HTML, CSS And JavaScript.
4.) MARQUEE Tag Used For Scrolling Effect.
5.) Latest/Recent Post Title Will Scroll.
6.) Links To The Post Title Also Added.
7.) All Link Will Open In New Tab.
8.) Close/Hide Button Also Added For User Desire.
9.) Fully Customizable.
10.) Easy CSS And JavaScript To Read And Edit.
11.) SEO Friendly.
12.) Increase Your PageViews.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click “Save“, Now You Are Done.

<!-- Latest/Recent Posts Scrolling Bar By EXEIdeas -->
<style type="text/css">
#exe_latespost_scrolling_bar {background: #000000;width: auto;margin: 0 auto;text-align: center;color: #F40045;border-bottom: 2px solid #000;-webkit-box-shadow: #666666 0px 1px 3px;-moz-box-shadow: #666666 0px 1px 3px;box-shadow: #666666 0px 1px 3px;z-index: 999999;line-height: 1.85em;letter-spacing: 1px;}
#exe_latespost_scrolling_bar li {display:inline;}
#exe_latespost_scrolling_bar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;}
#exe_latespost_scrolling_bar a:hover{text-decoration:underline;}
#exe_latespost_scrolling_bar_close{float:right;cursor:hand;cursor:pointer;margin: 8px 15px 0 0;}
</style>
<div id='exe_latespost_scrolling_bar'> 
<script type="text/javascript"> 
function latestpostlistbyexeideas(json) { 
document.write('<marquee behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" width="95%" scrolldelay="100" direction="left" >'); 
for (var i = 0; i < json.feed.entry.length; i++) 
{ 
for (var j = 0; j < json.feed.entry[i].link.length; j++) { 
if (json.feed.entry[i].link[j].rel == 'alternate') { 
break; 
} 
} 
var EXEentryUrl = "'" + json.feed.entry[i].link[j].href + "'"; 
var EXEentryTitle = json.feed.entry[i].title.$t; 
var item = ">> <li>" + "<a href=" + EXEentryUrl + ' target="_blank">' + EXEentryTitle + "</a> </li>"; 
document.write(item); 
} 
document.write('</marquee>'); 
} 
</script> 
<script src="https://www.exeideas.com/feeds/posts/summary?max-results=10&amp;alt=json-in-script&amp;callback=latestpostlistbyexeideas"></script> 
<noscript>Allow Your JavaScript To View This Awesome Widget. {<a href="https://www.exeideas.com">+ Grab this Widget</a>}</noscript> 
<a href="#" id="exe_latespost_scrolling_bar_close" onmouseup="document.getElementById('exe_latespost_scrolling_bar').style.display = 'none'; "><img src="https://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png"/></a> 
</div>
<!-- Latest/Recent Posts Scrolling Bar By EXEIdeas -->

Customization:

1.) Change 100 To Your Desired Value To Change The Scrolling Speed.
2.) Change www.exeideas.com With Your Blog URL.
3.) Change 10 With Your Desired Latest Post Count.
4.) Add The Below CSS To Make This Bar Stick At Your Visitor’s Top.
#exe_latespost_scrolling_bar {position:fixed;left:0px;top:0px;}
5.) Save And Done.