Cara Membuat Sticky Recent Post Slide Out On Scroll

Sudah lama juga tidak updated postingan, bersama-sama lagi galau mau posting apa, pas lagi browsing nemu link generator untuk widget yang gunanya untuk membuat widget related post. Genarator ini biasa digunakan untuk membuat banyak sekali widget jadinya saya menemukan inspirasi dan mencoba untuk membuat Sticky Recent Post Slide Out On Scroll dan ternyata mampu di gunakan di blog saya ini, untuk teman yang mau mencobanya mampu dilihat dulu Tool Generatornya DISINI. 

Nah di postingan kali ini saya akan membuatkan Cara Membuat Sticky Recent Post Slide Out On Scroll di blog, caranya cukup mudah teman tinggal memodifikasi arahan Recent Post yang ada sehingga dikala halaman di scrol ke bawah akan muncul dan sticy, untuk teman yang tertarik ingin mencobanya mari simak bersama.

Kode CSS

Silahkan teman salin arahan CSS dibawah ini lalu letakkan sempurna diatas arahan ]]></b:skin> atau di arahan </style>

.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}

Kode Javascript
Setelah arahan CSS diatas terpasang silahkan teman salin kembali arahan javascript dibawah ini letakkan sempurna diatas arahan </body>

<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:"https://justandmyguys.blogspot.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>

Perhatikan arahan yang ditandai silahkan teman ganti dengan alamat url sobat

Di arahan diatas akan menampilkan thumbnail pada recent post dengan ukuran lebar 320px kemudian dengan ukuran tinggi yang otomatis menyesuaikan tinggi gambar jadi lumayan menarik tampilannya akan menyesuaikan sesuai dengan tinggi gambar.

Lalu bagaimana kalau teman ingin menentukan sendiri tinggi gambarnya biar dikala ditampilkan thumbnailnya tingginya sama untuk itu silahkan lakukan modif pada arahan height:auto ke height:160px pada arahan CSS dibawah ini

ul.rpw img{border:0;width:100%;height:auto;margin-bottom:-4px}

Dan Selesai, Selamat Mencoba....