News Ticker widget is essential for news Blog. However there are many Blogs from different niches are still using News Ticker. This widget w...

Jquery News Ticker Widget with ticker Controller For Blogger Site

News Ticker widget is essential for news Blog. However there are many Blogs from different niches are still using News Ticker. This widget will give your visitors a quick idea about your latest posts. News Ticker widget smoothly works on any Blogger template. And you will see the latest Blog post’s headlines are swiping one by one magically. This widget included Jquery because of ticker controller. The most amazing part is you can instantly go to previous and Next news by clicking on ticker controller. So you can now read and view the all headline comfortably. No more talking, let’s see how to Install Jquery News Ticker Widget with ticker Controller in your Blogger template?

Adding JavaScript and Font Awesome Script (Optional)

This is important part but optional, because most of the template includes latest JavaScript and Font Awesome script. So if your template already included those scripts then simply skip this step and proceed to the next level.

Step #1: Go to https://www.blogger.com and Sign in to your account

Step #2: From Blogger Dashboard click on ->Template ->Edit HTML

Step #3: And locate the <head> section in your Blogger template

Step #4: Finally copy following line of markup and paste it below <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script> <link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Step #5: Now simply hit the Save template button.

Installing Jquery News Ticker Widget with ticker Controller

If your template already has latest JavaScript and Font Awesome script then follow directly below steps.

Step #1: Log in to your "Blogger account" and Go to your "Blogger Dashboard"

Step #2: From Blogger Dashboard Click on -> Template -> Edit HTML

Step #3: Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step #4: Paste the below code Before/above]]></b:skin>


/* Jquery News Ticker by http://www.bloggerspice.com */
#spicenewsticker.loading{display:none}
.left .news-ticker-controls,.left .ticker-content,.left .BloggerSpice-ticker-title,.left .ticker{float:left}
.right .news-ticker-controls,.right .ticker-content,.right .BloggerSpice-ticker-title,.right .ticker{float:right}
.ticker-wrapper.has-js{font-family:'Helvetica',Arial,sans-serif;width:80%;height:28px;overflow:hidden;border:1px solid #f1f1f1;margin:10px 50px 0;line-height:28px;background-color:#FFFFFF;float:none;color:#252525;position:relative}
.ticker{position:relative;overflow:hidden;width:100%}
.ticker a{color:#333}
.BloggerSpice-ticker-title{font-size:12px;text-transform:uppercase;background-color:#252525;padding:0 10px;color:#FFFFFF;font-weight:bold}
.BloggerSpice-ticker-title:before{font-family:FontAwesome;content:"\f0e7";color:#FFF;margin-right:5px}
.ticker-content{text-transform:uppercase;margin:0;position:absolute;font-weight:bold;overflow:hidden;white-space:nowrap;line-height:26px;padding:0 10px;font-size:12px}
.ticker-content .date{padding:0 5px 0 0;border-right:1px dotted #252525}
.rabbi-ticker-swipe{position:absolute;top:0;background-color:#FFFFFF;color:#252525;display:block;width:100%;height:28px}
.rabbi-ticker-swipe span{margin-left:1px;background-color:#FFFFFF;color:#252525;height:28px;width:7px;display:block}
.news-ticker-controls{padding:0;margin:0;list-style-type:none;position:absolute;right:5px;top:0}
.news-ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
.news-ticker-controls li{font-family:FontAwesome;color:#666666;position:relative}
.news-ticker-controls li.hover{color:#252525}
.news-ticker-controls li.down{color:#252525}
.news-ticker-controls li:before{top:0;left:0;line-height:20px}
.news-ticker-controls li.bs-play-pause:before{content:"\f04b"}
.news-ticker-controls li.bs-play-pause.paused:before{content:"\f04c"}
.news-ticker-controls li.bs-prev:before{content:"\f04a"}
.news-ticker-controls li.bs-next:before{content:"\f04e"}
.js-hidden{display:none}

Step #5: Again locate the </head> section in your Blogger template

Step #6: And copy Jquery script from below and paste it Above/before </head>


<script type='text/javascript'>
//<![CDATA[
// News Ticker with Controller by http://www.bloggerspice.com 
(function(a){a.fn.ticker=function(c){var e=a.extend({},a.fn.ticker.defaults,c);if(a(this).length==0){if(window.console&&window.console.log){window.console.log("Element does not exist in DOM!")}else{alert("Element does not exist in DOM!")}return false}var b="#"+a(this).attr("id");var d=a(this).get(0).tagName;return this.each(function(){var g=o();var i={position:0,time:0,distance:0,newsArr:{},play:true,paused:false,contentLoaded:false,dom:{contentID:"#ticker-content-"+g,titleID:"#BloggerSpice-ticker-title-"+g,titleElem:"#BloggerSpice-ticker-title-"+g+" SPAN",tickerID:"#ticker-"+g,wrapperID:"#ticker-wrapper-"+g,revealID:"#rabbi-ticker-swipe-"+g,revealElem:"#rabbi-ticker-swipe-"+g+" SPAN",controlsID:"#news-ticker-controls-"+g,prevID:"#prev-"+g,nextID:"#next-"+g,playPauseID:"#play-pause-"+g}};if(d!="UL"&&d!="OL"&&e.htmlFeed===true){q("Cannot use <"+d.toLowerCase()+"> type of element for this plugin - must of type <ul> or <ol>");return false}e.direction=="rtl"?e.direction="right":e.direction="left";f();function l(u){var t=0,s;for(s in u){if(u.hasOwnProperty(s)){t++}}return t}function o(){var s=new Date;return s.getTime()}function q(s){if(e.debugMode){if(window.console&&window.console.log){window.console.log(s)}else{alert(s)}}}function f(){m();a(b).wrap('<div id="'+i.dom.wrapperID.replace("#","")+'"></div>');a(i.dom.wrapperID).children().remove();a(i.dom.wrapperID).append('<div id="'+i.dom.tickerID.replace("#","")+'" class="ticker"><div id="'+i.dom.titleID.replace("#","")+'" class="BloggerSpice-ticker-title"><span><!-- --></span></div><p id="'+i.dom.contentID.replace("#","")+'" class="ticker-content"></p><div id="'+i.dom.revealID.replace("#","")+'" class="rabbi-ticker-swipe"><span><!-- --></span></div></div>');a(i.dom.wrapperID).removeClass("no-js").addClass("ticker-wrapper has-js "+e.direction);a(i.dom.tickerElem+","+i.dom.contentID).hide();if(e.controls){a(i.dom.controlsID).live("click mouseover mousedown mouseout mouseup",function(t){var s=t.target.id;if(t.type=="click"){switch(s){case i.dom.prevID.replace("#",""):i.paused=true;a(i.dom.playPauseID).addClass("paused");n("prev");break;case i.dom.nextID.replace("#",""):i.paused=true;a(i.dom.playPauseID).addClass("paused");n("next");break;case i.dom.playPauseID.replace("#",""):if(i.play==true){i.paused=true;a(i.dom.playPauseID).addClass("paused");j()}else{i.paused=false;a(i.dom.playPauseID).removeClass("paused");p()}break}}else{if(t.type=="mouseover"&&a("#"+s).hasClass("controls")){a("#"+s).addClass("over")}else{if(t.type=="mousedown"&&a("#"+s).hasClass("controls")){a("#"+s).addClass("down")}else{if(t.type=="mouseup"&&a("#"+s).hasClass("controls")){a("#"+s).removeClass("down")}else{if(t.type=="mouseout"&&a("#"+s).hasClass("controls")){a("#"+s).removeClass("over")}}}}}});a(i.dom.wrapperID).append('<ul id="'+i.dom.controlsID.replace("#","")+'" class="news-ticker-controls"><li id="'+i.dom.playPauseID.replace("#","")+'" class="bs-play-pause controls"><a href=""><!-- --></a></li><li id="'+i.dom.prevID.replace("#","")+'" class="bs-prev controls"><a href=""><!-- --></a></li><li id="'+i.dom.nextID.replace("#","")+'" class="bs-next controls"><a href=""><!-- --></a></li></ul>')}if(e.displayType!="fade"){a(i.dom.contentID).mouseover(function(){if(i.paused==false){j()}}).mouseout(function(){if(i.paused==false){p()}})}if(!e.ajaxFeed){r()}}function m(){if(i.contentLoaded==false){if(e.ajaxFeed){if(e.feedType=="xml"){a.ajax({url:e.feedUrl,cache:false,dataType:e.feedType,async:true,success:function(w){count=0;for(var t=0;t<w.childNodes.length;t++){if(w.childNodes[t].nodeName=="rss"){xmlContent=w.childNodes[t]}}for(var u=0;u<xmlContent.childNodes.length;u++){if(xmlContent.childNodes[u].nodeName=="channel"){xmlChannel=xmlContent.childNodes[u]}}for(var s=0;s<xmlChannel.childNodes.length;s++){if(xmlChannel.childNodes[s].nodeName=="item"){xmlItems=xmlChannel.childNodes[s];var z,v=false;for(var A=0;A<xmlItems.childNodes.length;A++){if(xmlItems.childNodes[A].nodeName=="title"){z=xmlItems.childNodes[A].lastChild.nodeValue}else{if(xmlItems.childNodes[A].nodeName=="link"){v=xmlItems.childNodes[A].lastChild.nodeValue}}if((z!==false&&z!="")&&v!==false){i.newsArr["item-"+count]={type:e.titleText,content:'<a href="'+v+'">'+z+"</a>"};count++;z=false;v=false}}}}if(l(i.newsArr<1)){q("Couldn't find any content from the XML feed for the ticker to use!");return false}i.contentLoaded=true;r()}})}else{q("Code Me!")}}else{if(e.htmlFeed){if(a(b+" LI").length>0){a(b+" LI").each(function(s){i.newsArr["item-"+s]={type:e.titleText,content:a(this).html()}})}else{q("Couldn't find HTML any content for the ticker to use!");return false}}else{q("The ticker is set to not use any types of content! Check the settings for the ticker.");return false}}}}function r(){i.contentLoaded=true;a(i.dom.titleElem).html(i.newsArr["item-"+i.position].type);a(i.dom.contentID).html(i.newsArr["item-"+i.position].content);if(i.position==(l(i.newsArr)-1)){i.position=0}else{i.position++}distance=a(i.dom.contentID).width();time=distance/e.speed;h()}function h(){a(i.dom.contentID).css("opacity","1");if(i.play){var s=a(i.dom.titleID).width()+20;a(i.dom.revealID).css(e.direction,s+"px");if(e.displayType=="fade"){a(i.dom.revealID).hide(0,function(){a(i.dom.contentID).css(e.direction,s+"px").fadeIn(e.fadeInSpeed,k)})}else{if(e.displayType=="scroll"){}else{a(i.dom.revealElem).show(0,function(){a(i.dom.contentID).css(e.direction,s+"px").show();animationAction=e.direction=="right"?{marginRight:distance+"px"}:{marginLeft:distance+"px"};a(i.dom.revealID).css("margin-"+e.direction,"0px").delay(20).animate(animationAction,time,"linear",k)})}}}else{return false}}function k(){if(i.play){a(i.dom.contentID).delay(e.pauseOnItems).fadeOut(e.fadeOutSpeed);if(e.displayType=="fade"){a(i.dom.contentID).fadeOut(e.fadeOutSpeed,function(){a(i.dom.wrapperID).find(i.dom.revealElem+","+i.dom.contentID).hide().end().find(i.dom.tickerID+","+i.dom.revealID).show().end().find(i.dom.tickerID+","+i.dom.revealID).removeAttr("style");r()})}else{a(i.dom.revealID).hide(0,function(){a(i.dom.contentID).fadeOut(e.fadeOutSpeed,function(){a(i.dom.wrapperID).find(i.dom.revealElem+","+i.dom.contentID).hide().end().find(i.dom.tickerID+","+i.dom.revealID).show().end().find(i.dom.tickerID+","+i.dom.revealID).removeAttr("style");r()})})}}else{a(i.dom.revealElem).hide()}}function j(){i.play=false;a(i.dom.tickerID+","+i.dom.revealID+","+i.dom.titleID+","+i.dom.titleElem+","+i.dom.revealElem+","+i.dom.contentID).stop(true,true);a(i.dom.revealID+","+i.dom.revealElem).hide();a(i.dom.wrapperID).find(i.dom.titleID+","+i.dom.titleElem).show().end().find(i.dom.contentID).show()}function p(){i.play=true;i.paused=false;k()}function n(s){j();switch(s){case"prev":if(i.position==0){i.position=l(i.newsArr)-2}else{if(i.position==1){i.position=l(i.newsArr)-1}else{i.position=i.position-2}}a(i.dom.titleElem).html(i.newsArr["item-"+i.position].type);a(i.dom.contentID).html(i.newsArr["item-"+i.position].content);break;case"next":a(i.dom.titleElem).html(i.newsArr["item-"+i.position].type);a(i.dom.contentID).html(i.newsArr["item-"+i.position].content);break}if(i.position==(l(i.newsArr)-1)){i.position=0}else{i.position++}}})};a.fn.ticker.defaults={speed:0.1,ajaxFeed:false,feedUrl:"",feedType:"xml",displayType:"reveal",htmlFeed:true,debugMode:true,controls:true,titleText:"Breaking News",direction:"ltr",pauseOnItems:3000,fadeInSpeed:600,fadeOutSpeed:300}})(jQuery);
function spicenewsticker(a){(function(b){var c={blogURL:"",MaxPost:10,Speed:0.1,Summarylength:150,titleText:"Breaking News",displayType:"reveal",Container:"#spicenewsticker",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXlJYjmUJnqS3M-N3LLDhwbV0x1b8lAepuvlorVMU7rNhub3gRD2jasHWK5_icgtIVGIzKlxjRT9qw62BHwg_20_ktFemf0ZPhgvK6VcDtdKkCGMmob_n68M2-1SosOxw_OLJXmhCqT71o/s1600/BloggerSpice%252Bblank.png",tagName:false,MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};c=b.extend({},c,a);b(c.Container).addClass("loading");b.get((c.blogURL===""?window.location.protocol+"//"+window.location.host:c.blogURL)+"/feeds/posts/summary"+(c.tagName===false?"":"/-/"+c.tagName)+"?max-results="+c.MaxPost+"&orderby=published&alt=json-in-script",function(t){var v,f,l,o,w,q,h,e,s,u,m,g="",d=t.feed.entry;if(d!==undefined){var k=d.length;for(var r=0;r<k;r++){var n=d[r].link.length;for(var p=0;p<n;p++){if(d[r].link[p].rel==="alternate"){v=d[r].link[p].href}}postcontent=("content" in d[r])?d[r].content.$t:("summary" in d[r])?d[r].summary.$t:"";f=d[r].title.$t;postcontent=postcontent.replace(/<\S[^>]*>/g,"").replace(/"/g,"&quot;");if(postcontent.length>c.Summarylength){postcontent=postcontent.substring(0,c.Summarylength)+"..."}u=d[r].published.$t.substring(0,10);l=u.substring(0,4);o=u.substring(5,7);w=u.substring(8,10);q=c.MonthNames[parseInt(o,10)-1];h=d[r].published.$t.substring(11,16);e=h.substring(0,2);s=h.substring(2,5);m=(e<12?"AM":"PM");if(e===0){e=12}if(e>12){e=e-12}g+='<li class="news-item"><span title="'+q+" "+w+", "+l+'" class="date">'+e+""+s+" "+m+'</span> <a class="title" href="'+v+'">'+f+"</a></li>"}b(c.Container).html('<ul class="js-hidden" id="newstick">'+g+"</ul>").removeClass("loading");b("#newstick").ticker({speed:c.Speed,direction:b("#outer-wrapper").attr("class"),titleText:c.titleText,displayType:c.displayType})}else{b(c.Container).html("<span>No result!</span>").removeClass("loading")}},"jsonp")})(jQuery)};  
//]]>
</script>

Step #7: Now find <div id='content-wrapper'> or <div id='main-wrapper'> Or <div class='main-outer'> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step #8: And paste the below “HTML” and “JavaScript” code above/before the founded code. And alter the 10 with any digit to set the number of posts you want to display in news ticker.


<div id='spicenewsticker'/>
<script type='text/javascript'>
//<![CDATA[
spicenewsticker({MaxPost:10});
//]]>
</script>

Step #9: And click "Save template” button from the top.

If you have followed all the instruction carefully then check your Blogger template and see Jquery News Ticker Widget become visible. You can control the news ticker by Controller. This is really awesome. I hope your Blog visitors will love it.