4 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/AVvXsEjXmhKYeR4mpTEpHSigKJIi6DqMVa36Un7VApuH9sLbE5xudN9u-3Wdm50FqN7EXTEqpVZx8TH7iiFnCIOliJ5nUCKh9ErVWiY0n2ZkzYLWlAZyByMeesHvlQ_hcPTS9i-GyHokLNZZdcc/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/AVvXsEjXmhKYeR4mpTEpHSigKJIi6DqMVa36Un7VApuH9sLbE5xudN9u-3Wdm50FqN7EXTEqpVZx8TH7iiFnCIOliJ5nUCKh9ErVWiY0n2ZkzYLWlAZyByMeesHvlQ_hcPTS9i-GyHokLNZZdcc/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/AVvXsEjXmhKYeR4mpTEpHSigKJIi6DqMVa36Un7VApuH9sLbE5xudN9u-3Wdm50FqN7EXTEqpVZx8TH7iiFnCIOliJ5nUCKh9ErVWiY0n2ZkzYLWlAZyByMeesHvlQ_hcPTS9i-GyHokLNZZdcc/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/AVvXsEjXmhKYeR4mpTEpHSigKJIi6DqMVa36Un7VApuH9sLbE5xudN9u-3Wdm50FqN7EXTEqpVZx8TH7iiFnCIOliJ5nUCKh9ErVWiY0n2ZkzYLWlAZyByMeesHvlQ_hcPTS9i-GyHokLNZZdcc/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/AVvXsEhFuN2R0zLGcvnCYFWUwWbfmBuf7rFyc6oDEVb9gU-jfx8mnrXrOBwJ1b-EVsoijl7kgaEm1chPh47lnJwoRVsVQ3FKL_Dqu-u5sFjwz7ozcZ3EZ7X2QWUwrJWv_wLKFt07cU1fZTD6Pig/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