Page Navigation for Blogger

This new version of Blogger page numbering loads rapidly and generates unlimited pages with respect to posts while previous version of blogger page numbering were indexing only 504 posts for page numbering.


Login to Your Blogger Account

On Your Dashboard, Click on Template->Edit Html -> Proceed

Now Check the box of  Expand Widget Templates

Press (Ctrl + F) and Search for

        ]]></b:skin>

And Just above/before Paste this code

           .showpageArea {
        color: #666666;
        margin: 10px 5px 3px 5px;
        padding: 0px;
        float: left;
        display: inline;
        font-size:12px;
        }
        .showpageArea a {
        background: #ffffff;
        padding: 4px 7px;
        margin: 0px 5px 0px 0px;
        text-decoration: none;
        border: 1px solid #9E0909;
        color: #666666;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        display: inline;
        float: left;
        }
        .showpageNum a {
        background: #ffffff;
        padding: 4px 7px;
        margin: 0px 5px 0px 0px;
        text-decoration: none;
        border: 1px solid #9E0909;
        color: #666666;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        display: inline;
        float: left;
        }
        .showpageNum a:hover {
        background: #FAE2E2 !important;
        text-decoration: none;
        border: 1px solid #9E0909 !important;
        }
        .showpagePoint {
        font-weight: bold;
        background: #FAE2E2;
        padding: 4px 7px;
        margin: 0px 5px 0px 0px;
        text-decoration: none;
        border: 1px solid #9E0909;
        color: #666666;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        display: inline;
        float: left;
        }
        .showpageOf {
        background: #ffffff;
        padding: 4px 7px;
        margin: 0px 5px 0px 0px;
        text-decoration: none;
        border: 1px solid #9E0909;
        color: #666666;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        display: inline;
        float: left;
        }
        .showpage a {
        background: #ffffff;
        padding: 4px 7px;
        margin: 0px 5px 0px 0px;
        text-decoration: none;
        border: 1px solid #B9A2A2;
        color: #674D4D;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        display: inline;
        float: left;
        }
        .showpage a:hover {
        background: #FCE4E4 !important;
        text-decoration: none;
        border: 1px solid #9E0909 !important;
        }
        .showpageNum a:link,.showpage a:link {
        background: #ffffff;
        padding: 4px 7px;
        margin: 0px 5px 0px 0px;
        text-decoration: none;
        border: 1px solid #9E0909;
        color: #666666;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        display: inline;
        float: left;
        }

Now Searcch This Code
</body>


Above/Before Paste this code

        <script type='text/javascript'>
        var home_page="/";
        var urlactivepage=location.href;
        var postperpage=7;
        var numshowpage=4;
        var upPageWord ='Prev';
        var downPageWord ='Next';
        </script>
        <script src='http://bplugins.googlecode.com/files/pagenumbers.js' type='text/javascript'></script>

var postperpage=7; (Number of Posts Per Page) Show Above Code Example
var numshowpage=4; (Page Numbers on Each Page)Show Above Code Example

Now, Find data:label.url and replace with ‘data:label.url + “?&amp;max-results=7″‘

Save Template .