How To Add Page Number navigation to blogger(4 diff styles)

 I discussed so many times in my previous posts..like Dropdown menu widget. ,how much important is Easy Navigation for your Blog or site..here i’m sharing a gadget to show page number navigation to your blog homepage..like 1 2 3 and so on so that it make easy for your visitor to navigate through your blog.

Follow some simple steps to implement…
1. Just login to your Blogger Dashboard.
2.go to Design>Edit HTML (back up first)
3.select any style below,copy the code given  and paste it above ]]></b:skin>

STYLE 1
STYLE 1 CODE
.showpageArea {<br /> font-family:verdana,arial,helvetica;<br /> color: #000;<br /> font-size:11px; <br /> margin:10px;<br /> }<br /> <br /> .showpageArea a {<br /> color: #000;<br /> text-shadow:0 1px 2px #fff;<br /> font-weight: 700;<br /> }<br /> <br /> .showpageNum a {<br /> padding: 3px 8px;<br /> margin:0 4px;<br /> text-decoration: none;<br /> border:1px solid #999;<br /> -webkit-border-radius:3px;-moz-border-radius:3px;<br /> background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9_HBATINN0rFvevRuctgIbaQBqVynkI-z2urqLKerLaacaPHdRNK0gGSZ5F9gMMrYUu7Y7R3IZqRLM-ws_EhOJEK75nFbRA3dOw2qgmMEuAy-d1akeb3y_2Mt3zf4fo-YCvB1uOTOzI/s1600/wp1.jpg) 0 -50px repeat-x;<br /> }<br /> <br /> .showpageNum a:hover {<br /> border:1px solid #888;<br /> background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9_HBATINN0rFvevRuctgIbaQBqVynkI-z2urqLKerLaacaPHdRNK0gGSZ5F9gMMrYUu7Y7R3IZqRLM-ws_EhOJEK75nFbRA3dOw2qgmMEuAy-d1akeb3y_2Mt3zf4fo-YCvB1uOTOzI/s1600/wp1.jpg) 0 -25px repeat-x;<br /> }<br /> <br /> .showpageOf{<br /> margin:0 8px 0 0;<br /> }<br /> <br /> .showpagePoint {<br /> color:#fff;<br /> text-shadow:0 1px 2px #333;<br /> padding: 3px 8px;<br /> margin: 2px;<br /> font-weight: 700;<br /> -webkit-border-radius:3px;-moz-border-radius:3px;<br /> border:1px solid #999;<br /> background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9_HBATINN0rFvevRuctgIbaQBqVynkI-z2urqLKerLaacaPHdRNK0gGSZ5F9gMMrYUu7Y7R3IZqRLM-ws_EhOJEK75nFbRA3dOw2qgmMEuAy-d1akeb3y_2Mt3zf4fo-YCvB1uOTOzI/s1600/wp1.jpg) 0 0 repeat-x;<br /> text-decoration: none;<br /> }
STYLE 2

STYLE 2 CODE

.showpageArea {<br /> font-family:verdana,arial,helvetica;<br /> color: #000;<br /> font-size:11px; <br /> margin:10px;<br /> }<br /> <br /> .showpageArea a {<br /> color: #000;<br /> text-shadow:0 1px 2px #fff;<br /> font-weight: 700;<br /> }<br /> <br /> .showpageNum a {<br /> padding: 3px 8px;<br /> margin:0 4px;<br /> text-decoration: none;<br /> border:1px solid #919106;<br /> -webkit-border-radius:3px;-moz-border-radius:3px;<br /> background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pgfQTwn377HWz2sCaSIIclFjL3c5IOMGDCssrG-k3aYP-Tt86T_RtRgMJex6JoAwSu0IgaQlIIT1sBFOZx_Pkxg_SnkT5Mpbb-Zc5lE397JqX7Tl65GSLRnHxBl6aPy62hGirDHM1hw/s1600/wp2.jpg) 0 -50px repeat-x;<br /> }<br /> <br /> .showpageNum a:hover {<br /> border:1px solid #aeae0a;<br /> background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pgfQTwn377HWz2sCaSIIclFjL3c5IOMGDCssrG-k3aYP-Tt86T_RtRgMJex6JoAwSu0IgaQlIIT1sBFOZx_Pkxg_SnkT5Mpbb-Zc5lE397JqX7Tl65GSLRnHxBl6aPy62hGirDHM1hw/s1600/wp2.jpg) 0 -25px repeat-x;<br /> }<br /> <br /> .showpageOf{<br /> margin:0 8px 0 0;<br /> }<br /> <br /> .showpagePoint {<br /> color:#fff;<br /> text-shadow:0 1px 2px #333;<br /> padding: 3px 8px;<br /> margin: 2px;<br /> font-weight: 700;<br /> -webkit-border-radius:3px;-moz-border-radius:3px;<br /> border:1px solid #919106;<br /> background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pgfQTwn377HWz2sCaSIIclFjL3c5IOMGDCssrG-k3aYP-Tt86T_RtRgMJex6JoAwSu0IgaQlIIT1sBFOZx_Pkxg_SnkT5Mpbb-Zc5lE397JqX7Tl65GSLRnHxBl6aPy62hGirDHM1hw/s1600/wp2.jpg) 0 0 repeat-x;<br /> text-decoration: none;<br /> }
STYLE 3

STYLE 3 CODE

.showpageArea {<br /> font-family:verdana,arial,helvetica;<br /> color: #000;<br /> font-size:11px; <br /> margin:10px;<br /> }<br /> <br /> .showpageArea a {<br /> color: #fff;<br /> }<br /> <br /> .showpageNum a {<br /> padding: 3px 8px;<br /> margin:0 4px;<br /> text-decoration: none;<br /> background: #363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4noT7Nbqef3sqYUC9FJrfZK8L6Z3Y7vQT_ofpqpVdfSARslpvoi7sF64yDhnpAQvx_339LDlzPTrUbF6PfVM8JURDa_5UYpMGCvl5Gk2fP8JagvEj6mwoH-PR0UoZFQDf3tnTFivAgE4/s1600/wp3.jpg) 0 -25px repeat-x;<br /> }<br /> <br /> .showpageNum a:hover {<br /> background: #044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4noT7Nbqef3sqYUC9FJrfZK8L6Z3Y7vQT_ofpqpVdfSARslpvoi7sF64yDhnpAQvx_339LDlzPTrUbF6PfVM8JURDa_5UYpMGCvl5Gk2fP8JagvEj6mwoH-PR0UoZFQDf3tnTFivAgE4/s1600/wp3.jpg) 0 -50px repeat-x;<br /> }<br /> <br /> .showpagePoint {<br /> color:#fff;<br /> padding: 3px 8px;<br /> margin: 2px;<br /> font-weight: 700;<br /> background: #e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4noT7Nbqef3sqYUC9FJrfZK8L6Z3Y7vQT_ofpqpVdfSARslpvoi7sF64yDhnpAQvx_339LDlzPTrUbF6PfVM8JURDa_5UYpMGCvl5Gk2fP8JagvEj6mwoH-PR0UoZFQDf3tnTFivAgE4/s1600/wp3.jpg) 0 0 repeat-x;<br /> text-decoration: none;<br /> }<br /> <br /> .showpageOf{<br /> margin:0 8px 0 0;<br /> }
STYLE 4

STYLE 4 CODE


.showpageArea {<br /> font-family:verdana,arial,helvetica;<br /> color: #000;<br /> font-size:11px; <br /> margin:10px;<br /> }<br /> <br /> .showpageArea a {<br /> color: #fff;<br /> }<br /> <br /> .showpageNum a {<br /> padding: 3px 8px;<br /> margin:0 4px;<br /> text-decoration: none;<br /> background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zzJqQFZZbAdBWxYXHFuOHpvJF8ipOOX8i1KaQBQvCIPctYj9Z4O9ZnzmfYVybWW9jdqUx2ZvtWmhMvPgauk6hpdoVCC42cMpQ5tH6hTdmCI-DqWUJfxwS36SJc6wNMPjPy_X-VFvyvg/s1600/wp5.jpg) 0 -50px repeat-x;<br /> }<br /> <br /> .showpageNum a:hover {<br /> background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zzJqQFZZbAdBWxYXHFuOHpvJF8ipOOX8i1KaQBQvCIPctYj9Z4O9ZnzmfYVybWW9jdqUx2ZvtWmhMvPgauk6hpdoVCC42cMpQ5tH6hTdmCI-DqWUJfxwS36SJc6wNMPjPy_X-VFvyvg/s1600/wp5.jpg) 0 -25px repeat-x;<br /> }<br /> <br /> .showpagePoint {<br /> color:#fff;<br /> padding: 3px 8px;<br /> margin: 2px;<br /> font-weight: 700;<br /> background: #06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zzJqQFZZbAdBWxYXHFuOHpvJF8ipOOX8i1KaQBQvCIPctYj9Z4O9ZnzmfYVybWW9jdqUx2ZvtWmhMvPgauk6hpdoVCC42cMpQ5tH6hTdmCI-DqWUJfxwS36SJc6wNMPjPy_X-VFvyvg/s1600/wp5.jpg) 0 0 repeat-x;<br /> text-decoration: none;<br /> }<br /> <br /> .showpageOf{<br /> margin:0 8px 0 0;<br /> }
4. Now search for code </body> and paste the given code above it.

<script type=’text/javascript’><br /> var home_page=”/”;<br /> var urlactivepage=location.href;<br /> var postperpage=7;<br /> var numshowpage=4;<br /> var upPageWord =’Prev’;<br /> var downPageWord =’Next’;<br /> </script><br /> <script src=’http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js’ type=’text/javascript’></script>
In previous code you can change Prev and Next Text.

var postperpage=7;
var numshowpage=4;

Postperpage : How many Posts you want to show on one Page of blog.
Numshowpage : how Many number will show in Your page Navigation

e.g. If you want to show 5 posts per page then change var postperpage=7; to var postperpage=5;

Ppreview ,Save your Template.


One more thing you need to do that is Label Fix (Customization)


Again go to Design>Edit HTML>check expand widget box
now search for ‘data:label.url’


And replace it with


‘data:label.url + &quot;?&amp;max-results=7&quot;’


Again here you have to change 7 to 5 if you want to show 5 posts per page.

Save your template impress your visitors .

About Abhi Balani

Abhishek Balani has written 516 post in this blog.

Hello reader, I'm +Abhi Balani, owner of this blog. I'm a future Computer Engineer and a part time blogger as well. Love to connect with others. Boy with so many dreams. I try to give best blogging tips on my blog OddBlogger.com

• View all posts by Abhi Balani →
• Blog
• Twitter
• Facebook
• Google+

Related posts:

1. How to hide Navigation Bar in blogger
2. Adding Number Of Views For A Article
3. Add designer Horizontal menu on blogger
4. Add Related Posts to blogger every post
5. What Is SERPs ( Search Engine Page Results)?

• Twitter
• Digg
• Facebook
• Delicious
• StumbleUpon

This entry was posted by Abhi Balani on April 9, 2011 at 9:00 AM, and is filed under blogger help n hacks, Widgets. Follow any responses to this post through RSS 2.0.You can leave a response or trackback from your own site.

• Comments (0)
• Related Posts

Share :