Danzy World*

Great site for Computer and Internet Tricks with Entertainment FUN !

Sponsor

Propellerads

Sep 16, 2008

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.

40 comments:

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

    ReplyDelete
  2. @ above

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

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

    ReplyDelete
  4. Thanks dan, waiting for more blogger tips.

    ReplyDelete
  5. @ poonam

    you have to drag under the blog post widget.

    ReplyDelete
  6. nice, keep up the good work! cya

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

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

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

    ReplyDelete
  10. @ 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

    ReplyDelete
  11. 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.

    ReplyDelete
  12. 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.

    ReplyDelete
  13. 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

    ReplyDelete
  14. so is your new blog ready ?? :P

    ReplyDelete
  15. 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

    ReplyDelete
  16. @ Bored

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

    ReplyDelete
  17. it is not working...

    i think there is a problem with my template

    i dont know...

    ReplyDelete
  18. @ 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

    ReplyDelete
  19. This Code is not working for me!

    ReplyDelete
  20. @ REkz

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

    ReplyDelete
  21. Thank's for your tips...

    Welldone

    ReplyDelete
  22. not working to me explain plz

    ReplyDelete
  23. @ Sibz and TSE

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

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

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

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

    ReplyDelete
  27. 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

    ReplyDelete

Adbox