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
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 = "✈";
</script>
<script src='/feeds/posts/default?alt=json-in-script&callback=swtRecentPostsScroller&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('http://feedburner.google.com/fb/a/mailverify?uri=Showeblogin', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' 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.