[iklan]

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.



1 komentar
  1. Update harga besi beton

    Untuk harga terbaru hari ini via WA Harga terbaru besi beton dari pabrik besi beton di Surabaya. Update harga terkini tersebut berlaku untu
    Besi beton adalah : fungsi baja Tulangan

    Kali ini kita akan mencoba membuat tulisan mengenai pengertian besi beton beserta fungsi atau kegunaannya. Sebagaimana namanya besi beton a
    Toko besi beton di Surabaya

    Kami melayani kebutuhan untuk toko besi beton di Surabaya. Bagi anda pemilik toko besi beton juga termasuk produk wiremesh yang berada di S
    Jual besi beton dan Wiremesh

    Ini adalah tulisan mengenai besi beton dan wermes (wiremesh). Dibuat dengan bantuan blogger menggunakan HP ditulis dengan Google voice.&nbs

    BalasHapus


. . .
 
© 2011 - | Buku PR, TUGAS, dan Catatan Sekolah | www.suwur.com | pagar | omaSae | AirSumber | Bengkel Omasae, | Tenda Suwur | Versi MOBILE