Attractive Numbered Page Navigation Widget For Blogger

In this post, im gonna explain how to add blogger page number navigation widget with nice style.
I will include 3 style. You can choose it as your like.This will helps to your visitors to visit every page in your blog. Im using java script ,CSS and HTML for this widget.You can get my earlier post
about number navigation here.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

Style 1

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6lDz54rfY4S5COO8bASkYnKLBDTXKw-ZNCkTWSpBiXHnnW97EC7Kex1EYVBpWe30yT_yr091UAVrJeCWv6S_JSFB43HcQZoN176EI5bLK6ryE-esLeqDO2MeCRl1JCMHCMffcU77kzE/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6lDz54rfY4S5COO8bASkYnKLBDTXKw-ZNCkTWSpBiXHnnW97EC7Kex1EYVBpWe30yT_yr091UAVrJeCWv6S_JSFB43HcQZoN176EI5bLK6ryE-esLeqDO2MeCRl1JCMHCMffcU77kzE/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6lDz54rfY4S5COO8bASkYnKLBDTXKw-ZNCkTWSpBiXHnnW97EC7Kex1EYVBpWe30yT_yr091UAVrJeCWv6S_JSFB43HcQZoN176EI5bLK6ryE-esLeqDO2MeCRl1JCMHCMffcU77kzE/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6lDz54rfY4S5COO8bASkYnKLBDTXKw-ZNCkTWSpBiXHnnW97EC7Kex1EYVBpWe30yT_yr091UAVrJeCWv6S_JSFB43HcQZoN176EI5bLK6ryE-esLeqDO2MeCRl1JCMHCMffcU77kzE/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px;  -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style> 
<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWsWn-oK6n3Qjbh3TcvJSXZbpiQQ9qn4rgB9BYqClNO-EXoahyphenhyphenabW2_zY7uE_RKl61i5U7vZy5k6h43aBW_s34PsjXwd2LURm9O28Bd1YuGhyphenhyphenlIOY98E3UqeWeWBLmfWfVTtp1WotG5c/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 2

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZrm96UMGJZaUkL0TA9HnAqeHrPDJJfhDFuybOx2t_ZdAaZL7Hd2yGrishSF9C4fllmHBpefwm1UehFsYIOYxnhYjZw6m8G_nuRRPUXcUtIAHdKGQjS1qj1NVuJYF_Qhh-dJGWji9DIY4/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZrm96UMGJZaUkL0TA9HnAqeHrPDJJfhDFuybOx2t_ZdAaZL7Hd2yGrishSF9C4fllmHBpefwm1UehFsYIOYxnhYjZw6m8G_nuRRPUXcUtIAHdKGQjS1qj1NVuJYF_Qhh-dJGWji9DIY4/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZrm96UMGJZaUkL0TA9HnAqeHrPDJJfhDFuybOx2t_ZdAaZL7Hd2yGrishSF9C4fllmHBpefwm1UehFsYIOYxnhYjZw6m8G_nuRRPUXcUtIAHdKGQjS1qj1NVuJYF_Qhh-dJGWji9DIY4/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZrm96UMGJZaUkL0TA9HnAqeHrPDJJfhDFuybOx2t_ZdAaZL7Hd2yGrishSF9C4fllmHBpefwm1UehFsYIOYxnhYjZw6m8G_nuRRPUXcUtIAHdKGQjS1qj1NVuJYF_Qhh-dJGWji9DIY4/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px;  -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style> 

<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWsWn-oK6n3Qjbh3TcvJSXZbpiQQ9qn4rgB9BYqClNO-EXoahyphenhyphenabW2_zY7uE_RKl61i5U7vZy5k6h43aBW_s34PsjXwd2LURm9O28Bd1YuGhyphenhyphenlIOY98E3UqeWeWBLmfWfVTtp1WotG5c/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 3

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEianUgaDRRe7tmPOs_LNGRbzI5Sc5-LX37ULfivn6ifKXSs5LSHHXbjp-wTJeThKZ6LFDHzPylrTR2B5kuqXZzJrIv2JL7fi4tQqkBbd0hNrK2ymPqoPc_KclD8SlGX34qrOSvi5Alfc98/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
 margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap;
 }.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEianUgaDRRe7tmPOs_LNGRbzI5Sc5-LX37ULfivn6ifKXSs5LSHHXbjp-wTJeThKZ6LFDHzPylrTR2B5kuqXZzJrIv2JL7fi4tQqkBbd0hNrK2ymPqoPc_KclD8SlGX34qrOSvi5Alfc98/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none;
 }.showpageOf{
 margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEianUgaDRRe7tmPOs_LNGRbzI5Sc5-LX37ULfivn6ifKXSs5LSHHXbjp-wTJeThKZ6LFDHzPylrTR2B5kuqXZzJrIv2JL7fi4tQqkBbd0hNrK2ymPqoPc_KclD8SlGX34qrOSvi5Alfc98/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
line-height:30px;padding:3px 10px;color:#FFF;
 }.showpagePoint {
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEianUgaDRRe7tmPOs_LNGRbzI5Sc5-LX37ULfivn6ifKXSs5LSHHXbjp-wTJeThKZ6LFDHzPylrTR2B5kuqXZzJrIv2JL7fi4tQqkBbd0hNrK2ymPqoPc_KclD8SlGX34qrOSvi5Alfc98/s1600/darkblue.png) repeat-x;
 margin:0 3px 0 3px;padding:3px 10px;
 line-height:30px;cursor:pointer;white-space:nowrap;
 border:2px solid #5C8CFF;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold;
 } </style> 

<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWsWn-oK6n3Qjbh3TcvJSXZbpiQQ9qn4rgB9BYqClNO-EXoahyphenhyphenabW2_zY7uE_RKl61i5U7vZy5k6h43aBW_s34PsjXwd2LURm9O28Bd1YuGhyphenhyphenlIOY98E3UqeWeWBLmfWfVTtp1WotG5c/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

7. Now save your HTML/Javascript'.

You are done...

11 comments:

AnonymousNovember 2, 2012 at 1:01 AM
Pretty portion of content. I simply stumbled upon your blog and in accession capital to assert that I get actually loved account your
blog posts. Any way I'll be subscribing on your feeds or even I fulfillment you get entry to consistently rapidly.
Feel free to visit my web-site firearms manufacturers
AnonymousNovember 3, 2012 at 10:17 PM
Wow, you are great, thanks for sharing
AnonymousNovember 6, 2012 at 2:00 PM
Attractive page, thanks for sharing.
AnonymousNovember 6, 2012 at 4:11 PM
Thanks for share, i used it for my blog, it's great.
BloggertrixNovember 8, 2012 at 9:04 PM
You are welcome :)
carvalharDecember 5, 2012 at 6:37 PM
Hi, thanks for posting it. i'm using it also, but it works only at main page. How can i make it work in label pages? thanks.
carvalharDecember 12, 2012 at 6:45 PM
ok, i sent an email.
Lilene (Fluffy Nails)January 16, 2013 at 2:15 AM
Thanks a lot for sharing, I tried many such widgets and this one actually WORKS so thumbs up. The only downside is, when I access the "comments" view on my blog, the navigation bar disappears below and is back to "older posts, newer posts"... just wanted to let you know in case u know how to fix it...