Suppose you are blogging about technology blogs, news articles etc, then it is good to use headlines notification bar that may catch your visitors attraction towards your post. Visitors need not to scroll page to get new story title, because it will appears automatically in the specified bar as headlines.
There are some awesome merits of using headlines bar or auto scrolling marquee bar in your blogger. First of all, visitors easily get on your recent posts. They do not have to scroll your page to get posts of recent days. And visitors can visit your site for long time, because there is most chance of clicking headlines bar by visitors.
Please go through the given steps to add this marquee headlines bar on your blog.
You can see demo here
Step 01: Add ajax Google api and a javascript embedded code into just between <head> and </head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/><script src='https://googledrive.com/host/0B-GuAkK2nj5gVEF1NzlqSlZCSFk' type='text/javascript'/>
Step 02: Now put the below css code into your blog.
@charset "utf-8";
/* CSS Document */
.headines{
overflow: hidden;
background-color: rgb(36, 91, 128);
}
.newsheadlines{
background: black;
float:left;
height:30px;
position:relative;
overflow:hidden;
width:100%;
padding-left:10px;
}
.newsheadlines marquee span {
font-size: 1em;
line-height:30px;
color:white;
}
.newsheadlines marquee {
background: black;
height: 30px;
}
.newstitle {
background: black;
position:absolute;
display:inline-block;
float: left;
padding: 2px 8px;
height: 30px;
line-height: 30px;
color: #FFF;
font-family: Georgia,serif;
text-transform: uppercase;
font-size: 1em;
margin-right: 10px;}
Step 03: Put the given html code where you want to show headlines bar in the blog.
<div class='headines'>
<div class='newsheadlines'>
<div class='newstitle'>
Headlines
</div>
<script type='text/javascript'>
var ScrollPosts =10;
var ScrollPostsWidth = 110;
var ScrollPostsDelay = 115;
var ScrollPostsDirection = "left";
var ScrollPostsArrow = ">>> ";
</script>
<script src='/feeds/posts/default?alt=json-in-script&callback=swtRecentPostsScroller&max-results=888' type='text/javascript'/>
</div>
</div>
Step 04: Now you must save template.
Auto Scrolling Marquee Recent Posts Headlines Bar For Blogger
Reviewed by Ariyal
on
September 27, 2015
Rating:
Reviewed by Ariyal
on
September 27, 2015
Rating:
No comments: