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. 

Jquery News Ticker Widget with ticker Controller For Blogger Site
Jquery News Ticker Widget with ticker Controller For Blogger Site

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.

jquery news ticker widget

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://3.bp.blogspot.com/-IsmZS28MJMU/V6gPK2Ysu0I/AAAAAAAAPc0/wpNWe7a6EqkmWepssoXTGbgP4koYJ8xbACLcB/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.

If you are facing any trouble to install this widget then feel free to ask question. Thank you. 

42 Comments

  1. Maani kamili
    Excellent incredible blog layout! How long have you been blogging for? you make running a blog look easy. The overall glance of your website is magnificent, let alone the content!

    Web development comapany in Chennai
    • BloggerSpice
      Hi Maani,
      Thanks for your beautiful comment. I appreciate it. :sp
  2. Rédaction FreeMobileSurf
    I like your all your work.

    That is demo of your good job: http://www.freemobilesurf.com/

    Thank you very much bro
    • BloggerSpice
      Thanks Nathan Mosse for using my widget.
  3. Gdnnajd
    i am happy
    • BloggerSpice
      Hi Ehsan..Thanks for dropping your comment. :up
  4. Unknown
    Bro i have lot of problem..
    google API feed error when i was completed all.
  5. Unknown
    Tnx bro it's working..
  6. Unknown
    hello my fried
    thanks for your response would you tell me how to modify appearance the news ticker from floting left to right?
    and how to insert the RSS feed in order to show the updates in the bar?
    thanks
    • BloggerSpice
      Hi There, Just alter 2 script {float:left} with {float:right} and {float:right} with {float:left}

      .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}


      thank you. :)
  7. Unknown
    Hi mohammad
    i did everything in the instructions above but it is still the updates never shown ,it is empty bar??
    can you tell me whats wrong please??!
    thanks
    http://thenetworkch2pc.blogspot.com
    • BloggerSpice
      Hi there, Can you please add this widget in any demo site with English language? I didn't find any issue. However this JS widget support below version of JavaScript only.

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

      if you are using any other version please replace it by the above JavaScript version. :t
  8. Bloggerspice , the big school ever thank you so so so much
    • BloggerSpice
      Hi Franktz, thank you so much for your kind words. I'm very simple man with small knowledge. :-bd
  9. Unknown
    hi mohammad
    is it fine if i send the whole blogger template for you via email to locate the problem
    it is really bother me i did everything you mention it above but still the ticker news empty ??
    :( :(
    • BloggerSpice
      Hi Network Channel 2, Maybe some script is conflicting with this widget. Under this post you can see the comment from Franktz, he is using this widget and working perfectly. Just check it out http://www.thecoolfrank.com ^_^
  10. Rasa Syukur Resources
    hi, thanks for your wonderful widget. however, how to show only the post title without posting time? and can i specified it for certain label only? TQ
    • BloggerSpice
      Hi Rasa,
      Simply you have to delete "post-timestamp" script. So detect the script and delete it. But this is bad for SEO. Because search engine can't detect your post update time accurately.

      Alternatively you can wrap your time-stamp script by conditional tag. So it will display on specific page only. Please visit below URL for Conditional tag details

      http://www.bloggerspice.com/2014/11/Ultimate-Guidelines-for-implementing-Blogger-Conditional-tag.html

      Thank you. :)
  11. IDIC
    Nice widget!

    I'd like to customize it a little, though. How can I have the widget not to underline the text when I mouseover it and have it change colour instead? Also, I'd like to change how the timestamp is shown: what should I do to have a D/M/Y pattern instead of just H:M (AM/PM)?

    Thank you
  12. IDIC
    Nice widget!

    I'd like to customize it a little, though. How can I have the widget not to underline the text when I mouseover it and let it change the colour of the text instead? Also, I'd like to change how the timestamp is shown: what should I do to have a D/M/Y pattern instead of just H:M (AM/PM)?

    Thank you
    • BloggerSpice
      Hi IDIC,
      Maybe underline script default in you template. In my script hasn't any underline code. You can change the URL color on mouse hover from below markup.

      .news-ticker-controls li.hover{color:#252525}

      Regarding Day/Month/Year you can't change it because whole JavaScript has written for time. This plugin's JavaScript has taken from a developer Rhodimus and I have modified.

      m=(e<12?"AM":"PM");if(e===0){e=12}if(e>12){e=e-12}g+=

      Thank you :as
  13. wakizu
    cant find codes on last steps
    plz help
    using ijonkz 2.0
  14. NOT WORKING IN MY BLOG JUST SHOWN BLANK BOX
    • BloggerSpice
      Hi Rashmi,
      If your blog already containing another news ticker widget then this script will conflict with that. First remove the previous script completely and use this one.

      Thank you :up
  15. Vinays Info
    How to hide in mobile template
    • BloggerSpice
      Hi Vinay
      Just locate your Responsive script from your Blogger theme. And there below script. This will hide the NewsTicker in mobile device.


      #spicenewsticker{display:none}


      Thanks :)
  16. Vamshi Gupta
    Hi Rabbi Khan.. I really like your idea of ticket, is it possible to show currency price rather then news.. I want to show live Cryptocurrency price from any one source.
    Appreciate if that can be made possible.

    Thanks in Advance
    Vamshi Gupta
    • BloggerSpice
      Hi Vamshi Gupta :sd
      This ticker will automatically grab the post title and for grabbing the title it use Blogger RSS feed. So there has not any chance to show currency. If you add currency price in post title then it will display the currency price.
  17. LinkedIn Jobs
    i have tried the above scripts but it didn't work on my blog, there is some script texts just shown in the header
  18. LinkedIn Jobs
    now i have installed the script successfully but i want to change the black color of "breaking news tab background" also the text font.
    • BloggerSpice
      Hi There :-bd
      I am very glade to hear that. to change the background color please locate the below line from above script and change background-color:#252525; with different color code.



      .BloggerSpice-ticker-title{font-size:12px;text-transform:uppercase;background-color:#252525;padding:0 10px;color:#FFFFFF;font-weight:bold}


      Similarly to change the font just locate below line and change the font family.


      font-family:'Helvetica',Arial,sans-serif;


      Thank you.
  19. Nokari.net
    instead of latest post i want to scroll out multiple selective posts on ticker
    is it possible?
    look at this site
    http://www.esakal.com/
    • BloggerSpice
      I don't think so. Even i didn't found any developer who develop news ticker with random post. :t
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up