How to add a simple and stylish Auto Scrolling Recent Posts bar/ticker in blogger blog - Breaking news bar is also one of the most important widget for every blogger blog. With the help of this news ticker you can easily display your recent posts in one single bar. And I think it's a very good way to attract your visitors because if you set up this widget on your blog, then the visitors will be able to see your all recent post without leaving the pages. So today with the help of this post I'm going to show you how you can easily setup a breaking news bar into your blogger blog. First take a look of this Auto Scrolling Recent Posts bar by clicking on the below demo button:
If you like this Auto Scrolling Recent Posts bar/ticker and want to add it on your own blog then follow the below steps.
First go to your blogger dashboard, And then go to "Template" section and then click on "Edit html" button.
Now in template editor find the below code by pressing "Ctrl + F" key together from your keyboard.
]]></b:skin>
After that copy the below CSS code and paste it just before ]]></b:skin>:
#breakingnews {margin:15px 0 0 100px;margin-right:100px;height:40px;line-height:27px;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-weight: bold;font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;font-weight:700;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 15px;margin-right:15px;}#breakingnews .breakhead {padding:6.5px 14px;}#adbreakingnews {margin-left:50px;}}
Now once again find the below code.
</body>
After that, copy the below code and paste it just before </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://www.smartpik.in",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>
Replace the highlighted http://www.smartpik.in link with your own blog link.
Now run your mind and add the below Html code where you want to show this scrolling recent post bar. (Add any one html)
<b:if cond='data:blog.pageType == "index"'>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-cog fa-spin'/></span>
<div id='adbreakingnews'>Loading...</div></div>
</b:if>
It will appear on home page only
<div id='breakingnews'><span class='breakhead'><i class='fa fa-cog fa-spin'/></span><div id='adbreakingnews'>Loading...</div></div>
It will appear on every page (e.g Home page, static pages and posts).
Now copy the below "Font-awesome" CSS code and paste it just after <head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
After that, click on the orange save template button to apply the changes.
That's it! I hope you like this Auto Scrolling Bar! Stay tuned for more blogger widgets!
0 comments:
Post a Comment