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 |
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 #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,""");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.
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
Hi Maani,
Thanks for your beautiful comment. I appreciate it. :sp
I like your all your work.
That is demo of your good job: http://www.freemobilesurf.com/
Thank you very much bro
Thanks Nathan Mosse for using my widget.
i am happy
Hi Ehsan..Thanks for dropping your comment. :up
Bro i have lot of problem..
google API feed error when i was completed all.
Tnx bro it's working..
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
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. :)
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
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
Bloggerspice , the big school ever thank you so so so much
Hi Franktz, thank you so much for your kind words. I'm very simple man with small knowledge. :-bd
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 ??
:( :(
hi mohammad
thanks for your response i already did it
but i think the issue is there is not any url blog OR rss feed to put in the script like the previous news ticker (in my humble opinion) but you know better than me
you the boss
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 ^_^
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
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. :)
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
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
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
cant find codes on last steps
plz help
using ijonkz 2.0
Very good and thank you very much I have installed.
I would like to ask if there is the possibility to place a link
or feed from another newsletter in the code so that the
news is running instead of the blog posts.
Thank you very much. Very good.
I wanted to ask if I do not want the news to run from my site but to run news from another newsletter I want in some way maybe with feed. This can be done?
Hi :(
No Sorry, This widget will work only from that sites where script has installed.Not support feed from other site. Because it automatically detect the news feed.
No Bro. this is not possible. :(
I recently discovered you, I found very useful things for my blog.
As well as to have thank you. To be okay.
Thank you for being with BloggerSpice. :up
NOT WORKING IN MY BLOG JUST SHOWN BLANK BOX
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
How to hide in mobile template
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 :)
I need help if you can.
there is the option to enter any of 2 into a widget
with some code and playing on the blog;
http://www.capital.gr/finance/realtimeticker
http://legacy.capital.gr/ticker/RealtimeHtmlTicker.aspx
Dear Δημήτρης Μ :)
This widget will automatically detect the news feed and start display the latest post in news ticker.
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
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.
i have tried the above scripts but it didn't work on my blog, there is some script texts just shown in the header
now i have installed the script successfully but i want to change the black color of "breaking news tab background" also the text font.
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.
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/
I don't think so. Even i didn't found any developer who develop news ticker with random post. :t