Numbered Page Navigation Blogger

Let's review a topic about how to add Numbered Page Navigation Blogger. Have you ever seen Numbered Page Navigation ? ...

Like this below :



Numbered Page Navigation Blogger means a Page Navigation by Numbers in Blogger. The function of Numbered Page Navigation is to navigate your blog friendly for visitor or viewers.

How to add Numbered Page Navigation Blogger ? ...

First Step

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

<style type="text/css">
.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 {display: none;}
.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;}
</style>
<script style="text/javascript">
var pageCount=2;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";
</script>
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js">
</script>

4. Click Save.

Second Step

1. Go to Edit HTML

2. Find code of HTML below :

]]></b:skin>

you can use (Ctrl+F) to find easily

3. Right Before ]]></b:skin> place code of HTML below :

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

Third Step

1. Find code of HTML below :

</body>

you can use (Ctrl+F) to find easily

2. Right Before </body> place code of HTML below :

<!--Numbered-Page-Navigation-BEGIN-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=2;
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>
<!--Numbered-Page-Navigation-END-http://ayeyarmyae.blogspot.com-->

NOTES :

• Var pageCount=2 means 2 posts would be shown in each page, you can change it as you like.
• Var displayPageNum=5 means 5 numbers would be displayed in Numbered Page Navigation, you can change it as you like.
• Var upPageWord ='Previous' you can change word 'previous' in to other words, such as 'before' or 'newer' or, anything you like.
• Var downPageWord ='Next' you can change word 'Next' in to other words, such as 'older' or, anything you like.

3. Click Save Template and done.

Now you've already Added Numbered Page Navigation Blogger.