Cara Membuat Recent Post per Label dengan Tombol Next Previous

Cara mudah membuat Recent Post sesuai Label dengan Tombol Next dan Previous. Anda tinggal copy paste kode berikut ke postingan atau ke page statis, atau ke widget. Untuk CSS bisa Anda sesuaikan dengan kebutuhan. Jika ada kesulitan, silakan tinggalkan komentar dan ikuti.

 

<div id="kode1"></div>
<div id="kode2"></div>

<style scoped="" type="text/css">
*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box}
a,a:link,a:visited{transition:all .3s}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#kode1{margin:0}
#kode1 .kode2spot{width:48.9%;display:inline-block;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#kode1 .kode2spot:nth-child(even){margin:0 0 0px 0}
#kode1 .kode2spot img{padding:0;float:left;margin:0;margin-right:13px;width:72px}
#kode1 .kode2spot h6,.kode2spot h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;}
#kode1 .kode2spot p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy-Foh7PKQIXCaSye3f0s5gx_JafaRHXfsOnL2EOQxdM0uWDGHLlo2R0FNKDl-fO4SoizHfJEmXcTDHVg8atm5_-Rg4H8nzgajyaPNDX7pR7UCobSlXGAzhFbjUiSstr1lygEGCpVXCO2j/s1600/loader.gif) no-repeat 50% 50%;height:470px}
#kode2{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#kode2 a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#kode2 span{padding:0;cursor:pointer;transition:all .3s}
#kode2 .next,#kode2 .previous{position:relative;overflow:hidden;display:inline-block;background-repeat: no-repeat;height:39px;width:39px;border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#kode1 a img{border-radius: 100em;}
#kode2 .next{background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-uHX16NbzW-8Ji1GV2oZnP_K6ehbF1mxf0ngvvUPWMvI-dSq6r9aEEYMrNLqdAtUDo9YtGWt5meKcWSag6Hz8xzGJPYXKHUNhkRU7SeS1_a9TXhKyYc89OPzzZdhg16nO8R1z6X1-A/s39/panah+kanan+suwur.com+.png");float:right;margin:0 0 0 10px}
#kode2 .previous{background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq3nvtvrJJc_QUQPlPEZMPxmO9KujJLIfeg8VOvcw9hrCpZhB6DhxZ6vhgMvMgnQ_PRaHckt_mcGVjnY8Wr3hGkgjO-PescWjz_u8oKHmkomAQRPn3gkYqKYOfGT6ekOsO4j_20xdnkA/s39/panah+kiri+suwur.com+.png");float:left;margin:0 10px 0 0}
#kode2 .home{background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl3oUIvn18iZz_1I6HU3Vk6xZxlZXCWxLf_V3Ii611KAEaswb7MLG6q2e1eMybTaXTdxbyvym8fncItSsWX746qgM6Do03z1w4jqDomMVF4C79qQj7VrA5Rgy3rGPA92Jqkl0RD9XHiw/s39/icon+home+untuk+omasae+.png");background-repeat: no-repeat;height:39px;width:39px;border-radius:50%;display:table;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#kode2 span.noactived{cursor: context-menu;}
  .noactived {opacity: 0.2;background-size: 80% 100%;}
#kode2 i{font-family:fontawesome;font-style:normal}
#kode2 .next:hover,#kode2 .previous:hover,#kode2 .home:hover{box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
@media screen and (max-width:993px){#kode1 .kode2spot{width:100%;margin:0 0 10px 0}}
</style>

<script type='text/javascript'>
//<![CDATA[
var jumlahpost = 8;
var ambilpost = 0;
var alamatsitus = "https://www.jayasteel.com/";
var namalabel = "Besi%20Beton";
var snippet = 140;
var tombolkiri, tombolkanan;
function kode1feed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showkode1(e){var t,n,r,a,i,s="";tombolkiri="",tombolkanan="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(tombolkiri=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(tombolkanan=e.feed.link[l].href);for(var d=0;d<jumlahpost&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-uHX16NbzW-8Ji1GV2oZnP_K6ehbF1mxf0ngvvUPWMvI-dSq6r9aEEYMrNLqdAtUDo9YtGWt5meKcWSag6Hz8xzGJPYXKHUNhkRU7SeS1_a9TXhKyYc89OPzzZdhg16nO8R1z6X1-A/s72/panah+kanan+suwur.com+.png",s+="<div class='kode2spot'>",s+="<a target='_blank' href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a target='_blank' href='"+r+"'>"+n+"</a></h6>",s+="<p>"+kode1feed(i,snippet)+"</p>",s+="</div>"}document.getElementById("kode1").innerHTML=s,s="",s+=tombolkiri?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='f-left'></i></a>":"<span class='noactived previous'><i class='f-left'></i></span>",s+=tombolkanan?"<a href='javascript:navigasifeed(1);' class='next'><i class='f-right'></i></a>":"<span class='noactived next'><i class='f-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='f-home'></i></a>",document.getElementById("kode2").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=tombolkiri.indexOf("?"),n=tombolkiri.substring(t)):1==e?(t=tombolkanan.indexOf("?"),n=tombolkanan.substring(t)):n="?start-index=1&max-results="+jumlahpost+"&orderby=published&alt=json-in-script",n+="&callback=showkode1",incluirscript(n)}function incluirscript(e){1==ambilpost&&removerscript(),document.getElementById("kode1").innerHTML="<div id='recentpostload'></div>",document.getElementById("kode2").innerHTML="";var t=alamatsitus+"/feeds/posts/default/-/"+namalabel+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","kode1label"),document.getElementsByTagName("head")[0].appendChild(n),ambilpost=1}function removerscript(){var e=document.getElementById("kode1label"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>

Hasil dari kode html, css, dan javascript tersebut, bisa Anda lihat pada tampilan dibawah ini.
Kode yang diberi tanda merah bisa anda sesuaikan, demikian juga dengan pengaturan css-nya.