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