Cara Memasang Widget Recent Posts Berdasarkan Label Blog

Recent posts berdasarkan label atau recent posts by category pada halaman statis atau biasa disebut juga dengan recent posts by labels adalah postingan yang sudah pernah saya buat sebelumnya. Anda bisa check pada tutorial sebelumnya tentang Membuat Recent Posts by Label Di Halaman Statis. Namun ada beberapa pembaharuan yang sangat ingin saya bagikan kepada agar bisa dterapkan juga pada blog Anda.

Recent posts berdasarkan label ini adalah pengganti kategori yang terpasang pada widget sidebar atau biasanya dipasang pada menu header. Labels atau tags berfungsi sebagai central penggabungan beberapa jenis artikel yang serupa dan disatukan pada sebuah label khusus.

Hal ini tentunya tergantung dari pengguna website itu sendiri tentang bagaimana cara mengatur label sesuai jenis postingan pada blognya. Pemasangan label juga bertujuan agar tampilan blog menjadi lebih rapi.

Cara Membuat Halaman Recent post by label widget blogger

Sesuai dengan request dari salah satu pembaca blog yang ingin membuat tampilan halaman recent post yang mirip dengan yang digunakan oleh dewa plokis blog. Silakan simak langkah-langkah pemasangannya berikut ini.

1. Silakan Login ke Akun Blogger Anda.
2. Pilih Page
3. Klik New Page

4. Klik HTML (bukan compose)

Tips : Usahakan untuk mengisi page title terlebih dengan judul tag label, agar tidak terdapat penambahan angka pada tampilan html halaman

5. Kemudian pastekan kode dibawah ini didalamnya

<div id="recentpostsdp"></div><div id="dewaplokisnavfeed"></div><style scoped="" type="text/css">
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsdp{margin:0}
#recentpostsdp .recentpostel{width:47%;background:#fff;display:inline-block;margin:0 20px 10px 0;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostsdp .recentpostel:nth-child(even){margin:0 0 10px 0}
#recentpostsdp .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px}
#recentpostsdp .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
#recentpostsdp .recentpostel:hover{background-color:#fefefe}
#recentpostsdp .recentpostel 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://1.bp.blogspot.com/-GeeSB564W-o/Wum3zpg8qNI/AAAAAAAAGmM/aRoomVJFtSQfUoAJrRjD6h1wTSU8J8DUQCLcBGAs/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
#dewaplokisnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#dewaplokisnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#dewaplokisnavfeed span{padding:0;cursor:pointer;transition:all .3s}
#dewaplokisnavfeed .next,#dewaplokisnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#dewaplokisnavfeed .next{float:right;margin:0 0 0 10px}
#dewaplokisnavfeed .previous{float:left;margin:0 10px 0 0}
#dewaplokisnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#dewaplokisnavfeed a:hover,#dewaplokisnavfeed span.noactived{color:#ccc}
#dewaplokisnavfeed i{font-family:fontawesome;font-style:normal}
#dewaplokisnavfeed .next:hover,#dewaplokisnavfeed .previous:hover,#dewaplokisnavfeed .home:hover{background:#fff;color:#222;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){#recentpostsdp .recentpostel{width:96.5%;margin:0 0 10px 0}} #recentpostsdp .recentpostel {padding:5px;}
</style><br />
<a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://www.dewaplokis.com/2020/01/memasang-recent-post-by-label.html
" rel="nofollow">Recent Posts By Label</a>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 18; // Nilai Maksimal Postingan yang tampil
var startfeed = 0;
var urlblog = "https://www.dewaplokis.com";
var charac = 0;
var urlprevious, urlnext;
function dewafeed(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 showrecentpostsdp(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' 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://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img data-src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+dewafeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsdp").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("dewaplokisnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsdp",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsdp").innerHTML="<div id='recentpostload'></div>",document.getElementById("dewaplokisnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default/-/Windows"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("data-src",t),n.setAttribute("id","dewalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("dewalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>

6. Terakhir, klik publish

Ubah https://www.dewaplokis.com dengan URL milik Anda. dan Ubah Windows dengan nama label yang ingin Anda gunakan. Untuk nilai var numfeed = 18; silakan diubah sesuai selera

Silakan ulangi cara yang sama pada label yang berbeda pada blog Anda dan ingat untuk memperhatikan huruf BESAR dan kecil pada penggunaan tag / labelnya. pastikan sudah sesuai dengan penulisan yang ada pada label blog Anda.

Cara Kedua Membuat Recent Post Berdasarkan Kategory (Tag / Label)

Pada Cara yang kedua ini, tampilan recent post tidak terdapat image dan hanya menampilkan judul postingan saja. Caranya pemasangannya sama dengan cara diatas dengan langkah 1 sampai langkah ke 4. Dan untuk langkah kelima adalah menggunakan script dibawah ini:

<script>
    var numposts = 500;
    var standardstyling = true;
  </script>
  <script type="text/javascript">
    function showrecentposts(json) {
    for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }}
    posttitle = posttitle.link(posturl);
    if (standardstyling) document.write('<li>');
    document.write(posttitle);}
    if (standardstyling) document.write('</li>');}
  </script>
  <script src="https://dewaplokis.blogspot.com/feeds/posts/default/-/SEO?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=500"></script>

Ubah https://dewaplokis.blogspot.com dengan milik Anda dan ubah SEO dengan judul label yang Anda gunakan. Ingat Untuk memperhatikan huruf BESAR dan kecil agar script recent post berdasarkan label ini bisa bekerja dengan baik.

Untuk hasilnya bisa Anda check pada halaman statis saya dibawah ini:

• Result

Demikian tutorial singkat Cara Memasang Recent Post Berdasarkan Kategori Widget Blogger. Silakan dishare jika berkenan. Dan jika ada yang masih kurang jelas, lanjutkan di kolom komentar. Terima kasih.

Share