Membuat Recent Post Efek Slide Ketika Halaman Di Scroll
Ditulis oleh: Ditulis pada: April 15, 2022
Anisuka.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.
Cara Membuat Slide Recent Post Widget di Blogger
.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}
<b:if cond=’data:blog.pageType == "item"’>
<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|rn/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}/dd/[w-_]+.html/):true){A=location.protocol+”//”+location.host+location.pathname+(b.url_querystring?location.search:””);J()}})()})};
c.fn.relatedPostsWidget.defaults={blog_url:”https://www.anisuka.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>
LIVE DEMO Recent Post Slide Out Effect
