Add Animated Number Page Navigation On Blogger

Add Animated Number Page Navigation On Blogger:

Number Page Navigation More Attractive And Easy To Use For Viewers.Its Very Beautiful And Stylish.So Today I Am Gonna Show You How To Add Animated Number Page Navigation On Blogger.So Follow My Steps.

1-> Open Your Blogger Account

2-> Click On Layout

3-> Click On Add Gadget And Select HTML/JAVASCRIPT

4-> Paste The Below Code

<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/AVvXsEiXSRd_uP4G5kueC-LamwgkSAToG3NhTxNBHCyW-S9g6zFJzc5GWExQL4r2vsmCOroujA2FmNpliFSAwX0n6NzWoTZM2IZT4TdmiyBJaY_OKZEEo0LE_tL7WZjPifYpiAhlN3KuUliODgw/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/AVvXsEiXSRd_uP4G5kueC-LamwgkSAToG3NhTxNBHCyW-S9g6zFJzc5GWExQL4r2vsmCOroujA2FmNpliFSAwX0n6NzWoTZM2IZT4TdmiyBJaY_OKZEEo0LE_tL7WZjPifYpiAhlN3KuUliODgw/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/AVvXsEiXSRd_uP4G5kueC-LamwgkSAToG3NhTxNBHCyW-S9g6zFJzc5GWExQL4r2vsmCOroujA2FmNpliFSAwX0n6NzWoTZM2IZT4TdmiyBJaY_OKZEEo0LE_tL7WZjPifYpiAhlN3KuUliODgw/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/AVvXsEiXSRd_uP4G5kueC-LamwgkSAToG3NhTxNBHCyW-S9g6zFJzc5GWExQL4r2vsmCOroujA2FmNpliFSAwX0n6NzWoTZM2IZT4TdmiyBJaY_OKZEEo0LE_tL7WZjPifYpiAhlN3KuUliODgw/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/AVvXsEiqZlPBvAQna2OILjSqGgQhOSFzj9oaqGh3e2xD8oNseda9s3HUmCaKMbfngjPHp-vBKerHn8leandcpMhgO3gxzCabu_B2YDbcGixIkGalvhjxRHd0WYETlJIBSD5T5vc93LC4p5__UY0/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>

5-> Save Your HTML/JAVASCRIPT

Yipeeeeeeeeeee..... Your Number Page Navigation Is Worked

Please Leave Your Question And Comment Below