.png "English"){kind=small}
blogger tools Headline Animator
add Numbered Page Navigation to Blogger
1:58 PM | 
Posted by
hiba
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.
add Numbered Page Navigation Blogger
First Step:
- Go to Dashboard, click Layout, click Add a Gadget
- Click 'HTML/JavaScript
- 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>
Click Save
Second Step:
Go to Edit HTML
Find code of HTML below:
]]></b:skin>
you can use (Ctrl+F) to find easily
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:
Find code of HTML below:
</body>
you can use (Ctrl+F) to find easily
Right-Before </body> - place code of HTML below:
<!--Numbered-Page-Navigation-BEGIN-->
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=2;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!--Numbered-Page-Navigation-END-http://blooogger101.blogspot.com/-->
and click save template
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.
Done.
Labels:
Blogger Tricks
Subscribe to:
Post Comments (Atom)
FeedBurner FeedCount
1 comments:
Dear Brother kindly place the correct code this code is wrong and not working on my blog please help me out this problem my blog is https://2467softwaregamesforpc.blogspot.com/
and this is my email adress kindly help me
Post a Comment