Page Navigation With (Next/Prev, First/Last) For Blogger

Its a continuous part of our previous Page Navigation With (PageCount – NextPrev – FirstLast) For Blogger, Page Navigation With (PageCount, Next/Prev) For Blogger, Page Navigation With (Next/Prev) For Blogger which have same features but no page count text so this one features is new here in this version. By default Blogger has a simple navigation system to navigate between the posts and pages. This page navigation has just three buttons, one for next one for previous and one for home. this simple page navigation system is best to navigate between the posts but on pages and on post summary pages it does not seems good to work. For example if a visitor has to jump on directly to next to second page then he or she has to go through all the posts by using previous button.

This page navigation is also limited to Home/Lable page only and on post page, blogger default page navigation will be back. So you have seen the screenshoot above so now the code is below. So now before proceeding to the code, have a look on our navigation widget features list and then garb the code. Its very easy to install it without editing your template that can be dangerous sometime.

Features:

1.) PageNavigation With Next/Previous And First/Last Button.
2.) Fully Customizable CSS.
3.) Easy To Install.
4.) Simple And Cross-Browser.
5.) Complete InBuilt Code, No Need To Edit Your Template.
6.) Pure JavaScript Code.
7.) Navigation Will Be Displayed Only On HomePage/LablePage.
8.) Next Post, Previous Post And Home Default Button Will Be Displayed On Post Page.
9.) No External Link Added.
10.) CSS3 Added For Style.
11.) First And Last Page Button Will Be Keep Showing.
12.) With Not Conflict With Any Code.
13.) Total Page Count Added.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now “Copy” The Below Code And “Paste” It To There.
8.) Leave The Title Empty.
9.) Click “Save“.
10.) Move That Gadget Below “Blog1” Gadget. Now You Are Done.

<style>
/* Blogger Page Navigation
----------------------------------------------- */
.showpageArea {text-align: right;}
.showpageArea a {text-decoration: none;}
.showpage a, .showpageNum a, .showpagePoint {
color:#fff;
padding:3px 10px;
text-decoration: none;
background: #cc6600;
}
.showpageNum a:hover, .showpage a:hover {
background:#333333;
}
.showpageNum a, .showpage a {
color:#777777;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=2;
var displayPageNum=5;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='<';
var downPageWord ='>';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord + '</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">' + upPageWord + '</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">' + upPageWord + '</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+ thisNum+ '</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">' + downPageWord + '</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="#">' + firstPageWord + ' </a></span>' + upPageHtml + html;
}else{
html = labelHtml + firstPageWord + ' </a></span>' + upPageHtml + html;
}
}
html = '<div class="showpageArea">'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="' + htmlMap[htmlMap.length-1] + '">'+ endPageWord + '</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"></div>

Customization:

1.) Change “displayPageNum” Num With Your Desired Count Of Post In One Page.
2.) Change “pageCount” Num With Your Desired Count Of Page No To Show On Navigation.
3.) Change “upPageWord” Text With Your Desired Text To Show Previous Page On Navigation.
4.) Change “downPageWord” Text With Your Desired Text To Show Next Page On Navigation.
5.) Change “firstPageWord” Text With Your Desired Text To Show First Page On Navigation.
6.) Change “endPageWord” Text With Your Desired Text To Show Last Page On Navigation.
7.) Save And Done.