How To Add Together Recent Posts Widget Alongside Adjacent & Previous Button

Hello Guys,Today inwards this article nosotros are going to explicate How to add together a recent posts widget alongside side past times side in addition to previous push clit inwards blogger template.We convey seen lot's of recent posts gadget inwards blogger websites but never flora whatsoever widget similar our tool which today nosotros brought infront of you.I'm certain you lot guys going to similar this widget.The benefits of this widget you lot tin demo n numbers of posts inwards it in addition to this widget convey a real polish running side past times side in addition to previous button.Another useful create goodness of this recent responsive widget is that you lot tin add together this widget inwards whatsoever weblog or website in addition to you lot tin demo your posts on your closed to other website too.However similar this widgets are real less,most of the websites convey recent posts widget to display their posts only.

We convey made this type of recent posts widget for multi purpose.so it's fourth dimension to halt the words in addition to let's focus on how to install recent posts gadget.We convey used CSS for styling in addition to Javascript. So to catch this widget only precisely follow the steps below.

Demo

See the Pen YwdbVr past times (@bloggersstand) on CodePen.

Adding a Recent Posts Gadget alongside Next,Previous Button In Blogspot Template

installation steps:

Step 1. Log inwards to your Blogger concern human relationship in addition to Go to your Blogger Dashboard.
Step 2. Now Click on -> layout -> Add a Gadget -> Select -> HTML/JAVASCRIPT and re-create the below code in addition to paste inwards it.

<style scoped='' type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
a:link {
  text-decoration: none;
  outline: none;
  transition: all 0.25s;
}
a:visited,
a:link:hover,
a:visited:hover {
  text-decoration: none;
}
torso {
  background: #eaeaea none repeat scroll seat off left;
  color: #444;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}
.container {
  background: #fff;
  max-width: 320px;
  margin: 5% auto;
  padding: 10px;
  box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.1);
  border: 1px corporation #ccc;
  font-family: 'Open Sans', sans-serif;
}
/* Recent Posts Widget By www..com */
#bsdrecentpostnav {
  border: 1px corporation #585858;
  width: 100%;
  margin: 0 auto;
}
#recentpostbstand {
  margin: 0px;
}
.postrecents {
  background: #fff;
  display: block;
  border: 1px corporation #ddd;
  margin: 5px 0;
  padding: 10px;
  height: 79px;
}
.postrecents img {
  background: #fff;
  padding: 4px;
  float: left;
  height: 70px;
  margin-right: 8px;
  width: 70px;
  border: 1px corporation #ddd;
}
.postrecents h6,
.postrecents h6 a {
  text-decoration: none;
  font-size: 13px!important;
  font-weight: 700!important;
  margin: 0;
  color: #111;
}
.postrecents:hover {
  background-color: #fefefe;
}
.postrecents p {
  font-size: 12px;
  text-align: left;
  color: #555;
  line-height: normal;
  margin: 5px 0;
}
#recentpostload {
  color: #888;
  font-family: Tahoma;
  font-size: 100px;
  letter-spacing: -10px;
  text-align: center;
  text-shadow: -5px 0 1px #444;
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1q6X5hhWPZdId47SfJGdnDrolA98bDVXuR_xQtM92NgGsK6ASr04W65WYCP5ipy3-zmsBod7mTvpWeych-r79vUk61bs2k4ASAhoFMkun2e5XWKUSKG-xX5gk7uTtwQJdy7C5VzXcFsH7/s1600/loader.gif) no-repeat 50% 50%;
  height: 470px;
  border: 1px corporation #ddd;
}
#bsdrecentpostnavfeed {
  border: 1px corporation #ddd;
  color: #bbb;
  font-family: Verdana;
  font-size: 12px;
  text-align: center;
  margin: 0px;
}
#bsdrecentpostnavfeed:hover {
  background-color: #fefefe;
}
#bsdrecentpostnavfeed a {
  color: #141414!important;
  font-family: Tahoma!important;
  font-size: 12px!important;
  font-weight: 400!important;
  display: block;
  padding: 5px 10px;
}
#bsdrecentpostnavfeed bridge {
  padding: 5px 10px;
}
#bsdrecentpostnavfeed .next {
  float: right;
}
#bsdrecentpostnavfeed .previous {
  float: left;
}
#bsdrecentpostnavfeed .home {
  text-align: center;
}
#bsdrecentpostnavfeed a:hover,
#bsdrecentpostnavfeed span.noactived {
  color: transparant!important;
}
</style>
<div class="container">
<div id="recentpostbstand"></div>
<div id="bsdrecentpostnavfeed"></div>
</div>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://www.bloggersstand.com";
    var charac = 40;
    var urlprevious, urlnext;
component subdivision bloggersstandfeed(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 showrecentpostbstand(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/AVvXsEj5bKDLhQU3HTigUg0kiCspGBRRmVoKfHUOtFw5tHco3gaPrCOfqu9bT4rx2kr5HsuAZJkCmWjVvsfYLaMbF4OVYBvYKR6y1OGw-0TlI_WapybQaoZJaRaTbEi_VWIh2ZZJmEEpg-0tjNth/s1600/no-image.png",s+="<div class='postrecents'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+bloggersstandfeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostbstand").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:bstandfeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:bstandfeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:bstandfeed(0);' class='home'>Home</a>",document.getElementById("bsdrecentpostnavfeed").innerHTML=s}function bstandfeed(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=showrecentpostbstand",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostbstand").innerHTML="<div id='recentpostload'></div>",document.getElementById("bsdrecentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","bloggersstandlabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("bloggersstandlabel"),t=e.parentNode;t.removeChild(e)}onload=function(){bstandfeed(0)};
//]]>
</script>

Customization: 

• Replace www.bloggersstand.com with your weblog or website url.
• To alter the grapheme display,change value 40 to your desired number.
• To demo the postal service feeds,means how much postal service you lot wish to show,change 5 alongside your desired number.

Step 3. Now Save your Gadget..Done !