How to add a simple and stylish breaking news bar/ticker in blogger blog - Breaking news bar is also one of the most important widget for every blogger blog. With the help of this news ticker you can easily display your recent posts in one single bar. And I think it's a very good way to attract your visitors because if you set up this widget on your blog, then the visitors will be able to see your all recent post without leaving the pages. So today with the help of this post I'm going to show you how you can easily setup a breaking news bar into your blogger blog. (First take a look of this breaking news bar by clicking on the below demo button)
If you like this breaking news bar/ticker and want to add it on your own blog then follow the below steps.
How To Setup Breaking News Ticker?
First go to your blogger dashboard with the help of this link - Visit
And then go to "Template" section and then click on "Edit html" button.
Now in template editor find the below code by pressing "Ctrl + F" key together from your keyboard.
]]></b:skin>
After that copy the below CSS code and paste it just before ]]></b:skin.
/* CSS Breaking News */
#breakingnews {margin:15px 0 0 100px;margin-right:100px;height:42px;line-height:27px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}
#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #363b40;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#359bed;}
#adbreakingnews {float:left;margin-left:75px;margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#breakingnews {margin:20px 0 0 15px;margin-right:15px;}
#breakingnews .breakhead {padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}}
You can edit the highlighted numbers according to your need
Now once again find the below code.
</body>
After that, copy the below code and paste it just before </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://askwithloud.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>
Replace the highlighted askwithloud.com link with your own blog link.
Now run your mind and add the below Html code where you want to show this news ticker. (Add any one html)
For Home Page Only?
<b:if cond='data:blog.pageType == "index"'>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-cog fa-spin'/></span>
<div id='adbreakingnews'>Loading...</div></div>
</b:if>
It will appear on home page only
For Every Page?
<div id='breakingnews'><span class='breakhead'><i class='fa fa-cog fa-spin'/></span>
<div id='adbreakingnews'>Loading...</div></div>
It will appear on every page (e.g Home page, static pages and article pages).
Adding Font-Awesome CSS?
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
After that, click on the orange save template button to apply the changes.
That's it! I hope you like this ticker! Stay tuned for more blogger widgets! Thanks for reading @Prince
0 Comment to "Simple Breaking News Bar For Blogger"
Post a Comment