How To Add Recent Posts Widget With Next & Previous Button

0
How To Add Recent Posts Widget With Next & Previous Button
Hello Guys,Today in this article we are going to explain How to add a recent posts widget with next and previous button in blogger template.We have seen lot's of recent posts gadget in blogger websites but never found any widget like our tool which today we brought infront of you.I'm sure you guys going to like this widget.The benefits of this widget you can show n numbers of posts in it and this widget have a very smooth running next and previous button.Another useful benefit of this recent responsive widget is that you can add this widget in any blog or website and you can show your posts on your another website too.However like this widgets are very less,most of the websites have recent posts widget to display their posts only.
We have made this type of recent posts widget for multi purpose.so it's time to stop the words and let's focus on how to install recent posts gadget.We have used CSS for styling and Javascript. So to grab this widget just just follow the steps below.

Demo

See the Pen YwdbVr by BloggersStand (@bloggersstand) on CodePen.

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

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> layout -> Add a Gadget -> Select -> HTML/JAVASCRIPT and copy the below code and paste in 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;
}
body {
  background: #eaeaea none repeat scroll top 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 solid #ccc;
  font-family: 'Open Sans', sans-serif;
}
/* Recent Posts Widget By www.BloggersStand.com */
#bsdrecentpostnav {
  border: 1px solid #585858;
  width: 100%;
  margin: 0 auto;
}
#recentpostbstand {
  margin: 0px;
}
.postrecents {
  background: #fff;
  display: block;
  border: 1px solid #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 solid #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(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) no-repeat 50% 50%;
  height: 470px;
  border: 1px solid #ddd;
}
#bsdrecentpostnavfeed {
  border: 1px solid #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 span {
  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;
function 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:"http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/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 blog or website url.
  • To change the character display,change value 40 to your desired number.
  • To show the post feeds,means how much post you want to show,change 5 with your desired number.
Step 3. Now Save your Gadget..Done ! 
install recent posts widget label with next previous button to show posts feed of your website or blog.responsive stylish latest update posts display widget for blogger template.
Hello Guys,Today in this article we are going to explain How to add a recent posts widget with n...
SUMMARY

install recent posts widget label with next previous button to show posts feed of your website or blog.responsive stylish latest update posts display widget for blogger template.

You Might Also Like:

We hope this article helped you to learn How To Add Recent Posts Widget With Next & Previous Button. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Recent Posts Widget With Next & Previous Button" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand