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...
Email Subscription Widget for Blogger, it's Responsive,Flat,Simple,Easy to Load and Stylish
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.
