Numbered Page Navigation for Blogger

Hi everybody, How are you? Do you want to change your numbered navigation? No tension. You can solve it Just 2 minutes. It's very simple. Just you have follow some steps. No more talk. Let's see the following steps.

Following Steps:

At first you have to Log in your  blogger Dashboard--->Page Layout--->Page Element.
Then you have to Click 'Add a Gadget' on a sidebar and select 'HTML/Javascript'
Then just Copy the following codes which I given below and paste in 'HTML/Javascript'
Save it and see your Stylish Numbered Navigation.

Numbered Page Navigation

<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/AVvXsEjPXzVajrcxPhuiZ7VWosGlOaiVUcfMqzf4oWYKkZJG2pCjB75Cs5KsU4Gbr4zt2RMZpRpdjslpMXCcajr48QBaDQeWTtvgc61ZKwc30PukrPQMB47JyikMGWrk6PhOlITRVHuGvgw7gSo/s1600/transpdark.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
margin:0px 1px 0 1px;padding:3px 10px;color:#eee;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXzVajrcxPhuiZ7VWosGlOaiVUcfMqzf4oWYKkZJG2pCjB75Cs5KsU4Gbr4zt2RMZpRpdjslpMXCcajr48QBaDQeWTtvgc61ZKwc30PukrPQMB47JyikMGWrk6PhOlITRVHuGvgw7gSo/s1600/transpdark.png) repeat-x;background-position:0px -15px;
border:2px solid #555;-webkit-border-radius:3px;
-moz-border-radius:3px;border-radius:3px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXzVajrcxPhuiZ7VWosGlOaiVUcfMqzf4oWYKkZJG2pCjB75Cs5KsU4Gbr4zt2RMZpRpdjslpMXCcajr48QBaDQeWTtvgc61ZKwc30PukrPQMB47JyikMGWrk6PhOlITRVHuGvgw7gSo/s1600/transpdark.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;line-height:30px;padding:3px 10px;color:#eee;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXzVajrcxPhuiZ7VWosGlOaiVUcfMqzf4oWYKkZJG2pCjB75Cs5KsU4Gbr4zt2RMZpRpdjslpMXCcajr48QBaDQeWTtvgc61ZKwc30PukrPQMB47JyikMGWrk6PhOlITRVHuGvgw7gSo/s1600/transpdark.png) repeat-x;background-position:0px -15px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #aaa;-webkit-border-radius:3px;  -moz-border-radius:3px;border-radius:3px;color:#eee;text-decoration:underline;font-weight:bold;
 </style> <a href="http://theblogger911.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://theblogger911.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://theblogger911.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 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='https://dl.dropboxusercontent.com/s/icju1ieawjolg4n/theblogger911.navi.js'></script>

### You can customize it with your own style.
If you have any idea about coding, then you can change internal code.
Otherwise you can change red color numbers.

var postperpage=5;
var numshowpage=3;

But, I suggest no need to change anything. Default format is best.


Thanks for visit my site.