Selamat datang diblog download film-film terbaru 2017, Silahkan download sepuasnya gan. . . "Jangan lupa ikuti Budi Studio di media sosial ya guys"
"Perlu diketahui, File download yang terdapat pada blog ini didapatkan dari web pencarian di internet. Admin tidak menyimpan file-file tersebut di server sendiri dan Admin hanya menempelkan link-link tersebut di blog ini.
Home » , » Cara Membuat Recent Post Dengan Animasi jQuery

Cara Membuat Recent Post Dengan Animasi jQuery

Posted by Budi Studio on Friday, March 3, 2017

- - Advertisement - -


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(http://4.bp.blogspot.com/-h0CltuAVwSs/UK3GfMM7EOI/AAAAAAAAG1E/51IsS_L6Ap8/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.


Cara Download : Klik link download tunggu 5 detik, selanjutnya klik lewati



Previous
« Prev Post

0 komentar:

Post a Comment

Pemberitahuan Film: Jika linknya hanya menuju iklan-iklan, artinya film tersebut belum ada atau Coming Soon..

- - - - - - - - - - - - - - - - - - - - - - - - - -
Berikan komentar terbaikmu guys..

1. Kalau link mati/error laporkan disini.
2. dilarang promosi/jualan.
3. No Spam
4. Kalau mau request Comment aja...
5. Kalau jatuh cinta dengan admin, Commentnya di bawah ya