If you have embedded recent blog
posts widget, you can also be interested in showing only title or recent blog
posts in a scrolling bar as breaking news at the top of your blog. it works
fine if you are using a responsive blogger template.
You might need it and that is why i
am writing this post, so i can be able to share a responsive breaking news bar
to every blogger, you visitor's will be able see a scrolling specified number
of recent posts on your blog as a trending stories.
How to Show Recent Posts Titles as Breaking News
First Step: Login to your blogger
and Click Template in the dashboard
.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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiETKIU_X2FHUdtBEVChuxn6PUhh9tBm0xr4OeyfqK8sYbODizc2LLpfeir6UwqAC9vGm6PYSgVbTyBaugqpS25Y8PuVs-RBzGUSIFW97NwOBRBv8gNLns0Dy_8BEQkATp6IWzCnEROfMs/s1600/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.olamedcare.com/2015/09/how-to-create-recent-blog-posts-as.html */}
Third Step: Now, find closing
</head> tag and paste the Javascript code above 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>
If you already add the j query.min JavaScript code then ignore the first line.
Forth Step: This final stage find
the </header> tag and copy paste these HTML codes just anywhere you like
it to appear above </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>
Now save your template and
your live breaking news bar will show up on the blog.
Enjoy!!! So now you have a live
breaking news now and if its not working try to add the HTML/JavaScript Gadget
from the layout tab in your blog and paste the above code.
Restructure the SWT Breaking News Scrolling Bar
1) Find <input name='uri'
type='hidden' value='MyEduCare'/> line and replace MyEduCare with your own
feedburner fee 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 will advise you to keep the default value intact.
4) Find ScrollPostsDelay = 111; and
change the value 111 to any number it will indicates the delay timing of posts
titles.
5) Find ScrollPostsDirection =
"left"; you can change the direction which the breaking news moves
from left to right or up.
Learn Around The World **Keep Learning**Keep Smiling**Keep Sharing
