How to Add Responsive Breaking News Gadget In Blogger | Breaking news widget for blogger
How to Add Responsive Breaking News Gadget In Blogger Template 2020, In breaking news widget you can display latest/recent posts updates of your blogger website or blog.
$(document).ready(function(){var e="https://cssmoz.blogspot.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>")}})});Then add this CSS
Then add this following CSS on your blogger template </head> selection. If you want to change the colour, you can add your own colors to CSS./* Breaking News Widget By https://cssmoz.blogspot.com */
#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:400;text-transform:uppercase;padding:6.5px 22px;}
#breaking-bsd-news li a {font-family:inherit;font-weight:400;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;}}Add html code
Add this following html content on your blogger template, where you want to show breaking news plugin on your blog. add this html on </body> selection on your blogger template.<div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'></i></span>
<div id='breaking-bsd-news'>Loading...</div></div>Add FontAwesome CSS
You need to add following version of Fontawesome CSS on your template, It’s make the Breaking News Plugin Beautiful looks. Add following the CSS on your blogger template </head> selection.<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Add Jquery
This is required for this breaking news plugin, It's well not working without jquery. Add following the Javascript on your blogger template </body> selection.<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>And Done! Click on the Save Button, and refresh your page. Your are DOING awesome.
