Make Recent Post with News Ticker Style use jQuery - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Recent Post with News Ticker Style use jQuery, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Javascript, Article jQuery, Article Snippet, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Recent Post with News Ticker Style use jQuery
link : Make Recent Post with News Ticker Style use jQuery

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/AVvXsEi24koWa7gJppPs6HyY16ENl_H5iiDcHZi4t8hlEFi1QvvfzKxccE56iDgzVEoEtOOhq2jo1vi3bcaQBxslU3ww7z2PxkGibcVIeUjOmlwoaOMkApOS8T0uuYYxyUZZHiH2C11VJy8nZBg//) 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

Thus articles Make Recent Post with News Ticker Style use jQuery

that is all articles Make Recent Post with News Ticker Style use jQuery This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Recent Post with News Ticker Style use jQuery with the link address https://autopostingblogspot.blogspot.com/2015/08/make-recent-post-with-news-ticker-style.html