Full page recent posts widget for blogger
close
Full page recent posts widget for blogger

Full page recent posts widget for blogger

Full page recent posts widget for blogger

If you are thinking about adding a full page recent posts widget into your static pages then this article is for you.

In this article I am going to share with you full page recent post widget for blogger as you can understand by its name its a full page widget which cover's up full page and it has functionality to load next and previous posts from your blog.

This widget is same like your websites homepage but it's not a homepage it's a widget.

This full page recent post blogger widget can also be used as labelled posts widget which means that you can also show posts with specific label using this widget or in this widget.

Before going ahead let me show you the demo of this widget. Click the button below and see the demo of this widget and also check its responsiveness.
View Demo

So below is the code and also the steps to add this widget into your blogger blog on static page. In the steps below I have explained how you can add this widget into your static page but you can follow the same steps to add this widget anywhere else in your blogger blog.

Step to follow:

  1. Go to Blogger Dashboard
  2. Go to Pages Section
  3. Click Add New Page
  4. Now copy the code provided below and paste it on that page's HTML Editor Section.
  5. <style>
    @import url(https://fonts.googleapis.com/css?family=Quicksand);
    #container {
      position: relative;
      padding: 0;
      margin: 5% auto;
      width: 100%;
      max-width: 970px;
      overflow: hidden;
      vertical-align: top;
    font-family: Quicksand, sans-serif;
    }
    #header {
      height: 250px;
      margin: auto;
    }
    
    #header h1 {
      display: table;
      color: rgba(0,0,0,.5);
      font-weight: 400;
      text-align: center;
      margin: auto;
      padding: 50px 50px 0 50px;
      font-size: 55px;
    }
    
    #header p {
      display: table;
      color: rgba(0,0,0,.5);
      font-weight: 400;
      text-align: center;
      margin: auto;
      padding: 10px;
      font-size: 20px;
    }
    *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box}
    #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://2.bp.blogspot.com/-GeeSB564W-o/Wum3zpg8qNI/AAAAAAAAGmM/aRoomVJFtSQfUoAJrRjD6h1wTSU8J8DUQCLcBGAs/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:14px 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:14px 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>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
    <div id="container">
    <div id="header">
    <h1>Softweb Tuts</h1>
    <p>Full Page Recent Posts Widget for Blogger for Static Page</p>
    </div>
    <div id="recentpostsae">
    </div>
    <div id="recentpostnavfeed">
    </div>
    </div>
    <script>
    //<![CDATA[
    var numfeed = 12;
    var startfeed = 0;
    var urlblog = "https://www.softwebtuts.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://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' title='"+n+"'><img alt='"+n+"' src='"+a+"' title='"+n+"'/></a>",s+="<h6><a href='"+r+"' title='"+n+"'>"+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' title='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' title='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' title='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/"+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>
  6. Save Page

This widget has three buttons two buttons are used to navigate to next and previous posts and one button is used to go to homepage.

In the source code of this widget provided above you have to make some customizations which are listed below.
VariableDescription
var numfeed = 12;12 Is the number of posts you want to show in this widget.
var startfeed = 0;0 Means to start fetching feeds from first index. Don't Change it.
var urlblog = "https://www.softwebtuts.com";Replace this URL with your website URL .
var charac = 0;0 Mean's that don't show post summary if you want to show summery replace it with the number of letters you want to show in summary content.

You can use this widget if you want to show any specified labelled posts on static pages. To do so replace /feeds/posts/default/ with /feeds/posts/default/-/html and add your label instead html.

Conclusion:

I hope that you will like this full page recent posts widget for blogger and I hope that you will install this widget into your blogger blog because it will help you to customise your side and make your side look premium and beautiful.
Disqus Codes

No comments

Notifications

Disqus Logo