Cara Membuat Recent Post Slider Di Blog

Cara Membuat Recent Post Slider Di Blog - Pada kali ini kita akan membuat recent post slider atau membuat recent post slider otomatis di blog. Recent post slider merupakan suatu element atau widget untuk menampilkan postingan atau artikel terbaru dari blog dalam bentuk slider dan sangat berguna untuk seo blog karena dapat memberikan internal link. Dengan ini pengunjung dapat mengetahui postingan terbaru dari blog kita. Recent post slider ini sangat minimalis serta otomatis sehingga bisa di pasang di sidebar blog. Bagi anda yg ingin membuat recent post slider di blog, simak langkah-langkah berikut ini.

Live Demo

CSS Recent Post Slider

• Login ke akun blogger.
• Kemudian klik menu template.
• Klik edit html.
• Pastekan css berikut diatas ]]></b:skin>.

.recent-slider-wrap { position: relative; width: 300px; margin: 0 auto; } .recent-post-slider { overflow: hidden; position: relative; width: 300px; height: 280px; border-top-left-radius: 4px; border-top-right-radius: 4px; background: #f3f3f3; } .image_reel { position: absolute; top: 0; left: 0; overflow: hidden;} .image_reel img {overflow: hidden;float: left;} .paging { background: #444; padding: 5px 0 0; text-align: center; z-index: 100; } .paging a { background: #eee; width: 10px; height: 10px; display: inline-block; margin: 3px; border: none; outline: none; border-radius: 50%; } .paging a.active { background: #e75151; border:none; outline:none; } .paging a:hover { background: #d1d1d1; } .info { display: none; position: absolute; bottom: 0; left: 0; z-index: 101; text-align: center; width: 100%; overflow: hidden; } .info a{color: #444;font-size: 16px;}

Javascript Recent Post Slider

• Login ke blogger.
• Kklik menu template.
• Edit html.
• Pastekan script berikut diatas </head>.

<script type='text/javascript'>//<![CDATA[ function removeHtmlTag(e,t){for(var i=e.split("<"),a=0;a<i.length;a++)-1!=i[a].indexOf(">")&&(i[a]=i[a].substring(i[a].indexOf(">")+1,i[a].length));return i=i.join(""),i=i.substring(0,t-1)}function showrecentposts1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array;for(var t=0;t<numposts1;t++){var i,r,n=e.feed.entry[t],l=n.title.$t;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){r=n.link[o].href;break}for(var o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){i=n.link[o].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var m=[1,2,3,4,5,6,7,8,9,10,11,12],f=["January","February","March","April","May","June","July","August","September","October","November","December"],p=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),h=(postdate.split("-")[0],0);h<m.length;h++)if(parseInt(p)==m[h]){p=f[h];break}var u='<div class="info"> <a href="'+r+'">'+l+"</a></div> ";document.write(u),j++}}function showrecentposts2(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array;for(var t=0;t<numposts1;t++){var i,r,n=e.feed.entry[t];n.title.$t;if(t==e.feed.entry.length)break;for(var l=0;l<n.link.length;l++)if("alternate"==n.link[l].rel){r=n.link[l].href;break}for(var l=0;l<n.link.length;l++)if("replies"==n.link[l].rel&&"text/html"==n.link[l].type){i=n.link[l].title.split(" ")[0];break}if("content"in n)var o=n.content.$t;else if("summary"in n)var o=n.summary.$t;else var o="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=o,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var g=[1,2,3,4,5,6,7,8,9,10,11,12],m=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),p=(postdate.split("-")[0],0);p<g.length;p++)if(parseInt(f)==g[p]){f=m[p];break}var h='<a href="'+r+'"><img src="'+img[t]+'" width="300" height="250"/></a>';document.write(h),j++}}jQuery(document).ready(function(){$(".paging").show(),$(".paging a:first").addClass("active");var e=$(".recent-post-slider").width(),t=$(".image_reel img").size(),i=e*t;$(".image_reel").css({width:i}),rotate=function(){var t=$active.attr("rel")-1,i=t*e;$(".paging a").removeClass("active"),$active.addClass("active"),$(".info").stop(!0,!0).slideUp("slow"),$(".info").eq($(".paging a.active").attr("rel")-1).slideDown("slow"),$(".image_reel").animate({left:-i},500)},rotateSwitch=function(){$(".info").eq($(".paging a.active").attr("rel")-1).slideDown("slow"),play=setInterval(function(){$active=$(".paging a.active").next(),0===$active.length&&($active=$(".paging a:first")),rotate()},1e4)},rotateSwitch(),$(".paging a").click(function(){return $active=$(this),clearInterval(play),rotate(),rotateSwitch(),!1})}),imgr=new Array,imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnimrE8AEdpT1zlNa3RCG8isWj7nokADntu4T59oJ_Qg0C7My0jZFZF8VwqJHtZj7tFIFqGmpweRkOFYelPwcasI3mV5AzQKp0Bs5ejZdbUod2P2bhkgPF1FwybRRuOOecH3YKISj3Bus/s1600/no+image.jpg",showRandomImg=!0,aBold=!0,summaryTitle=20,numposts1=6; //]]></script>

• Kemudian klik simpan template

HTML Recent Post Slider

• Masuk ke blogger.
• Klik menu tata letak.
• Klik tambahkan element/ add gadget.
• Lalu pilih HTML/Javasript.
• Kemudian pastekan kode di bawah ini.

<div class="recent-slider-wrap">
<div class="recent-post-slider">
<div class="image_reel">
<script src="//tapike.com/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2"></script>
</div>
<script src="//tapike.com/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1"></script>
</div>
<div class="paging">
<a href="#" rel="1"></a>
<a href="#" rel="2"></a>
<a href="#" rel="3"></a>
<a href="#" rel="4"></a>
<a href="#" rel="5"></a>
<a href="#" rel="6"></a>
</div>
</div>

• Klik simpan

Demikianlah tutorial mengenai cara membuat recent post slider atau cara membuat recent post slider otomatis di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.