news tickerJika 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.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;
}
<script type='text/javascript'>//<.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.!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+"
//]]></script>
Pada script dengan tulisan
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 :))
Permiooosss...:-h
Sekarang jika sobat ingin mengubah warna tombol pemutar, menyembunyikan informasi player dan mengedit dimensi player, maka kita dapat memasukkan atribut dengan syntax seperti dibawah ini
Penulisan syntax diatas hanya contoh saja, rincian lengkap tentang cara menggunakan/menuliskan syntax shortcode-plugin akan dibagi dalam tutorial mendatang (UPDATED)