Latest Information : How to add Beautiful Page Navigation Widget for Blogspot/Blogger

Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Beautiful Page Navigation Widget for Blogspot/Blogger

Preview :

Step by Step Process How to add Beautiful Page Navigation Widget for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2:    Go to Dashboard >> Select the Template >> Click on Edit HTML

Step 3 :    Search for Below Code

</head> 

Step 4 :    After that Add the below line of code before </head> tag.

    <style type="text/css">
        .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}
        .showpage a {float:left;background:url(http://1.bp.blogspot.com/-TdRwMLwclgk/UclgVwZqH1I/AAAAAAAAAX8/Wpr-3-PZNeY/s1600/Latest+information-button.gif) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;}
        .showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;}
        .showpageOf{float:left;padding-top : 6px;}
        .showpageNum a {background:url(http://4.bp.blogspot.com/-TEWcGaQnbLI/UclgVz9L6UI/AAAAAAAAAYA/YBvGwVzcpqY/s1600/Latest+information+-pagenum.gif) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;}
        .showpageNum a:hover {background : url(http://4.bp.blogspot.com/-TEWcGaQnbLI/UclgVz9L6UI/AAAAAAAAAYA/YBvGwVzcpqY/s1600/Latest+information+-pagenum.gif) no-repeat 0 100%;color : #fff;}
        .showpagePoint {background : url(http://4.bp.blogspot.com/-TEWcGaQnbLI/UclgVz9L6UI/AAAAAAAAAYA/YBvGwVzcpqY/s1600/Latest+information+-pagenum.gif) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;}
        .showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;}
    </style>
    <script style='text/javascript'>
    var pageCount=5;
    var displayPageNum=1;
    var upPageWord="Previous";
    var downPageWord="Next";
    </script>
    <script type='text/javascript' src="http://yourjavascript.com/35314262015/latest-information-beautiful-page-navigation.js"/>

   Note : #var pageCount=5; ~ Number of posts per page

Step 5 :    Save Template


Thank You.
Happy Blogging.
Write Your Comments Below.