Numbered Page Navigation Widget for Blogger

Numbered page Navigation widget is one of the most popular blogger widgets. Numbered Page Navigation is only provided to the blogs hosted on wordpress, but now it is also available for Blogger Blogs. Blogger default navigation shows Newer Posts and  Older Posts links, and if you want to change it to Numbered Page Navigation then you're at right place. Today, in this tutorial I'm gonna show you that how to add Numbered Page Navigation to Blogger step by step.

Add this Page Navigation Widget to Your Blog

Step 1. Log in to your Blogger Dashboard

Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

</body>

Step 3. Copy the Below code and Paste it just above/before the </body> tag

<style type='text/css'>
    .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}
    .showpage a {float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWccrvfaRwSX86AxGmsK8C628Wm_huGwtljuceARhV8_GYIrAML94CDIrUCHCNfgi4w2wwZFdy693WbCLeQFj-h6xD2XmO2DtnW028-TXnuTRWfcenlycQrpQBB3ozV1MKP4wO6QchFO8/s1600/blogolect-npb.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_mN8PtF31fkpWWyr6VFENY7GF7E0uOLOlXi15nThbFNwbkG221DDV-y6DujtdJ2sifqBicQ0W2D78uYwvqMXzrngIIhoMY_7GU43oInjVg1SWPN0Nd5n1KbcScAtvbTRogzm8aUwmTg/s1600/pgn-blogolect.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_mN8PtF31fkpWWyr6VFENY7GF7E0uOLOlXi15nThbFNwbkG221DDV-y6DujtdJ2sifqBicQ0W2D78uYwvqMXzrngIIhoMY_7GU43oInjVg1SWPN0Nd5n1KbcScAtvbTRogzm8aUwmTg/s1600/pgn-blogolect.gif) no-repeat 0 100%;color : #fff;}
    .showpagePoint {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_mN8PtF31fkpWWyr6VFENY7GF7E0uOLOlXi15nThbFNwbkG221DDV-y6DujtdJ2sifqBicQ0W2D78uYwvqMXzrngIIhoMY_7GU43oInjVg1SWPN0Nd5n1KbcScAtvbTRogzm8aUwmTg/s1600/pgn-blogolect.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=&quot;Previous&quot;;
var downPageWord=&quot;Next&quot;;
</script>
<script src='https://googledrive.com/host/0B43vwjPtKakCLTdyOExLTm5Vekk' type='text/javascript'/>

• Replace var pageCount=5; with the number of posts you want to show

Step 4. Hit the Save Button
And you're Done 

From Editors Desk

I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !Feel Free to Ask. Your Feedback is always highly appreciated  - See more at: http://blogolect.blogspot.com/b/post-preview?token=_xfJSUMBAAA._QudqCLLg7WGzaDyI8xMBQ.Kx0AKv8MK84qcLnfGHzLMQ&postId=3783301090408238732&type=POST#sthash.PIEvAy4V.dpuf

I hope that you will like this widget, Give us your Feedback and Enjoy Blogging !
Feel Free to Ask. Your Feedback is always highly appreciated

Share This:

Tags:

Widgets

• Prevoius
• Next