You are here: Home Blogger Widgets Jquery News Ticker Widget with ticker Controller For Blogger Site

Jquery News Ticker Widget with ticker Controller For Blogger Site

How to add light weight Jquery News ticker widget with controller options in Blogger template?

Comments: 40 Filed Under: Last Updated: 8/08/2016
data:blog.title
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.

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.

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

If you are facing any trouble to install this widget then feel free to ask question. Thank you. 
Jquery News Ticker Widget with ticker Controller For Blogger Site
4 Stars stars - "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 wid...

Speak Your Mind

So Far 40 thoughts on This Post.
avatar
Reply
Maani kamili says: 8/19/2016

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

avatar
Reply
Mohammad Fazle Rabbi says: 8/21/2016

Hi Maani,
Thanks for your beautiful comment. I appreciate it. :sp

avatar
Reply
Nathan Mosse says: 10/15/2016

I like your all your work.

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

Thank you very much bro

avatar
Reply
Mohammad Fazle Rabbi says: 10/16/2016

Thanks Nathan Mosse for using my widget.

avatar
Reply
Ehsan says: 10/19/2016

i am happy

avatar
Reply
Mohammad Fazle Rabbi says: 10/19/2016

Hi Ehsan..Thanks for dropping your comment. :up

avatar
Reply
Mehedi Hasan says: 11/16/2016

Bro i have lot of problem..
google API feed error when i was completed all.

avatar
Reply
Mehedi Hasan says: 11/16/2016

Tnx bro it's working..

avatar
Reply
قناه المعلوميات 2 The Network Channel 2 says: 1/13/2017

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

avatar
Reply
Mohammad Fazle Rabbi says: 1/14/2017

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. :)

avatar
Reply
قناه المعلوميات 2 The Network Channel 2 says: 1/15/2017

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

avatar
Reply
Mohammad Fazle Rabbi says: 1/16/2017

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

avatar
Reply
Franktz says: 1/16/2017

Bloggerspice , the big school ever thank you so so so much

avatar
Reply
Mohammad Fazle Rabbi says: 1/16/2017

Hi Franktz, thank you so much for your kind words. I'm very simple man with small knowledge. :-bd

avatar
Reply
قناه المعلوميات 2 The Network Channel 2 says: 1/16/2017

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 ??
:( :(

avatar
Reply
قناه المعلوميات 2 The Network Channel 2 says: 1/17/2017

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

avatar
Reply
Mohammad Fazle Rabbi says: 1/17/2017

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 ^_^

avatar
Reply
Rasa Syukur Resources says: 3/09/2017

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

avatar
Reply
Rabbi Khan says: 3/09/2017

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. :)

avatar
Reply
IDIC says: 3/14/2017

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

avatar
Reply
IDIC says: 3/14/2017

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

avatar
Reply
Rabbi Khan says: 3/15/2017

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

avatar
Reply
Wakizu says: 6/13/2017

cant find codes on last steps
plz help
using ijonkz 2.0

avatar
Reply
Δημήτρης Μ. says: 7/23/2017

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.

avatar
Reply
Δημήτρης Μ. says: 7/24/2017

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?

avatar
Reply
Rabbi Khan says: 7/24/2017

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.

avatar
Reply
Rabbi Khan says: 7/24/2017

No Bro. this is not possible. :(

avatar
Reply
Δημήτρης Μ. says: 7/24/2017

I recently discovered you, I found very useful things for my blog.
As well as to have thank you. To be okay.

avatar
Reply
Rabbi Khan says: 7/25/2017

Thank you for being with BloggerSpice. :up

avatar
Reply
rashmi says: 8/08/2017

NOT WORKING IN MY BLOG JUST SHOWN BLANK BOX

avatar
Reply
Rabbi Khan says: 8/20/2017

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

avatar
Reply
VINAY KUMAR MUKKANI says: 9/11/2017

How to hide in mobile template

avatar
Reply
Rabbi Khan says: 9/11/2017

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 :)

avatar
Reply
Δημήτρης Μ. says: 11/27/2017

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

avatar
Reply
Rabbi Khan says: 12/07/2017

Dear Δημήτρης Μ :)
This widget will automatically detect the news feed and start display the latest post in news ticker.

avatar
Reply
Vamshi Gupta says: 1/07/2018

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

avatar
Reply
Rabbi Khan says: 3/26/2018

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.

avatar
Reply
LinkedIn Jobs says: 5/09/2018

i have tried the above scripts but it didn't work on my blog, there is some script texts just shown in the header

avatar
Reply
LinkedIn Jobs says: 5/10/2018

now i have installed the script successfully but i want to change the black color of "breaking news tab background" also the text font.

avatar
Reply
Blogger Spice says: ADMIN 5/10/2018

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.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *