Sunday, February 14, 2010
How to add Page numbers navigation in your blog
Posted on 4:53 PM by Mohamed Omar
It's a very hard problem to add page numbers navigation to your blog, after a lot of researches and reading about this topic I finally reached to the way to add the page numbers navigation in the blogs.
Simply, Follow this steps:
- First open your blog Dashboard and click on Layout -> Edit Html
- Find the code
</body>and put the following code above it :
<!--PAGINATION-STARTS-->
<script type='text/javascript'>
var pageCount=10;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination1.js' type='text/javascript'/>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.js' type='text/javascript'/>
<!--PAGINATION-STOPS-->
- var pageCount is the number of posts that appears in the page
- var displayPageNum is the number of pages you want to show
- After doing that Find the code
</head>and write the following code above it:
<!--PAGINATION-STARTS-->
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
.showpage a:hover {
color: #FFFFFF;
background-color: #5FB404;
}
// STYLE CODE FOR SELECTED PAGE STARTS
.showpagePoint {
color: #FFFFFF;
background: #5FB404;
border: 1px solid #5FB404;
}
// STYLE CODE FOR NUMBER BUTTONS STARTS
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #5FB404;
border: 1px solid #5FB404;
}
// HOVER CODE for NUMBER BUTTONS
.showpageNum a:hover {
color: #FFFFFF !important;
background: #5FB404 !important;
border: 1px solid #5FB404;
}
// STYLE CODE FOR "PREV and NEXT" BUTTONS STARTS
.showpageArea a {
border: 1px solid #5FB404;
}
// HOVER CODE for NEXT-PREV BUTTONS
.showpageArea a:hover {
border: 1px solid #5FB404;
color: #FFFFFF !important;
background: #5FB404 !important;
}
</style>
<!--PAGINATION-STOPS-http://e-blogtricks.blogspot.com-->
- After Doing that Dont Click Preview because the page numbers will not appear when you click Preview... you can only press preview to be sure that there's no code error.
- At last you can change the green color with code #5FB404 and replace it with your own color code
Subscribe to:
Post Comments (Atom)
No Response to "How to add Page numbers navigation in your blog"
Leave A Reply