A news feed is very important for a blog which has some traffic and also for the one with heavier traffic.It is a group/collection of your recent posts that is shown one by one in a horizontal box with many effects like flipping,scrolling etc and is powered by RSS.A news feed is the best way to tell your visitors when they are leaving that don't go there is still more awesome stuff to catch up with.In this way, it plays a role in reducing the bounce rate of your blog.A blog without news feed or any kind of breaking news widgets usually have more bounce rate.So if you want visitors to spend some more time you can use this widget too.
- Recommended : Drive Traffic To Blog
- Recommended : Blogger Follow Button Like WordPress
This news feed widget is responsive.It's a combination of both CSS and Javascript.It is light and will not cause any slow page load.You can use it anywhere in your blog.
Installation :
1-First, Confirm that you have font awesome installed.If not then copy this and paste it below <head>
If you want to use the widget on all pages you can use this
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
2-Goto blogger dashboard and open template and then Edit HTML.
CSS of News Feed Widget:
3-Copy the CSS and paste it above </head> tag using (Use CTRL + F to find </head>)
<style>/* News Feed blograbbit.blogspot.com */#blograbbitbreakingnews {margin:15px 0 0 0;margin-right:auto;height:42px;line-height:27px;overflow:hidden;background:#fff;border:2px solid #e6e6e6;}
#blograbbitbreakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #F9BF3B;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}
#brbreakingnewsli a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#brbreakingnewsli a:hover {color:#359bed;}
#brbreakingnews{float:left;margin-left:75px;margin-top:6px;}
#brbreakingnewsul,#brbreakingnewsli{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#blograbbitbreakingnews {margin:20px 0 0 0;margin-right:0;}
#blograbbitbreakingnews .breakhead {padding:6.5px 11px;}
#brbreakingnews{margin-left:50px;}}</style>Javascript of News Feed Widget :
4-Copy the javascript and paste it above </body>.
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://blograbbit.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(){$("#brbreakingnewsli:first").slideUp(function(){$(this).appendTo($("#brbreakingnewsul")).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>",$("#brbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#brbreakingnews").html("<span>No result!</span>")},error:function(){$("#brbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>HTML of News Feed Widget :
5-You have two options.If you want to have the news widget only on the front page,then use this
For breaking news only on main page.Add this gadget where ever you want by pasting below HTML in HTML/Javascript widget.
<b:if cond='data:blog.pageType == "index"'>
<div id='blograbbitbreakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='brbreakingnews'>Loading...</div></div>
</b:if>If you want to use the widget on all pages you can use this
<div id='blograbbitbreakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='brbreakingnews'>Loading...</div></div>Customisations :
- After doing all of the above steps,be sure to change the URL in the 4rth step to your blog URL.
- You can change the colour of feed background by changing the first orange marked text in the first step. (Use colours from blog Rabbit colour picker )
- You can change the hover colour by changing the second marked colour.
- You can change the RSS icon with some other icon ( font awesome icons )
Last Words :
I hope that you like this widget and it installed correctly.If you encountered any problem .Please do comment it .So that I can amend it.Don't forget to share this post.Thanks and happy blogging.
0 comments:
Leave a Comment
1-No spamming (links etc unless necessary)
2-Ask what's related to the post