How to add page no in footer(pagination) in blogger:

we can add page numbers instead of older posts , newer. it is very simple .it gives your blog a great professional look and cool environment . you can do it just by copy pasting some codes. have a try but before doing it just save your template. however it is not risky.



Instructions to follow:


STEP #1:

Log in to Blogger, go to Layout -> Edit HTML

Find this code:

</body>

And paste this code immediately ABOVE/BEFORE it:

<!--PAGINATION-STARTS-->
<script type='text/javascript'>

var pageCount=10;
var displayPageNum=3;

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</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=10; is the number of posts to be displayed on each page. [For ex. in a simple Google search on each page you are shown 10 search results] - change the number "10" to any number you want.

var displayPageNum=3; is the number of buttons to be shown (on each side) along with the page number currently seleted.
For eg. If a reader is on page 6, then in the pagination, page numbers will be displayed like this:


Prev 3 4 5 6 7 8 9 Next

i.e. 3 page numbers on each side of number 6.

STEP #2
Now we'll do the styling of these pagination numbers...
By default, this code will give a purple look to the numbers.

Find this code in the template:

</head>

And immediately ABOVE/BEFORE it, paste this code:

<!--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: #92416C;
}
// STYLE CODE FOR SELECTED PAGE STARTS
.showpagePoint {
color: #FFFFFF;
background: #92416C;
border: 1px solid #92416C;
}
// STYLE CODE FOR NUMBER BUTTONS STARTS
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #92416C;
border: 1px solid #92416C;
}

// HOVER CODE for NUMBER BUTTONS

.showpageNum a:hover {
color: #FFFFFF !important;
background: #92416C !important;
border: 1px solid #92416C;
}
// STYLE CODE FOR "PREV and NEXT" BUTTONS STARTS
.showpageArea a {
border: 1px solid #92416C;
}

// HOVER CODE for NEXT-PREV BUTTONS

.showpageArea a:hover {
border: 1px solid #92416C;
color: #FFFFFF !important;
background: #92416C !important;
}
</style>
<!--PAGINATION-STOPS-http://bloggerstop.net-->

In the code above, everywhere #92416C refers to purple color.
Replace it with the color codes you want [view color-combinations and get HTML hex-color codes from this page].
Try different colors for borders, backgrounds, hover effects, and the numbers text too, according to the instructions I have highlighted in RED/BLUE colors.