Blogger Ever

How to add recent post news ticker widget in Blogger using jQuery?

Recent post jQuery news style ticker widget for Blogger. It is simple amazing and easy to install.
Recent Post News Ticker Blogger Widget

In my two recent posts, I described how to first get Blogger feeds and then how to fetch them and display as plain text. This time I'm going a bit high, because a news ticker style widget tutorial is here, which you've seen in premium templates. So have a look at the demo.
November 7, 2014 Bug fixed, now working correctly.
March 10, 2014 One more bug fixed.
March 10, 2014 New post updated here.
See the Pen ktHlA by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
If you do not have jQuery in your template then add the following line after <head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script> 
  • Go to Blogger > Template > Edit HTML
  • Find </head>
  • paste the following code just above it.
<script type='text/javascript'>
        //<![CDATA[
(function ( $, window, document, undefined ) { var name = "easyTicker", defaults = { direction: 'up', easing: 'swing', speed: 'slow', interval: 2000, height: 'auto', visible: 0, mousePause: 1, controls: { up: '', down: '', toggle: '', playText: 'Play', stopText: 'Stop' } }; function EasyTicker( el, options ) { var s = this; s.opts = $.extend( {}, defaults, options ); s.elem = $(el); s.targ = $(el).children(':first-child'); s.timer = 0; s.mHover = 0; s.winFocus = 1; init(); start(); $([window, document]).off('focus.jqet').on('focus.jqet', function(){ s.winFocus = 1; }).off('blur.jqet').on('blur.jqet', function(){ s.winFocus = 0; }); if( s.opts.mousePause == 1 ){ s.elem.mouseenter(function(){ s.timerTemp = s.timer; stop(); }).mouseleave(function(){ if( s.timerTemp !== 0 ) start(); }); } $(s.opts.controls.up).on('click', function(e){ e.preventDefault(); moveDir('up'); }); $(s.opts.controls.down).on('click', function(e){ e.preventDefault(); moveDir('down'); }); $(s.opts.controls.toggle).on('click', function(e){ e.preventDefault(); if( s.timer == 0 ) start(); else stop(); }); function init(){ s.elem.children().css('margin', 0).children().css('margin', 0); s.elem.css({ position : 'relative', height: s.opts.height, overflow : 'hidden' }); s.targ.css({ 'position' : 'absolute', 'margin' : 0 }); setInterval( function(){ adjHeight(); }, 100); } function start(){ s.timer = setInterval(function(){ if( s.winFocus == 1 ){ move( s.opts.direction ); } }, s.opts.interval); $(s.opts.controls.toggle).addClass('et-run').html(s.opts.controls.stopText); } function stop(){ clearInterval( s.timer ); s.timer = 0; $(s.opts.controls.toggle).removeClass('et-run').html(s.opts.controls.playText); } function move( dir ){ var sel, eq, appType; if( !s.elem.is(':visible') ) return; if( dir == 'up' ){ sel = ':first-child'; eq = '-='; appType = 'appendTo'; }else{ sel = ':last-child'; eq = '+='; appType = 'prependTo'; } var selChild = s.targ.children(sel); var height = selChild.outerHeight(); s.targ.stop(true, true).animate({ 'top': eq + height + "px" }, s.opts.speed, s.opts.easing, function(){ selChild.hide()[appType]( s.targ ).fadeIn(); s.targ.css('top', 0); adjHeight(); }); } function moveDir( dir ){ stop(); if( dir == 'up' ) move('up'); else move('down'); } function fullHeight(){ var height = 0; var tempDisp = s.elem.css('display'); s.elem.css('display', 'block'); s.targ.children().each(function(){ height += $(this).outerHeight(); }); s.elem.css({ 'display' : tempDisp, 'height' : height }); } function visHeight( anim ){ var wrapHeight = 0; s.targ.children(':lt(' + s.opts.visible + ')').each(function(){ wrapHeight += $(this).outerHeight(); }); if( anim == 1 ){ s.elem.stop(true, true).animate({height: wrapHeight}, s.opts.speed); }else{ s.elem.css( 'height', wrapHeight); } } function adjHeight(){ if( s.opts.height == 'auto' && s.opts.visible != 0 ){ anim = arguments.callee.caller.name == 'init' ? 0 : 1; visHeight( anim ); }else if( s.opts.height == 'auto' ){ fullHeight(); } } return { up: function(){ moveDir('up'); }, down: function(){ moveDir('down'); }, start: start, stop: stop, options: s.opts }; } $.fn[name] = function ( options ) { return this.each(function () { if (!$.data(this, name)) { $.data(this, name, new EasyTicker( this, options )); } }); }; })( jQuery, window, document ); $(function(){$('.news-ticker') .each(function() { var domainname=$(this).attr('data-domain'); var url ='http://www.'+domainname+'/feeds/posts/summary/?max-results=5&alt=json-in-script'; var thisc = $(this); thisc.append('<div class="tickerwrapper"><span class="tickhead">Latest News</span><div class="ticker2"><ul></ul></div></div><center>Widget by <a href="http://www.bloggerever.com/2014/08/how-to-add-recent-post-news-ticker.html" target="_blank">Blogger Ever</a></center>'); $.ajax({ type: 'GET', url: url, async: false, contentType: "application/json", dataType: 'jsonp', success: function(json) { for (var i = 1; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { var postUrl = json.feed.entry[i].link[j].href; break; } } var postTitle = json.feed.entry[i].title.$t; var item = '<li><a href="'+postUrl+'">'+postTitle+'</a></li>'; $('.ticker2 ul',thisc).append(item); } $('.ticker2').easyTicker({ direction: 'up', easing: 'swing', speed: 'slow', interval: 2000, height: 'auto', visible: 0, mousePause: 1, }); } });}); });
//]]></script>

Now find for //]]></b:skin> and paste the following code just before it.
.tickerwrapper{ position:relative; } .tickhead{ background:#dd4c39 url(https://lh4.googleusercontent.com/S2yrb7GoLLN7s1-NmlkE_nS9Svzr5DQNM3dcCCp2Occ=s50-no) no-repeat; background-position:125px 10px; background-size:20px; position:absolute; line-height:40px !important; height:40px; width:130px; padding:0 15px 0 5px; text-align:center; color:#fff; font:400 15px 'pt sans',sans-serif; text-transform:uppercase; z-index:1; top:0; left:0; } .ticker2{ padding-left:155px; height:40px !important; overflow:hidden; background:#333; line-height:40px !important; } .ticker2 ul{ padding:0; margin:0; list-style:none; } .ticker2 ul li a{ color:#fff; font:400 15px 'pt sans',sans-serif; text-decoration:none; }
Now save your template and go to layout > Add Widget > HTML/javascript and paste the following code in it.
<div class='news-ticker' data-domain='bloggerever.com'>
</div>
Replace the bloggerever.com with your blog domain. If anything is not clear just hit me in comments.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.