306 Numbered Page Navigation for Blogger August 12, 2008 /

The ability to 'paginate' Blogger blogs has been a long requested feature. Pagination allows us to number blog pages like those of a book, offering readers the ability to navigate deeper into the archives with ease when compared to the 'newer' and 'older' post links.

After many failed attempts, I was almost ready to admit defeat with this function until I discovered this excellent script by Mohamed of Blogger Accessories. This script replaces the default blog pager (links to newer, older and home pages) with numbered page navigation. Furthermore, it offers the ability to customize the number of page links and the number of posts displayed on each page.


Mohamed's Blogger pagination script may be installed using two different methods:

• Customizing the template code
• Adding as an HTML/JavaScript widget (gadget) below the main posts section

Both of these installation methods will achieve a similar effect. I personally find adding the code directly to the template makes it easier to customize the style of the pagination links, but if you feel uncomfortable editing your template, the widget installation may be much easier for you.

Here is how the finished installation will appear in your blog:

Once installed, these "page numbers" will appear on your home, archive and labels pages, allowing your readers to easily access pages in your archives. However, the page numbers will not appear on individual post pages. I've noticed many blogs which use pagination like this, and among them none displayed these page links beneath individual posts.

To learn more about using the numbered pagination script for Blogger, pop over to Blogger Accessories to read the useful tutorials Mohamed has posted.

My Slightly Modified Version

As you may have noticed, I'm using a slightly modified version of this script here on Blogger Buster. When customizing the style of Mohamed's original version, I noticed a few elements which I preferred to change for my own preferences, and also modified the CSS for how the numbered links are displayed.

If you would prefer to use this slightly different version instead, here is what you should do.

Add the CSS code to your style section

Firstly, copy all of the code below and paste this just before the closing </b:skin> tag in your template:

.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;
}

This should change the colors of text and links in the pagination to match the styles already present in your blog template. So if your default text is white against a dark background, the "Pages (#)" section of the script should appear the same way. The color for the background and hover effects of the numbers can be altered according to your preferences by editing the hex values to match the style of your own template.

Add the JavaScript code beneath your posts

The second part of the installation is to add the JavaScript code beneath your posts which will locate and replace the existing "Newer/Older Posts" link. To add this script, go to Layout>Edit HTML in your Blogger dashboard, and do not tick the "expand widget templates" box (it's much easier to add the code while the widgets are contracted). Then find this section of code (or similar) in your template:

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

Immediately after the closing </b:section> tag, add the following section of code:

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".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 upPageWord = 'Previous';
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">'+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 = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(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>

Once you have added this code, attempt to preview your template to ensure there are no code errors. You will not be able to see the script in action on the preview, but this step ensures no adverse effects to your layout.

In the code above, you will notice that I have highlighted three sections of code in bold red. You may need to customize these sections to better suit your preferences:

On line 5, you may need to change the ".com" to reflect your domain extention if you use a custom domain.

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";

This default installation should work fine for anyone hosted on Blog*Spot or a dot.com domain, but you will need to alter this section if your custom domain ends in .co.uk or .info for example.

In lines 19 and 20, you can change these values to alter how many posts are displayed on each page, and how many links will be visible at the same time.

The var pageCount = 5; section defiines the number of posts displayed on each page, while var displayPageNum = 5; defines the number of links which are displayed (eg: 1 - 2 - 3 - 4 - 5) beneath the posts section.

Once you have added this JavaScript code and made any changes nescessary for your needs, save your template and open up your blog in your browser. Now you should see the pagination links appear beneath your main posts section, and also on Labels and Archive pages.

Your thoughts?

I hope this post has helped you learn about how numbered page navigation can be achieved in Blogger powered blogs using Mohamed's original methods or my slightly modified script.

Please let me know what you think of these methods, or if you experience any problems, by leaving your comments below.