Add Paging Navigation Button in blogger

Another reason why people move to "Wordpress" is the paging option at the bottom of the page that allows readers the ability to navigate deeper into the archives with ease when compared to the 'newer' and 'older' post links. But with this hack you will be able to show Page Navigation button at the bottom of the page without editing your html.

This is how it should look like at the bottom of the page:


How to Apply:
=============

Sign in to blogger --> Dashboard --> Layout --> Add Page Element/Gadget --> Html

Paste the following code in it (don't gave any name) and drag it below BlogPosts):
<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</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=5;
var displayPageNum=5;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';


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"><u>'+thisNum+'</u></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"></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="color:#fff;" class="showpage"> Total '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

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>


That's it....

Note: In the script (var pageCount=5;) Shows number of pages to be shown in a page (var displayPageNum=5;) Shows number of pages to be displayed. You can change the numbers.

Credit: Blogger Buster: Just modified a bit by not editing html.
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

Related Posts

40 comments: on "Add Paging Navigation Button in blogger"

Dr. Internet said...

Very informative dan and Like your Labels style, how u have added it?

Dan* said...

@ above

I will post that in a day or so .... :)

Nabila Zehra Zaidi said...

Nice...

I like your template...

poonam said...

good pick.. dint really work though.. i guess some layout problem..

Professional Lab said...

Thanks dan, waiting for more blogger tips.

Dan* said...

@ poonam

you have to drag under the blog post widget.

Sidrah said...

nice, keep up the good work! cya

Arjun said...

& buddy this page navigation button is not coming on my blog, help me out

Arjun said...

& do we have to pay to feedburner for this grab my headline like thing

Arjun said...

& one more important thing i wanna ask you , how to promote yourself & how to add quality traffic

Dan* said...

@ Arjun

I can see the page navigation button in your blog . You cant see it by preview you need to view your blog or click any labels having more than 5 posts

Arjun said...

No man it's not working buddy, & how do you gotta see in my blog, i had never added in my blog which is online now. As i am wokign on my next blog, so thats why i am asking you to solve this for me & do tell me the solution.

Dan* said...

oh saw it on http://writemessage.blogspot.com its working ......

If its working in ur old blog then it should work on your new blog as well ........ try it laters then.

Arjun said...

Oh! Sorry man, but thats not my fault. Actually i had put that navigation script on very bottom , not under the posts, & it comes there. So thats why i hadn't seen it. Thanks anyway

Dan* said...

so is your new blog ready ?? :P

Blogger Templates Designs said...

Thank you so much.

for Share. and we have : Blogger Templates Designs too.

Switcher said...

Thank you!

Works Great!

Only prob, is my page loads slow on first visit, I think my template is calling the default next post code, I'll have to change that, I like your code better. :)

Thanks, again - Very cool blog you have here, lots of useful info.

mydxf.blogspot.com

Arief Info said...

terima kasih. good very2good

Bored mind said...

did not work

can u explain

Dan* said...

@ Bored

i have made it easier by putting a pic hope it will work :)

Bored mind said...

it is not working...

i think there is a problem with my template

i dont know...

Dan* said...

@ Bored
u can't see when you preview it open it in a new page n see it........

Sumtimes it happens that others can see it but u can't just wait sumtime for blogger to refresh

REkz said...

This Code is not working for me!

Dan* said...

@ REkz

i don't know y but itz working for other's....

agung said...

Thank's for your tips...

Welldone

Anonymous said...

not work

Sibz said...

not working.....

tse said...

not working to me explain plz

tse said...

Not working to me !!

Dan* said...

@ Sibz and TSE

Sorry there was a little mistake in the codes! I have corrected it....now try and let me know :)

angel from heaven said...

Your tips and posts are very useful for newbies like me. Thanks.

Dating Net Library said...

Thank you very much...That's fine and works well...

IndonesiaIndonesia said...

Thanks, danzy. It's work like a charm. You are genius

Anonymous said...

Pretty great post. I simply stumbled upon your weblog and wished to mention that I've really loved browsing your blog posts. After all I will be subscribing on your feed and I hope you write again soon!

My web page; germany

Post a Comment