Tempatnya Download Aplikasi full Apk, Mod, Pro, Premium untuk semua Sahabat Android.

Sunday, September 24, 2017

Tutorial Membuat Newsticker Dengan Typing Effect

Tutorial Membuat " Newsticker " Dengan " Typing Effect "
Screenshot " Newsticker " Dengan " Typing Effect "
Tutorial:
PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> 

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:
 ]]></b:skin> 

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  ]]></b:skin>
/* News Ticker Typing Effect */
#topmenu {
background-color:#292929;
overflow:hidden;
}
#latst {
float:left;
width:760px;
}
#newsticker {
color:#FAFAFA;
}
#newsticker a {
color:#FAFAFA;
text-decoration:none;
}
.left .ticker-controls,
.left .ticker-content,
.left .ticker-title,
.left .ticker {
float:left;
}
.ticker-wrapper.has-js {
height:34px;
overflow:hidden;
margin:0;
line-height:34px;
}
.ticker {
width:680px;
position:relative;
overflow:hidden;
}
.ticker-title {
background-color:#01B1D3;
padding:0 10px;
color:#FAFAFA;
font-weight:bold;
}
.ticker-content {
margin:0;
position:absolute;
font-weight:bold;
overflow:hidden;
white-space:nowrap;
line-height:34px;
padding:0 10px;
font-size:10px;
}
.ticker-content .date {
padding:0 5px 0 0;
border-right:1px solid #272727;
}
.ticker-swipe {
position:absolute;
top:0;
background-color:#292929;
display:block;
width:800px;
height:30px;
}
.ticker-swipe span {
margin-left:1px;
background-color:#292929;
border-bottom:1px solid #FAFAFA;
height:23px;
width:7px;
display:block;
}
.ticker-controls {
padding:8px 0 0;
margin:0;
list-style-type:none;
float:left;
display:none;
}
.ticker-wrapper.has-js:hover .ticker-controls {
display:block;
}
.ticker-controls li {
padding:0;
margin-left:5px;
float:left;
cursor:pointer;
height:16px;
width:16px;
display:block;
}
.ticker-controls li {
color:#FAFAFA;
position:relative;
}
.ticker-controls li.over {
color:#01B1D3;
}
.ticker-controls li.down {
color:#01B1D3;
}
.ticker-controls li:before {
top:0;
left:0;
line-height:18px;
}
.ticker-controls li.jnt-play-pause:before {
content:"\f04b";
}
.ticker-controls li.jnt-play-pause.paused:before {
content:"\f04c";
}
.ticker-controls li.jnt-prev:before {
content:"\f04a";
}
.ticker-controls li.jnt-next:before {
content:"\f04e";
}
.right .ticker-swipe {
/*right: 80px;*/
}
.right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker {
float: right;direction: rtl;
}
.right .ticker-controls {
padding-right: 6px;
}
.right .ticker-content .date {
float: right;
margin: 0 0 0 5px;
direction: ltr;
padding: 0;
}
.js-hidden {
display:none;
}
7. Seterusnya, cari kod dibawah:
</head>
8. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> // JQUERY NEWS TICKER by Rhodimus
// http://github.com/rhodimus/jQuery-News-Ticker (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:"#ticker-title-"+g,titleElem:"#ticker-title-"+g+" SPAN",tickerID:"#ticker-"+g,wrapperID:"#ticker-wrapper-"+g,revealID:"#ticker-swipe-"+g,revealElem:"#ticker-swipe-"+g+" SPAN",controlsID:"#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="ticker-title"><span><!-- --></span></div><p id="'+i.dom.contentID.replace("#","")+'" class="ticker-content"></p><div id="'+i.dom.revealID.replace("#","")+'" class="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="ticker-controls"><li id="'+i.dom.playPauseID.replace("#","")+'" class="jnt-play-pause controls"><a href=""><!-- --></a></li><li id="'+i.dom.prevID.replace("#","")+'" class="jnt-prev controls"><a href=""><!-- --></a></li><li id="'+i.dom.nextID.replace("#","")+'" class="jnt-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:"Latest",direction:"ltr",pauseOnItems:3000,fadeInSpeed:600,fadeOutSpeed:300}})(jQuery);   //Ajax JSON NewsTicker by MKR  function NewsTicker(a){(function(b){var c={blogURL:"",MaxPost:4,Speed:0.1,direction:"ltr",titleText:"Latest News",displayType:"reveal",Container:"#newsticker",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?max-results="+c.MaxPost+"&orderby=published&alt=json-in-script",function(s){var n,g,u,m,r,t,q,e,d,o,f,h="",p=s.feed.entry;if(p!==undefined){for(var l=0;l<p.length;l++){for(var k=0;k<p[l].link.length;k++){if(p[l].link[k].rel=="alternate"){n=p[l].link[k].href}}g=p[l].title.$t;o=p[l].published.$t.substring(0,10);u=o.substring(0,4);m=o.substring(5,7);r=o.substring(8,10);t=c.MonthNames[parseInt(m,10)-1];q=p[l].published.$t.substring(11,16);e=q.substring(0,2);d=q.substring(2,5);if(e<12){f="AM"}else{f="PM"}if(e===0){e=12}if(e>12){e=e-12}h+='<li class="news-item"><span title="'+t+" "+r+", "+u+'" class="date">'+e+""+d+" "+f+'</span> <a class="title" href="'+n+'">'+g+"</a></li>"}b(c.Container).html('<ul class="js-hidden" id="newstick">'+h+"</ul>").removeClass("loading");b("#newstick").ticker({speed:c.Speed,direction:c.direction,titleText:c.titleText,displayType:c.displayType})}else{b(c.Container).html("<span>No result!</span>").removeClass("loading")}},"jsonp")})(jQuery)}; </script>
Keterangan:
- Jika template anda sudah sedia ada script JQuery , padam kod yang di highlight berwarna hijau.

9. Klik Save Template

10. Untuk paparkan widget , Copy (CTRL+C) kod dibawah , letakkan pada " Layout >> Add a Gadget >> HTML/Javascript " . 
<div id='topmenu'>
<div id='latst'><div id='newsticker'/></div>
<script type='text/javascript'>
NewsTicker();
</script>

#Selesai :)
Sumber https://faiz-tutorial.blogspot.co.id/

Share on Facebook
Share on Twitter
Share on Google+

Related : Tutorial Membuat Newsticker Dengan Typing Effect