Show Recent Blog Posts as Breaking News in Scrolling Bar

You may show your latest blog posts in scrolling bar as breaking or trending news or stories. This bar also includes Email Newsletter subscription box.

After embedding recent blog posts widget, one of our client asked us to show only title of the recent blog posts in a scrolling bar as trending news. He was using responsive blogger template and therefore, he needs to add responsive news bar.

Accordingly, I am here to share with all of you a responsive breaking news bar which will scroll the specified number of recent posts of your blogger blog as trending stories.

How to Display Recent Posts Titles as Trending Stories/Breaking News

Scrolling Bar with Subscription

Step-1:

Login to your blogger account and navigate the Template Tab.

Step-2:

Click on Edit HTML text button appears on template tab. Now, click anywhere in the template editor and press Ctrl+F to find closing ]]></b:skin> tag. Copy and paste these CSS codes just before/above ]]></b:skin>

.swtHeaderBar{/* SWT Breaking News Scrolling Bar START */
height:30px;
background:#192a3e;
width:98%;
margin:0 10px;
border: 1px solid #1ABC9C;
overflow: hidden;
}
.swtBreakingNews{
background: #1ABC9C;
float:left;
height:30px;
position:relative;
overflow:hidden;
width:66%;
padding-left:10px;
}
#swtEmailsub {
background: #1ABC9C;
width:30%;
float:right;
position:relative;
height:30px;
padding-right:10px;
}
form.swtEmailform {
background:#192a3e;
position:relative;
height:30px;
padding-top: 4px;
}
.emailText { background: url("http://img.superwebtricks.com/files/email-subscribe-button.png") no-repeat scroll 2px center #fff;
color: #444;
width: 45%;
padding-left: 18px;
}
.emailButton {cursor: pointer;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
font-weight: bold;
width: 35%; }
.swtBreakingNews marquee {
background: #ffffff;
height: 30px;
}
.swtBreakingNews marquee span {
font-size: 1.5em;
}
.swtBreakingNewsTitle {
background: #192a3e;
position:absolute;
float: left;
padding: 0 10px;
height: 32px;
line-height: 30px;
color: #FFF;
font-family: Georgia,serif;
text-transform: uppercase;
font-size: 1em;
margin-right: 10px;
/* SWT Breaking News Scrolling Bar START
Tutorial at http://www.superwebtricks.com/?p=767 */}

Step-3:

Now, find closing </head> tag and paste the following JavaScript file just above/before it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://9e03e74125fb7ace004443ce27e5dcd1808a3961.googledrive.com/host/0B-tJ1weveGVDQWsyWjRNbHhtWFk/swtBreakingNewsScrollingBar.js"></script>

However, if you have already added the jquery.min JavaScript file then please ignore the first line.

Step-4:

Finally, find opening <header> tag and copy paste these html codes just above/before <header>

<div class='swtHeaderBar'>
<div class='swtBreakingNews'><div class='swtBreakingNewsTitle'>Breaking News</div>
<script type='text/javascript'>
var ScrollPosts =12;
var ScrollPostsWidth = 100;
var ScrollPostsDelay = 111;
var ScrollPostsDirection = "left";
var ScrollPostsArrow = "&#9992;";
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=swtRecentPostsScroller&amp;max-results=999' type='text/javascript'></script>
</div>
<div id='swtEmailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='swtEmailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Showeblogin&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='SuperWebTricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailText' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input class='emailButton' title='Register Yourself' type='submit' value='Signup'/>
</form>
</div>
</div>

Save your template and see a live breaking news bar at the top of your blogger blog. Enjoy! However, you may add the above HTML codes into a HTML/JavaScript Gadget from the Layout tab of your blogger blog.

Customization of SWT Breaking News Scrolling Bar

1) Find <input name='uri' type='hidden' value='SuperWebTricks'/> line and replace SuperWebTricks with your own feedburner feed URL name.

2) Find ScrollPosts =12; and change the value 12 to any number of blog posts you want to show as breaking news.

3) Find ScrollPostsWidth = 100; and change the value 100 to any number below 100 which denotes the width of your scrolling posts titles. I recommend you to keep it intact the default value.

4) Find ScrollPostsDelay = 111; and change the value 111 to any number which indicates the scrolling timing of posts titles.

5) Find ScrollPostsDirection = "left"; and change the direction of breaking news from left to right or up. We have not set up the direction to down as it rarely used by any website owner.