Archive Pages Design$type=blogging

Cool Breaking News Widget for Blogger

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...

Breaking News Widget for Blogger

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 Google may only see the information what they need and they will not return to the home page for more information. So at that time this breaking news widget will be very useful to the users. It will show the total post titles which you written in your blog.

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 == &quot;index&quot;'>
<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.

COMMENTS

BLOGGER: 8
Loading...
Name

AI Android Blogger CSS Facebook Featured Freebie Google HTML Internet Javascript Open Source Post SEO WebDesign Widget Wordpress
false
ltr
item
Cybup: Cool Breaking News Widget for Blogger
Cool Breaking News Widget for Blogger
http://4.bp.blogspot.com/-xR-VwyDJHx4/Vg5YzThveaI/AAAAAAAAB8w/VNUn75oVfnc/s640/Breaking%2BNews%2BWidget.jpg
http://4.bp.blogspot.com/-xR-VwyDJHx4/Vg5YzThveaI/AAAAAAAAB8w/VNUn75oVfnc/s72-c/Breaking%2BNews%2BWidget.jpg
Cybup
http://cybup.blogspot.com/2015/10/add-cool-breaking-news-widget-for-blogger.html
http://cybup.blogspot.com/
http://cybup.blogspot.com/
http://cybup.blogspot.com/2015/10/add-cool-breaking-news-widget-for-blogger.html
true
1938789928030985205
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago