Begini Cara Memasang Recent Post by Label di Halaman Statis

Memasang Recent Post By Label Di Halaman Statis Blog - Mungkin sebagian sobat blogger belum ada yang tau Cara Memasang Recent Post by Label di Halaman Statis atau Cara membuat recent post by label. Meskipun cara seperti ini mungkin sudah banyak yang share oleh sobat blogger. Mungkin sobat pernah mengujungi suatu blog yang dimana menu navigasi yang berada di header biasa nya mereka memasukan link perlabel di menu tersebut tetapi link tersebut langsung menuju ke artikel perlabel seperti begini contoh nya search/label/Tips?&max-results=7.

Dan di artikel ini saya ingin membagi tutorial Cara Memasang Recent Post By Label Di Halaman Statis Blog. Jadi bila mana kita mengklik link tersebut akan masuk ke halaman statis terlebih dahulu. Dan yang pasti cara nya cukup mudah. Dan widget recent post ini berfungsi untuk menampilkan daftar artikel terbaru berdasarkan setiap label yang kalian buat.

Widget recent post perlabel ini bisa kita manfaatkan sebagai daftar isi atau sitemap di halaman statis di blog kalian. Bila kalian berminat silahkan ikuti langkah - langkah nya sebagai berikut.

Memasang Recent Post By Label Di Halaman Statis Blog

Sebelum kita memulai perlu kalian ketahui, Kode yang akan saya bagikan ini menggunakan ikon dari Fontawesome, jika belum ditambahkan. Tambahkan kode di bawah ini di atas kode </head> pada template sobat masing - masing.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Setelah itu silahkan sobat Buka halaman Blogger > Klik menu Halaman > Kemudian klik tombol Halaman baru untuk membuat artikel baru di halaman statis. Lalu copy kode di bawah ini di dalam tab HTML . Bila kalian memberi kata - kata atau isi di dalam nya, masukan kode di bawah ini dan letakan di bawah nya.

<div id="recentpostsae">
</div>
<div id="recentpostnavfeed">
</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{text-decoration:none;transition:all .3s}
button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
#recentpostsae .recentpostel{width:48.9%;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)}
#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/AVvXsEhkHLFd8N1nje_8YDr4M22bIcpt78ixtlPeF2NN_6l_UouDAxR3P70_MMSsXERJlOa8BbNxtLp6rHL1DDUs-IJv9TFcYvKpGnHhQy7YNG_r0sR7JqLf_6XYzAsqn-VdR8_9UicJMZehkxux/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
#recentpostnavfeed{display:table;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{width:100%;margin:0 0 10px 0}}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 18;
var startfeed = 0;
var urlblog = "https://www.teknomatch.com";
var charac = 0;
var urlprevious, urlnext;
function arlinafeed(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/AVvXsEiVsKVbDXZW6Z0zm0pTWBONwnAsx9VmBfhDVVcyHs7nZSY-szV57X3B6SOdqvi03OR__8jtepb0tRcw4RsPAWVnRXbwIZ0_zN2EC-UPm-MJ29rxseircXgHYVNfdgqVDJ7k3dtpoNanYXRY/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>"+arlinafeed(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/-/Smartphone"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>

Jangan lupa untuk di edit terlebih dahulu pada kode yang saya tandai.

Nilai                Keterangan

var numfeed : 18 (Jumlah postingan yang ditampilkan di tiap halaman)

var urlblog : https://www.teknomatch.com (Isi dengan alamat blog sobat)

var charac : Isi dengan jumlah summary post yang ingin ditampilkan

Edit pada bagian feed url ini, ganti Smartphone dengan nama label blog.

/feeds/posts/default/-/Smartphone

Jika ingin menampilkan feed halaman index saja tanpa label edit format feed jadi seperti ini

/feeds/posts/default

Dan terakhir kalian cukup klik tombol Publikasikan dan lihat hasilnya pada blog sobat.

Perlu kalian ketahui, Widget ini hanya bisa dipasang satu kali, jadi lakukan pengeditan sebelum postingan dipublish

Itulah Cara Memasang Recent Post By Label Di Halaman Statis Blog yang bisa saya bagikan pada artikel kali ini.Bila ada pertanyaan menyangkut dari isi artikel ini, silahkan tinggalkan komentar kamu dibawah. Dan jangan lupa untuk bagikan artikel ini ke teman-teman di social media. Sampai jumpa di tutorial selanjut nya. See you!

Code Script By ArlinaDzgn

Share this post