How to add a Breaking News feeds on our site or our blog? This is a tutorial for adding a feeds box for displaying on our blog, so can be very usefull and looks cool! If you want to use another style, reads Ticker Typing's Breaking News Widget.
HOW TO ADD A BREAKING NEWS FEEDS ON BLOGGER
First of all, you need FontAwesome installed in your site templates. The version of FontAwesome can be variant, but use the latest would be a great choice.For Blogger's user, follows this tutorial: Open Blogger ► Template ► Edit HTML.
CSS
Paster this code before tag ]]></b:skin> or </style> :/* CSS Breaking News */
#breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}
#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #363b40;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#359bed;}
#adbreakingnews {float:left;margin-left:75px;margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#breakingnews {margin:20px 0 0 0;margin-right:0;}
#breakingnews .breakhead {padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}
}
JAVASCRIPT
And then put this code before a closing tag </body> :<script type='text/javascript'>Chance the http://introducing-broker.blogspot.com with your blogspot address.
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://introducing-broker.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(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews 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>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>
HTML
Call the function with this code:<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'></i></span>
<div id='adbreakingnews'>Loading...</div></div>
If you want to display this widget on certain page only, for an example will be displayed only the homepage, then you must add a Conditional Tags for homepage:
<b:if cond='data:blog.pageType == "index"'>
-- YOUR CODE HERE --
</b:if>
So, its look like this:
<b:if cond='data:blog.pageType == "index"'>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'></i></span>
<div id='adbreakingnews'>Loading...</div></div>
</b:if>
ADDITIONAL: You can add this between <body> tag and closing tag </body> tag.
Related with this widget: Ticker Typing's Breaking News Widget
0 comments:
Post a Comment