TutorialWebForBlogger

TW4B It's about a blog that talking about blogging widgets, blogger template tutorials, search engine optimization SEO and other useful blogging tips

Let's review a topic about how to add numbered page navigation blogger . Like this below : Numbered Page Navigation Blogger means ...

Numbered Page Navigation Blogger

Let's review a topic about how to add numbered page navigation blogger.

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://tutorialwebforblogger.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.

There are no comments yet for 'Numbered Page Navigation Blogger'