How to Create Recent Blog Posts as Breaking News in Blog Header
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.nosecretmedia.info/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
Comments