Scribd
Upload
113 views4 pages

News Tricker Code

This document provides code to add a news ticker to a website. It includes: 1) CSS styling for the ticker wrapper and elements. 2) JavaScript code to initialize the ticker, load content via Ajax or HTML, and control playback, navigation and interactions. 3) Instructions to paste the code in the correct locations in the HTML document. The code allows building a news ticker that automatically cycles through headlines or brief news items at a customizable speed, and includes playback controls.

Uploaded by

hp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
113 views4 pages

News Tricker Code

This document provides code to add a news ticker to a website. It includes: 1) CSS styling for the ticker wrapper and elements. 2) JavaScript code to initialize the ticker, load content via Ajax or HTML, and control playback, navigation and interactions. 3) Instructions to paste the code in the correct locations in the HTML document. The code allows building a news ticker that automatically cycles through headlines or brief news items at a customizable speed, and includes playback controls.

Uploaded by

hp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

This tag paste after <head> tag

<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'/>

This code past before ]]></b:skin>(ctrl+f or cmd+f and find this ]]></b:skin>

/* Jquery News Ticker by http://www.bloggingfortrick.blogspot.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.over{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}

Change this url https://bloggingfortrick.blogspot.com


and paste your blogger url

Paste this code before </head> tag

<script type='text/javascript'>
//<![CDATA[
// News Ticker with Controller by http://www.bloggingfortrick.blogspot.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("contro
ls")){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].nodeNa
me=="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.n
ewsArr)-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.dis
playType=="scroll"){}else{a(i.dom.revealElem).show(0,function()
{a(i.dom.contentID).css(e.direction,s+"px").show();animationAction=e.direction=="ri
ght"?{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.revealI
D).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.revealI
D).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.title
Elem+","+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).h
tml(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.po
sition].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",dis
playType:"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.blogsp
ot.com/-
IsmZS28MJMU/V6gPK2Ysu0I/AAAAAAAAPc0/wpNWe7a6EqkmWepssoXTGbgP4koYJ8xbACLcB/s1600/Blo
ggerSpice%252Bblank.png",tagName:false,MonthNames:
["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};c=b.exte
nd({},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(postc
ontent.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.Mo
nthNames[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.Sp
eed,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>
Change this url https://bloggingfortrick.blogspot.com
and paste your blogger url

You might also like