Recent Post Dengan Animasi jQuery

Pada kesempatan yang lalu saya menulis artikel tentang Widget Kotak Berlangganan Muncul dari Atas, dan kali ini saya akan share widget Recent Post/Artikel Terbau dengan Animasi jQuery, untuk yang berbau animasi pasti tidaka akan lepas dari yang namanya jQuery.min. Widget ini tidak menggunakan hosting java script sehingga loading menjadi lebih ringan, untuk kode/script saya dapatkan dari Template ExcluSive dari MKR-site.

Untuk tahap pemasangannya pun sangat mudah, berikut cara memasang widget Artikel Terbau dengan Animasi jQuery:
1. Pastikan template anda sudah terdapat kode jQuery

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

2. Kemudian masuk ke Tata Letak » Tambah Gadget » HTML/JavaScript dan letakkan kode berikut ini:

<style type='text/css'>
#recentpost li{border:0px solid #DDD;border-bottom:0;background:#FFF;padding:5px;overflow:hidden;height:82px}
.contxisi{font-size:95%;line-height:14px}
#recentpost li:last-child{border-bottom:1px solid #DDD}
#recentpost .thumbp{float:left;margin-right:5px}
#recentpost .thumbp a{display:block;width:70px;height:70px;border:4px double #AD3000;box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)}
#recentpost .thumbp img{width:100%;height:100%}
#recentpost{min-height:100px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjJwd2IoNYS3L0JreZksq0vdjaY-Q1PF_GRHA6NujB_H5SPBJWyk8huatsJtXE8hWG4k-xhkjKaOrMUU61xv0r78dAuIc7OB20vjNksd16iSQ3bgkhJp-ieSu1NLqDhPGs-IWwcSkXihA/s1600/download.gif);background-repeat:no-repeat;background-position:50% 50%}
.ketkomt span{display:block;float:left;width:100%;font-size:95%;line-height:14px}
#recentpost ul{height:470px;overflow:hidden;border-bottom:1px solid #DDD}
#recentpost .spyWrapper{height:100%;overflow:hidden;position:relative}
</style>
<script type='text/javascript'>
//<![CDATA[
var numpostx     = 10,
    thumbSize    = 70,
    contjumlah     = 100,
    pBlank         = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
    animatedRecentPost = true,
    limitspy     = 5,
    intervalspy = 2500,
    tickspeed     = 1000;
$(document).ready(function(){$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results="+numpostx+"",type:"get",dataType:"jsonp",success:function(d){var f,g,a;var b='<ul class="spyx">';for(var e=0;e<d.feed.entry.length;e++){var h=d.feed.entry[e];for(var c=0;c<h.link.length;c++){if(h.link[c].rel=="alternate"){f=h.link[c].href;break}}if("content" in h){g=h.content.$t}else{if("summary" in h){g=h.summary.$t}else{g=""}}if("media$thumbnail" in h){postimg=h.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+thumbSize+"-c")}else{postimg=pBlank}var k=/<\S[^>]*>/g;g=g.replace(k,"");if(g.length>contjumlah){g=g.substring(0,contjumlah)+"..."}a=h.title.$t;b+='<li><div class="thumbp"><a href="'+f+'" target="_blank"><img alt="'+a+'"src="'+postimg+'"/></a></div><div class="titlexp"><h4><a href="'+f+'" target="_blank">'+a+'</a></h4></div><div class="contxisi">'+g+"</div></li>"}b+="</ul>";document.getElementById("recentpost").innerHTML=b;(function(i){i.fn.newsTicker=function(l,j,m){l=limitspy||4;j=intervalspy||1000;m=tickspeed||400;return this.each(function(){var q=i(this),o=q.children();var p=function(){q.find("li:last").hide().prependTo(q).slideDown(m)},n=setInterval(p,j);q.css({height:o.outerHeight()*l,overflow:"hidden"}).hover(function(){clearInterval(n)},function(){n=setInterval(p,j)})})};if(animatedRecentPost){i(".spyx").newsTicker(limitspy,intervalspy,tickspeed)}i(window).load(function(){i(".spyx img").each(function(l){var j=i(this);setTimeout(function(){j.fadeIn(400)},400*(l+1))})})})(jQuery)}})});
//]]>
</script>
<div id="recentpost"></div>

3. Langkah terkahir Simpan Template dan liat hasilnya.
Untuk pengaturan tinggal anda tentukan sendiri, lihat kode yang berwarna.
Selamat Mencoba dan semoga bermanfaat.

Judul: Recent Post Dengan Animasi jQuery; Ditulis oleh Unknown; Rating Blog: 5 dari 5