Your website is using breaking/trending news gadget ? you know the benefits of breaking news widget? learn here in this tutorial how to add breaking news gadget in blogger template.In previous post we have already talked about stylish latest news ticker widget but today in this article we are going to explain installing of responsive latest/recent updates tool plugin for your blogger website or blog.Advantage of using breaking news widget is you can display the latest posts update of your blog or website and you don't need to add recent articles gadget in your template.breaking news widget comes with integration of Font awesome icons so you can use any icon of your choice but we recommend you to use bull horn icon or rss and yeah you can also use graph symbols too.
Breaking news widget is very simple to add in blogger template and we have made it more simple for our readers and tried best to serve you best.In this widget when you update your website or blog your recent articles will scroll in this gadget,so you will never lose any updates to display in front of the readers.If you update your website regularly you must install this gadget in your blogger template.So to grab breaking news plugin follow the steps mentioned below.
Demo:
See the Pen How to Add Responsive Breaking News Gadget In Blogger Template by BloggersStand (@bloggersstand) on CodePen.
How To Add Animated Breaking News Widget In Blogger Template
Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* Breaking News Widget By www.Bloggersstand.Com */Customization:
#bd-breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #8ED557;}
#bd-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #8ED557;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:420;text-transform:uppercase;padding:6.5px 22px;}
#breaking-bsd-news li a {font-family:inherit;font-weight:420;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#breaking-bsd-news li a:hover {color:#63953D;}
#breaking-bsd-news {float:left;margin-left:75px;margin-top:6px;}
#breaking-bsd-news ul,#breaking-bsd-news li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#bd-breakingnews {margin:20px 0 0 0;margin-right:0;}
#bd-breakingnews .head-breaking {padding:6.5px 14px;}
#breaking-bsd-news {margin-left:50px;}}
- To change the Font awesome icon color replace 8ED557 with your color hex code.you can choose colors by visiting color wheel picker or color code generator.
- To Change the Hover color on recent posts scrolling ,change 63953D with your color.
- To Change the border color ,change 8ED557 with your color.
Step 5. Now Search for the closing </body> tag and copy the below java script code and paste just before/above </body> tag.
<script type='text/javascript'>Customization:
//<![CDATA[
// Breaking News Widget By www.Bloggersstand.com
$(document).ready(function(){var e="http://bloggersstand.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(){$("#breaking-bsd-news li:first").slideUp(function(){$(this).appendTo($("#breaking-bsd-news 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>",$("#breaking-bsd-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-bsd-news").html("<span>No result!</span>")},error:function(){$("#breaking-bsd-news").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>
- Replace Bloggersstand with your website/Blog Url.
<div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span>Customization:
<div id='breaking-bsd-news'>Loading..</div></div>
- To replace the bull horn Font awesome icon symbol replace fa fa-bullhorn with your desired font awesome,you can choose icons by visting below url.
Step 7. if you want to display the Breaking news widget only in the homepage/Main page then add the following condition tags on above HTML code,now your final code will look like this.
<b:if cond='data:blog.pageType == "index"'>Step 8. Now Save your Template..Done!
<div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span>
<div id='breaking-bsd-news'>Loading..</div></div>
</b:if>