Breaking News widget is very useful to the News Blogs and all other type blogs, because new users who are visited to the site from the...
Features
- 100% Responsive
- Unlimited Colors
- Simple and Flat Design
- Easy to add as widget
Steps to Add Breaking News Widget for Blogger
- Go to Blogger Dashboard.
- got to Template->Edit Template.
- Search for ]]></b:skin>
- Paste the CSS code just before ]]></b:skin>
CSS
#cybup-breakingnews-widget {
margin: 15px;
height: 38px;
line-height: 26px;
overflow: hidden;
background: #fff;
border: 1px solid #34CFFD;
border-radius:50px;
}
#cybup-breakingnews-widget .breakhead {
border: 1px solid #34CFFD;
border-radius:50px;
position: absolute;
background: none repeat scroll 0 0 #34CFFD;
color: #fff;
display: block;
float: left;
font-family: inherit;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
padding: 6px 12px;
}
#adcybup-breakingnews-widget li a {
font-family: inherit;
font-weight: 400;
color: #34CFFD;
margin-top: 10px;
transition: all 0.5s ease-in-out;
}
#adcybup-breakingnews-widget li a:hover {
color: #34CFFD;
}
#adcybup-breakingnews-widget {
float: left;
margin-left: 50px;
margin-top: 6px;
}
#adcybup-breakingnews-widget ul,#adcybup-breakingnews-widget li {
list-style: none;
margin: 0;
padding: 0;
}
- Find </body> tag and paste Javascript code just before that.
Javascript
<script type='text/javascript'>
//<![CDATA[
// Cybup Breaking News Widget
$(document).ready(function(){var e="http://cybup.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(){$("#adcybup-breakingnews-widget li:first").slideUp(function(){$(this).appendTo($("#adcybup-breakingnews-widget 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>",$("#adcybup-breakingnews-widget").html(s),setInterval(function(){t()},5e3)}else $("#adcybup-breakingnews-widget").html("<span>No result!</span>")},error:function(){$("#adcybup-breakingnews-widget").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>
- Replace yellow colored URL with your blog URL.
- Add HTML code (given below) where you want to display it.(Only in between <body></body> tags)
HTML
<div id='cybup-breakingnews-widget'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adcybup-breakingnews-widget'>Loading...</div></div>
- If you want display it only on the main page, use the conditional tag
<b:if cond='data:blog.pageType == "index"'>
<div id='cybup-breakingnews-widget'>
<span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adcybup-breakingnews-widget'>Loading...</div>
</div></b:if>
Our Facebook page: https://www.facebook.com/CybUp
Follow us on Codepen: http://codepen.io/Cybup
Please share this to your friends.
Please share this to your friends.
