New Numbering/numbered page navigation widget for blogger

By: Unknown on 04:35

Share it Please

Tweet

This is my first post about numbering page navigation for blogger/BlogSpot. So you can follow my first post to add page navigation widget in your blogger blog. We recommend you to follow this post, because this post is very easy to implement your blog more then our older post.  Also am using the stylish numbered page navigation widget for my blog.

How to add this page navigation widget to your blogger blog?

I showing this post with two simple steps, first one is adding css and second one is adding JavaScript. So follow those steps carefully to add this widget.

Adding the CSS Cods:

• Go to Blogger Dashboard >> Template >> Edit HTML.
• Find ]]></b:skin> tag in your blogger template HTML editor
• And then copy the below code and paste before the ]]></b:skin>

.showpagePoint {
    text-decoration: none;
    background: linear-gradient(to bottom, rgb(242, 242, 242) 0%, rgb(229, 229, 229) 100%) repeat scroll 0% 0% transparent;
    color: rgb(41, 41, 41);
    border: 1px solid rgb(227, 227, 227);
    display: inline-block;
    margin-right: 3px;
    padding: 7px 10px;
    font-weight: bold;
}
.showpageOf {
    color: rgb(255, 255, 255);
    font-weight: bold;
    background: none repeat scroll 0% 0% rgb(224, 102, 102);
    padding: 8px;
    margin: 8px;
}
.showpageNum a:hover  {
color: white;
}
.showpageNum a:link {
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(242, 242, 242) 100%) repeat scroll 0% 0% transparent;
    color: rgb(51, 51, 51);
    margin-right: 3px;
    display: inline-block;
    padding: 7px 10px;
    border: 1px solid rgb(227, 227, 227);
}
.showpageNum a:hover {
    text-decoration: none;
    background: linear-gradient(to bottom, rgb(242, 242, 242) 0%, rgb(229, 229, 229) 100%) repeat scroll 0% 0% transparent;
    color: rgb(41, 41, 41);
    border: 1px solid rgb(227, 227, 227);
    display: inline-block;
    margin-right: 3px;
    padding: 7px 10px;
}

• Now save your template.

Adding the JavaScript Cods:

This is the second and last step. Now you wont to add JavaScript codes in your template.

• Again Go to Blogger Dashboard >> Template >> Edit HTML.
• Now find </body> tag in your blogger template HTML editor
• and then Add below code just above </body> tag

    <script type='text/javascript'>
      var postperpage=5;
      var numshowpage=5;
      var upPageWord =&#39;&lt;&lt;&#39;;
      var downPageWord =&#39;&gt;&gt;&#39;;
      var urlactivepage=location.href;
      var home_page=&quot;/&quot;;
    </script>
<script type="text/javascript" src="http://yourjavascript.com/3215021430/www-mybloggerblog-coml.js"></script>

• Finally Save your template and you’re done! :)

Now enjoy a new experience with number page navigation.