Make Recent Post with News Ticker Style use jQuery

Tutorial lawas berbicara tentang news ticker Jika ingin penjelasan apakah yang di maksud dengan news ticker, silahkan baca via wikipedia :D AA Koben akan berbagi info bagaimana cara membuat recent post blogger using jQuery! Kalau sobat tertarik dengan yang memakai JavaScript murni, anda bisa meluncur ke alamat www.kompiajaib.com/2015/06/animated-news-ticker-recent-posts.html. Seperti yg gue bilang, tuts ini terhubung dengan jQuery script! Template sodara harus sudah tertanam script:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>Kalau sudah ada abaikan langkah ini jangan pasang lagi, lanjut ke langkah berikutnya.

.tickerwrapper {
position: relative;
}
.tickhead {
background: #dd4c39 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_GC3FlmhQFUWVuyj137wSvdrttPXJz-_vPhYpunuDtoVWao02cd0vNddk-Gij6fx_40Jeib_CS53zf5pgccBUG3z7pBeWMHYr38D1achar64UJhWvBCpLfjzbZjqTbEDuxGh7UIhRvm4/) no-repeat;
background-position: 125px 10px;
background-size: 20px;
position: absolute;
line-height: 41px !important;
height: 40px;
width: 125px;
padding: 0 40px 0 5px;
text-align: center;
color: #fff;
font: 600 15px 'pt sans', sans-serif;
z-index: 1;
top: 0;
left: 0;
}
.tick-er {
padding-left: 180px;
height: 40px !important;
overflow: hidden;
background: #555;
line-height: 40px !important;
}
.tick-er ul {
padding: 0;
margin: 0;
list-style: none;
}
.tick-er ul li a {
color: #fff;
font: 400 15px 'pt sans', sans-serif;
text-decoration: none;
}

Silahkan atur-atur en edit-edit kode CSS itu.

<script type='text/javascript'>//<![CDATA[
!function(t,e,n){function i(i,o){function a(){h.elem.children().css("margin",0).children().css("margin",0),h.elem.css({position:"relative",height:h.opts.height,overflow:"hidden"}),h.targ.css({position:"absolute",margin:0}),setInterval(function(){d()},100)}function r(){h.timer=setInterval(function(){1==h.winFocus&&l(h.opts.direction)},h.opts.interval),t(h.opts.controls.toggle).addClass("et-run").html(h.opts.controls.stopText)}function c(){clearInterval(h.timer),h.timer=0,t(h.opts.controls.toggle).removeClass("et-run").html(h.opts.controls.playText)}function l(t){var e,n,i;if(h.elem.is(":visible")){"up"==t?(e=":first-child",n="-=",i="appendTo") : (e=": last-child",n="+=",i="prependTo");var o=h.targ.children(e),s=o.outerHeight();h.targ.stop(!0,!0).animate({top:n+s+"px"},h.opts.speed,h.opts.easing,function(){o.hide()[i](h.targ).fadeIn(),h.targ.css("top",0),d()})}}function u(t){c(),l("up"==t?"up":"down")}function p(){var e=0,n=h.elem.css("display");h.elem.css("display","block"),h.targ.children().each(function(){e+=t(this).outerHeight()}),h.elem.css({display:n,height:e})}function f(e){var n=0;h.targ.children(": lt("+h.opts.visible+")").each(function(){n+=t(this).outerHeight()}),1==e?h.elem.stop(!0,!0).animate({height:n},h.opts.speed):h.elem.css("height",n)}function d(){"auto"==h.opts.height&&0!=h.opts.visible?(anim="init"==arguments.callee.caller.name?0:1,f(anim)):"auto"==h.opts.height&&p()}var h=this;return h.opts=t.extend({},s,o),h.elem=t(i),h.targ=t(i).children(":first-child"),h.timer=0,h.mHover=0,h.winFocus=1,a(),r(),t([e,n]).off("focus.jqet").on("focus.jqet",function(){h.winFocus=1}).off("blur.jqet").on("blur.jqet",function(){h.winFocus=0}),1==h.opts.mousePause&&h.elem.mouseenter(function(){h.timerTemp=h.timer,c()}).mouseleave(function(){0!==h.timerTemp&&r()}),t(h.opts.controls.up).on("click",function(t){t.preventDefault(),u("up")}),t(h.opts.controls.down).on("click",function(t){t.preventDefault(),u("down")}),t(h.opts.controls.toggle).on("click",function(t){t.preventDefault(),0==h.timer?r():c()}),{up:function(){u("up")},down:function(){u("down")},start:r,stop:c,options:h.opts}}var o="easyTicker",s={direction:"up",easing:"swing",speed:"slow",interval:2e3,height:"auto",visible:0,mousePause:1,controls:{up:"",down:"",toggle:"",playText:"Play",stopText:"Stop"}};t.fn[o]=function(e){return this.each(function(){t.data(this,o)||t.data(this,o,new i(this,e))})}}(jQuery,window,document),$(function(){$(".news-ticker").each(function(){var t=$(this).attr("data-domain"),e="http://www."+t+"/feeds/posts/summary/?max-results=99&alt=json-in-script",n=$(this);n.append('<div class="tickerwrapper"><span class="tickhead">Latest News</span><div class="tick-er"><ul></ul></div></div>'),$.ajax ({type:"GET",url:e,async:!1,contentType:"application/json",dataType:"jsonp",success:function(t){for(var e=1;e<t.feed.entry.length;e++){for(var i=0;i<t.feed.entry[e].link.length;i++)if("alternate"==t.feed.entry[e].link[i].rel){var o=t.feed.entry[e].link[i].href;break}var s=t.feed.entry[e].title.$t,a='<li><a href="'+o+'">'+s+"</a></li>";$(".tick-er ul",n).append(a)}$(".tick-er").easyTicker({direction:"up",easing:"swing",speed:"slow",interval:2e3,height:"auto",visible:0,mousePause:1})}})})});
//]]></script>

Pasang script itu, terserah mau telanjang macam begituh atau dihostingkan terlebih dahulu.

Pada script dengan tulisan /feeds/posts/summary/?max-results=99 Gantikan nominal 99 sesuai dengan kebutuhan. Makin besar nominal, makin lama loading :p
Untuk pemasangan/pemanggilan sobat tinggal membuat syntax HTML sebagai berikut<div class='news-ticker' data-domain='DOMAIN-OR-NAMA-BLOG'></div>Contoh<div class='news-ticker' data-domain='beben-koben.blogspot.com'></div>Silahkan pasang mau berapa biji, bebas asalkan jangan sama domainnya :))

Artikel ini saya comot dari bloggerever How to add recent post news ticker widget in Blogger using jQuery www.bloggerever.com/2014/08/how-to-add-recent-post-news-ticker.html Jika kalian kunjungi site tersbut, maka cari artikel dengan judul "Download free Magazine style template for Blogger" Sikat template keren punya \m/

Permiooosss...:-h