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

Sunday, September 24, 2017

Tutorial Membuat Newsticker Dengan Typing Effect Dan Ringkasan (hover)

Screenshot "Newsticker" Dengan "Typing Effect" Dan  Ringkasan (hover)

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 */
#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>
</div>

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

Share on Facebook
Share on Twitter
Share on Google+

Related : Tutorial Membuat Newsticker Dengan Typing Effect Dan Ringkasan (hover)