Cara Membuat Recent Post By Label di Homepage Post

Ditutorial kali ini saya akan membagikan sebuah tutorial membuat recent post berdasarkan label dihomepage postingan blog kamu, sebenarnya udah banyak tutorial membuat recent post by label, namun disini saya tetap akan berbagi.

Recent post berdasarkan label ini sangat berguna untuk blog kamu yang memiliki banyak label, karna ingin menggabungkan atau menyatukan semua kategori artikel yang sama dalam satu barisan, yang akan membuat pengunjung menjadi jauh lebih mudah menelusuri artikel tersebut. Nah bagi teman teman blogger yang penasaran yuk langsung aja ikuti tutorial dibawah ini.

Cara Membuat Recent Post Berdasarkan Label di Homepage Post

1. Pertama, login dulu ke Blogger,
2. Pada dashboard Blogger pilih TEMA ⇒ Edit HTML,
3. Kemudian, cari kode </b:skin> atau kode </style>, setelah ketemu copy kan code CSS dibawah ini dan letakkan tepat diatas kode yang sudah saya sebutkan sebelumnya,

   /* RECENT POST BY LABEL CSS */
   #recenttopic h2{color:#222;font:600 15px 'Poppins',sans-serif}
   #recenttopic h2 a { float: right; font-size: 10px; color: #555; }
   #recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
   #recentpostsae{margin:0}
   #recentpostsae .recentpostel{width:45%;background:#fff;display:inline-block;margin:0 10px 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)}
   #recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0}
   #recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px}
   #recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
   #recentpostsae .recentpostel:hover{background-color:#fefefe}
   #recentpostsae .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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzvvz1uv6C1iAyf9fCu6u24B_85-TOVDYKsolF2F05SGs8c11nX2WStQTkeWfELufj-OHChJesysSdbLOD8VQS4ld9gC2XvvKHXMSGfgmelPEgjnWnq4kQLs12HBhQFKts6BXTlHnEqQ8F/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
   #recentpostnavfeed{display:none;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
   #recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
   #recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s}
   #recentpostnavfeed .next,#recentpostnavfeed .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)}
   #recentpostnavfeed .next{float:right;margin:0 0 0 10px}
   #recentpostnavfeed .previous{float:left;margin:0 10px 0 0}
   #recentpostnavfeed .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)}
   #recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc}
   #recentpostnavfeed i{font-family:fontawesome;font-style:normal}
   #recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .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){#recentpostsae .recentpostel{box-sizing:border-box;width:100%;margin:0 0 10px 0}}
   

4. Terakhir copykan kode HTML dan Javascript dibawah ini, jika kamu pengguna template viomagz silahkan letakkan kodenya dibawah <div id='wrapper'>, nah jika kamu tidak memakai template Viomagz silahkan cari kode yg mirip-mirip atau kamu juga dapat memasang kode tersebut di Widget Bawah Navigasi Template yang kamu miliki,

   <div id="recenttopic"><h2>BLOGGER<a href="/search/label/Blogger">Tampilkan Selengkapnya</a></h2></div>
   <b:if cond='data:view.isHomepage'>
   <div id='recentpostsae'>
   </div>
   <div id='recentpostnavfeed'>
   </div>
   <script type='text/javascript'>
   //<![CDATA[
   var numfeed = 6;
   var startfeed = 0;
   var urlblog = "https://www.anirocksite.com/";
   var charac = 0;
   var urlprevious, urlnext;
   function anirockfeed(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 showrecentpostsae(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.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/AVvXsEg17vM-ncVOmqh6pR426wBcnQ3deHgcWdkXKBj0gNdm1uVMDUaiz1YwYcdAPB3cI1Xh3EMTu6dUqGdPXSvhLlWiCb3YtIgcpxgYwOsd0oAS1-xG1jxFcAcPTkwk5wPDHYGNvDut1EMajouf/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+anirockfeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsae").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("recentpostnavfeed").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=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default/-/BLOGGER"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","anirocksitelabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("anirocksitelabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
   //]]>
   </script>
     </b:if>
   

   Pada teks yang saya beri highlighter silahkan kalian ganti dengan punyamu,
   

   /search/label/Blogger // Blogger Ganti dengan Label
   var numfeed = 6; // Jumlah yang ingin Ditampilkan
   var urlblog = "https://www.anirocksite.com/" // Alamat Blog
   /feeds/posts/default/-/BLOGGER // BLOGGER Ganti dengan Label
5. Terakhir Simpan/Save Template.

Sekian tutorial membuat recent post berdasarkan label dihomepage postingan blog, jika tampilan recentpostnya kurang menarik, silahkan desain lagi biar jadi lebih menarik :D.

Sebenarnya itu juga bisa dipasang di Halaman statis blog, tapi kamu harus merubah sedikit aja css dari #recentpostae {display:none(menjadi table);bla bla bla}.

DEMO