Widget Recent Post Efek Slide Out
Seocips.com. Ok sobat kembali lagi akan kami bagikan widget recent post dengan efek slide yang tiba-tiba muncul ketika halaman postingan di scroll kebawah. Widget ini hampir mirip dengan widget slide artikel terkait yang juga muncul ketika halaman Blog di scroll kebawah cuma bedanya widget ini selain seperti slider juga lebih halus kelihatannya.

Widget ini pertama saya lihat ketika dibagikan oleh Adhy Suryadi yang adalah selaku pemilik blog kompi ajaib. Selain Recentpost widget ini juga bisa anda gunakan seperti widget artikel terkait di blog anda. Apakah anda tertarik ingin menrapkannya ke Blog? sebelumnya cek demonya dulu dibawah ini dan, Ok berikut ini adalah cara memasangnya ke Blog Blogger.



Cara Membuat Slide Recent Post Widget di Blogger 

Seperti biasa: Di blog anda masuk ke "Template" kemudian masuk ke " Edit HTML", selanjutnya cari kode ]]></b:skin> dan letakan kode dibawah ini kedalamya:
.related-posts-widget{position:fixed;bottom:80px;right:0;display:none}
.related-posts-widget h2{color:#555;margin:0;padding:3px 6px 3px 0;font-weight:300;font-size:26px;font-family:inherit}
ul.rpw{list-style-type:none!important;margin:0;padding:0}
ul.rpw li{width:322px;overflow:hidden;margin:0;position:relative;list-style-type:none!important}
ul.rpw a{text-decoration:none;outline:0}
ul.rpw img{border:0;width:100%;height:auto;margin-bottom:-4px}
ul.rpw strong{background:#59a5d9;color:#fff;z-index:5;line-height:1.2em!important;position:absolute;bottom:0;left:0;right:0;height:auto;padding:4px 8px;font-weight:400;font-size:14px;font-family:inherit}
ul.rpw a strong{display:none}
ul.rpw a:hover strong{display:block}
.ani-dur{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s;}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
Jika anda ingin memunculkan gambar di widget dengan tinggi yang sama silahkan ganti kode height:auto dengan tinggi yang anda inginkan misalnya height:165px pada kode CSS diatas. Jika anda membiarkannya atau tetap menggunakan height:auto maka tinggi gambar akan menyesuaikan seperti postingan anda.

Sekarang lanjutkan dengan mencari kode </body> dan letakan kode dibawah ini kedalamnya:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
(function(c){c.fn.relatedPostsWidget=function(s){if(!this.size())return this;s=c.extend({},c.fn.relatedPostsWidget.defaults,s);return this.each(function(){var k=c(this),z=0,g=null,p=null,t=0,q=0,l=-1,n=-1,u=-1,r=null,v=0,w=null,A="",b=s,F=function(){if(!((l+1)*b.show_n>=q&&!b.animate_loop))if(!v){c("li",g).eq(n).fadeOut(b.exit_time,B);b.show_n>1&&c("li",g).slice(n+1,u).fadeOut(b.exit_time)}},B=function(){if(g.parent().size()){l++;if(l*b.show_n>=q)l=0;n=l*b.show_n;u=(l+1)*b.show_n;c("li",g).eq(n).animate(r,
b.enter_time,"linear",C);b.show_n>1&&c("li",g).slice(n+1,u).animate(r,b.enter_time)}},C=function(){w&&clearTimeout(w);w=setTimeout(F,b.stay_time)},G=function(){r={};r[b.animate]="show";g.bind("mouseenter",function(){v=1}).bind("mouseleave",function(){v=0;C()});B()},x=function(){if(!(t||!g)){b.loading_class&&g.removeClass(b.loading_class);b.max_posts&&b.tags.length&&c("li:gt("+(b.max_posts-1)+")",g).remove();q=c("li",g).size();b.tags.length&&b.timeout&&b.max_posts&&c("img",g).each(function(){var d=
c(this);d.attr("rel")&&d.attr("src",d.attr("rel"))});if(b.show_n==0)c("li",g).show();else q&&G();t=1}},E=function(d){if(!t){z++;if(d.feed.entry){if(!g){k.html("");if(b.tags.length==0)b.recent_title&&c("<h2>"+b.recent_title+"</h2>").appendTo(k);else b.related_title&&c("<h2>"+b.related_title+"</h2>").appendTo(k);g=c('<ul class="rpw '+b.loading_class+'"></ul>').appendTo(k)}for(var i=0,o=d.feed.entry.length;i<o;i++){var e=d.feed.entry[i],h;a:{var f=0;for(h=e.link.length;f<h;f++)if(e.link[f].rel=="alternate"){h=
e.link[f].href;break a}h=""}f=e.title.$t;e=e.media$thumbnail?e.media$thumbnail.url:b.thumb_default;if(h!=A||b.tags.length==0)a:{var j=h,m=f,H=e;if(b.tags.length>0){e=c("li",g);f=0;for(var I=e.length;f<I;f++){var y=c("a",e.eq(f));h=D(y);if(y.attr("href")==j){j=y;m=++h;j.attr("score",m);b.post_score_class&&j.attr("class",b.post_score_class+m);for(j=f-1;j>=0;j--){m=c("a",e.eq(j));if(D(m)>h){f-j>1&&e.eq(j).after(e.eq(f));break a}}f>0&&e.eq(0).before(e.eq(f));break a}}}e=j;f=m;h=H;if(b.thumb_size!="s72-c")h=
h.replace("/s72-c/","/"+b.thumb_size+"/");j=b.tags.length&&b.timeout&&b.max_posts?"rel":"src";g.append('<li style="display:none"><a href="'+e+'" title="'+f+'">'+(b.thumbs&&h?"<span><img alt='thumbnail post' "+j+'="'+h+'" title="'+f+'"/></span>':"")+(b.titles?"<strong>"+f+"</strong>":"")+"</a></li>")}}}if(z>=b.tags.length){p&&clearTimeout(p);x()}}},D=function(d){d=parseInt(d.attr("score"));return d>0?d:1},J=function(){if(!b.tags){b.tags=[];c('a[rel="tag"]:lt('+b.max_tags+")").each(function(){var e=c.trim(c(this).text().replace(/\n/g,
""));if(c.inArray(e,b.tags)==-1)b.tags[b.tags.length]=e})}var d=b.blog_url+"/feeds/posts/summary/";if(b.tags.length==0){if(b.timeout)p=setTimeout(x,b.timeout);c.ajax({url:d,data:{"max-results":b.max_posts,alt:"json-in-script"},success:E,dataType:"jsonp",cache:true})}else{if(b.timeout)p=setTimeout(x,b.timeout*b.tags.length);for(var i=0,o=b.tags.length;i<o;i++)c.ajax({url:d,data:{category:b.tags[i],"max-results":b.posts_per_tag,alt:"json-in-script"},success:E,dataType:"jsonp",cache:true})}};(function(){var d=
k.attr("data-options");if(!d){var i=k.html().replace(/\n|\r\n/g,"");if(i)if((i=i.match(/<!--\s*(\{.+\});?\s*--\>/))&&i.length==2)d=i[1]}if(d){if(d.indexOf("{")<0)d="{"+d+"}";try{b=eval("("+d+")")}catch(o){a.html('<b style="color:red">'+o+"</b>");return null}b=c.extend({},c.fn.relatedPostsWidget.defaults,b)}if(b.post_page_only?location.pathname.match(/^\/\d{4}\/\d\d\/[\w\-\_]+\.html/):true){A=location.protocol+"//"+location.host+location.pathname+(b.url_querystring?location.search:"");J()}})()})};
c.fn.relatedPostsWidget.defaults={blog_url:"http://www.seocips.com/",max_posts:5,max_tags:5,posts_per_tag:5,tags:false,loading_class:"rpw-loading",related_title:"Related Posts",recent_title:"Recent Posts",post_score_class:"",post_page_only:0,thumb_default:"",thumb_size:"s72-c",thumbs:1,titles:1,url_querystring:0,timeout:1500,show_n:0,stay_time:5E3,enter_time:200,exit_time:200,animate:"opacity",animate_loop:1}})(jQuery);jQuery(document).ready(function(){jQuery("div.related-posts-widget").relatedPostsWidget()});
$(window).scroll(function(){if ($(this).scrollTop()>1000){$('.related-posts-widget').fadeIn();}else{$('.related-posts-widget').fadeOut();}});
//]]>
</script>
<div class="related-posts-widget ani-dur fadeInRight">
<!-- {
    thumb_size:'s320'
,max_posts:5
,show_n:1
} -->
</div>
</b:if>
Ganti kode http://www.seocips.com/ dengan Url / alamat blog/website anda.

LIVE DEMO Recent Post Slide Out Effect


Ok sobat sekian Widget blog untuk saat ini dan semoga saja dapat bermanfaat untuk anda. Jika anda tertarik dengan widget recent post yang lain lihat juga beberapa Widget blog di sini. Terimakasih.
2 Komentar untuk "Membuat Recent Post Efek Slide Ketika Halaman Di Scroll"

memang widget ini saya liat di blog mas adhy masih pake kok..

kalo bikin widget seperti Populer Post di sebelah kanan ini gimana ya? Share dong. Makasih sebelumnya.