Latest Posts Widget With Navigation For Bloggers Blog

Latest Post Widget With Navigation For Bloggers Blog

0
data:blog.title

Recent Posts

Latest post widget means a widget that will help you to see your all latest posts or updates. From the beginning of this widget it was too much popular. This widget is fit to your sidebar or footer section. By this your visitors can easily get info about new posts.

We have already reveal Recent or Latest Post widget from different bloggers blog while some limitation exists on that widget. This kinds of widget can show only 5 to 10 posts which maybe not help to increase the number of page visit. Because if your blog is showing 5 posts per page as well as your Recent post showing 5 posts so the Recent Post widget would be meaningless.  It will occupy your space from your blog site.  So I am going to share a Latest post widget that is include small Navigation menu which will help to navigate up to all posts from a single page. We can simply say this is an advance version of Recent posts which named Latest Post widget. You can see the Demo and check how it works. Hope it will boost your blog page visit. 

CSS CODE FOR Latest Posts Widget



Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin> 



/*Latest Posts Widget By www.bloggerspice.com*/
#bs-bloggerspice{border:1px solid #80C8FE;width:100%;margin:0 auto}
#bloggerspice{margin:0px}
.bs-elemen{border:1px solid #00477D;margin:5px 0;padding:5px;height:79px}
.bs-elemen img{background:#BFE3FE;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.bs-elemen h6,.bs-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.bs-elemen:hover{background-color:#80C8FE}
.bs-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#bs-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #80C8FE}
#bs-navigasifeed{border:1px solid #80C8FE;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#bs-navigasifeed:hover{background-color:#80C8FE}
#bs-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#bs-navigasifeed span{padding:5px 10px}
#bs-navigasifeed .next{float:right}
#bs-navigasifeed .previous{float:left}
#bs-navigasifeed .home{text-align:center}
#bs-navigasifeed a:hover,#bs-navigasifeed span.noactived{color:transparant!important}


Step 5 Now again find </Head>Copy the below code and Paste it Before/above </Head>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://www.bloggerspice.com/";
var charac =50;
var urlprevious, urlnext;
function bloggerspicefeed(Rabbi,Khan){
var showfeed = Rabbi.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,Khan-1);
return showfeed;
}
function showbloggerspice(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
}
showblogfeed += "<div class='bs-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + bloggerspicefeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("bloggerspice").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("bs-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showbloggerspice";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("bloggerspice").innerHTML = "<div id='bs-loading'></div>";
document.getElementById("bs-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var bloggerspice = document.createElement('script');
bloggerspice.setAttribute('type', 'text/javascript');
bloggerspice.setAttribute('src', archievefeed);
bloggerspice.setAttribute('id', 'BSLABEL');
document.getElementsByTagName('head')[0].appendChild(bloggerspice);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("BSLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

HTML CODE FOR Latest Posts Widget

Step 1 Go to your Layout tab.

Step 2 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 3 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<div id="bloggerspice"></div><div id="bs-navigasifeed"></div>


Customization

  • Change http://www.bloggerspice.com/ with your blog address. 
Latest Posts Widget With Navigation For Bloggers Blog
4 Stars stars - "Latest Posts Widget With Navigation For Bloggers Blog" Latest post widget means a widget that will help you to see your all latest posts or updat...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *