How to Install Recent Posts by Label on Static Pages | Droidnur123

This time Droidnur123 will provide a Recent Post by Label widget that you can install on your blog's static page. This widget is the result of a modification of the recent post widget that I have published in the Recent Post Widget with Navigation post. This widget serves to display a list of the latest articles by the label.

We can use this widget as a sitemap or a blog table of contents on a static page. To install it, please follow the steps below.

How to Install Recent Posts by Label on Static Pages?

The code I'm going to share uses icons from Fontawesome, if they haven't already been added. Please, Add the code below before </head> in the Template editor.

<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>

After adding the Fontawesome code then follow the steps below

( 1 ) Open the Blogger page > then Click the Page menu > next Then click the New page button to create a new post on a static page

( 2 ) Add below code inside post-HTML Editor

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/AVvXsEjtykFb2X8t_YyJ_FgLFYBgZxQh9XHo6_MIiHGPAW-s130oEUktQS-E6FoW4SBHxOrhnHTF71xn9kDefsX4hBnhoPMrUFrLplHGOm9i4ct79jaM2Ds8nLxRPX16SihPHpxiYs87zHK6DGO7/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/-/Beauty"+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)};

( 3 ) Please Edit the marked code first

Mark	Description
was numfeed	18 (Number of posts displayed on each page)
was urlblog	https://www.your_site.com (Fill in the address of your blog)
var charac	Fill in the number of post summary you want to display

Edit the feed URL section, replace it "Beauty" with the blog label name.

/feeds/posts/default/-/Beauty

If you want to display the index page feed only without the label, edit the feed format so it looks like this 

/feeds/posts/default

When all process is finished, click the Publish button and see the results on your blog.

Demo

This widget can only be installed once, so make edits before posting

Thanks, that's the Easy Way to Install Recent Posts by Label on Static Pages. Hopefully, it's useful. Thanks for visiting.

Go to Link