Numbered Page Navigation For Blogger {Simplified For Amateurs}

When I Start Visiting And Surfing In Internet, I Found Many Blog sites..........In-Fact Useful Blog Sites....... But Then I Come To Find ...

When I Start Visiting And Surfing In Internet, I Found Many Blog sites..........In-Fact Useful Blog Sites.......
But Then I Come To Find A New Difficulty.......
There Are No Numbered Page Navigation There.
Only "Older Page" And "Next Page" is Visible Which Made The Thing Hard To Surf In That Site......
So When I Start Blogging, I Tried To Edit My Blog Site And Add Numbered Page Navigation And I Did It.
Here's A Tutorial About "How To Add Numbered Page Navigation In Your Blog Site"
So Let's Begun.....

 


Tools Needed:
Notepad++(Optional)


Step 1: Login to Blogger Dashboard and navigate to Layout > Edit Html And Click On Download Full Template
undefined

Step 2: Open The Downloaded Template With Notepad++.

Step 3: Now Find

 

]]></b:skin>

And Replace It With

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

 

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need.

 

Step 4: Next is the JavaScript part. Find

 

</body>

And Replace It With Code:

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

 

As you can see,there are some customizable parameters in this code
.
var pageCount=5;
This code determines the number of posts that would be displayed per page.
.
var displayPageNum=5;
This code determines the number of additional page navigation numbers that will be displayed on the page.
.
var upPageWord =&#39revious&#39;;
var downPageWord =&#39;Next&#39;;
These two lines determine the text that would be shown for the previous page and next page respectively.
.
.
It Will Now Look Like My Site.
undefined

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template
.
How to Edit the template to cut short the posts per page?
Go to the Edit HTML page and expand the Widget Templates
.
Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.
.
Now if you are using the label cloud widget by phydeaux3,then find
.

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and Replace It With

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Here also 5 is the number of posts to be displayed per page.
.
Now you should have the Blogger Page Navigation working perfectly on your blog.

10 comments :

  1. Hello!

    Can you post the tutorial navigation arrow (newest post older post) below post title like yours?

    Anyway Thank You!

    ReplyDelete
  2. Hello Matilda,


    Just replace the following two lines:
    var upPageWord ='Previous';
    var downPageWord ='Next';



    With:
    var upPageWord =&'«';
    var downPageWord ='»';



    Thanks

    ReplyDelete
  3. I mean i want to put that two arrow in my floating bar like yours.

    Here is my blog:

    http://dailyinfograph.blogspot.com/2012/09/marilyn-monroes-26-foot-tall-statue-in.html

    You can remove the link after you view. :)

    Thank You!

    ReplyDelete
  4. Oh!, sorry I got it wrong :).


    The arrow I am using in my sliding topbar over post area is on an image file.


    http://2.bp.blogspot.com/-pyRCHOeUSdM/T-ikvJgsUdI/AAAAAAAAHak/zfF9eVKiLqM/s1600/sprite_vs6.png



    Use background-position CSS and create a new a class for next and previous link.

    ReplyDelete
  5. Can you post the complete tutorials in how to do this just in-case if you have a time.

    Thank you!

    ReplyDelete
  6. Hello Matilda, I tried today to implement a different id in the Next Page and Previous Page link and due to this javascript limitation I don't think you can replace the Next and Previous page link text using an image.


    Although it would be possible for other pagination scripts but I don't really a professional designer so it will be hard for me (I will check yet).


    However, I may recommend you to check out this (http://goo.gl/hni3X) from Abu-Farhan.

    ReplyDelete