How to Add page number navigation gadget for blogger
Add page number navigation bar in blogger for easy access your blog by Jump. cool page number navigation for blogger easy to add in blogger
Fast Copy the html/JavaScript Code from the below box
<style>#blog-pager{clear:both;margin:20px
0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float:
left;}#blog-pager-older-link{float: right;}.Profile img{border:3px
solid;float:left;margin:5px 10px 5px
0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold
20px/1.6em
Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em
0;}.profile-textblock{line-height:1.6em;margin:0.5em
0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px
0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList
h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link
a,a.home-link,.showpageNum a,.showpage a{background:
url(https://lh6.googleusercontent.com/-zvDQ4P4UvtA/UaxWjMa_yNI/AAAAAAAAADI/Sq_08RjZWAE/w1-h26-no/ABT+nav3.jpg)
repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow:
1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link
a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum
a:hover,.showpage a:hover{background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYDu8ra5NGzLV69H3rIpjvMb83hnxgR5ie2olY6LSYyShMjR59dJzyuKZlxMrX8kU6LT5TDkwEqk-3IJzSbleUXdmwRlhJKlsMqoV1lBu34FVk3SchKVFhuU7seaWf80uyCUOo5r2qEDk/w1-h26-no/ABT+nav2.jpg)
repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px
5px;text-shadow: 1px 0 1px #000;}</style><script
type='text/javascript'>var postperpage=7;var numshowpage=6;var upPageWord="Prev.";var
downPageWord="Next";var urlactivepage=location.href;var
home_page="/"</script><script
src='https://allbloggertips.googlecode.com/svn/ABT-Page-Navigation.js'
type='text/javascript'></script>
<style>#blog-pager{clear:both;margin:20px
0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float:
left;}#blog-pager-older-link{float: right;}.Profile img{border:3px
solid;float:left;margin:5px 10px 5px
0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold
20px/1.6em
Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em
0;}.profile-textblock{line-height:1.6em;margin:0.5em
0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px
0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList
h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link
a,a.home-link,.showpageNum a,.showpage a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIvZm6wx3RflTB3vV4u7ReaadbEkPoUYpmW8MAjcuwka_cU9bX4u-im9kxWpSJAh5nOgPIzBx9DOTFrOIJzyjtdF7zGTKbQvPUCqMTkmilQsGHCNLGzH_LVac5nKuHJkVKNi5Kb-F5_U4/w1-h26-no/ABT+nav1.jpg)
repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px
5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link
a:hover,#blog-pager-newer-link
a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum
a:hover,.showpage a:hover{background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYDu8ra5NGzLV69H3rIpjvMb83hnxgR5ie2olY6LSYyShMjR59dJzyuKZlxMrX8kU6LT5TDkwEqk-3IJzSbleUXdmwRlhJKlsMqoV1lBu34FVk3SchKVFhuU7seaWf80uyCUOo5r2qEDk/w1-h26-no/ABT+nav2.jpg)
repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px
5px;text-shadow: 1px 0 1px #000;}</style><script
type='text/javascript'>var postperpage=7;var numshowpage=6;var
upPageWord="Prev.";var downPageWord="Next";var
urlactivepage=location.href;var home_page="/"</script><script
src='https://allbloggertips.googlecode.com/svn/ABT-Page-Navigation.js'
type='text/javascript'></script>
For Green Button
<style>#blog-pager{clear:both;margin:20px
0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float:
left;}#blog-pager-older-link{float: right;}.Profile img{border:3px
solid;float:left;margin:5px 10px 5px
0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold
20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em
0;}.profile-textblock{line-height:1.6em;margin:0.5em
0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px
0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList
h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link
a,a.home-link,.showpageNum a,.showpage a{background:
url(https://lh3.googleusercontent.com/-w9ZA6PoJmXI/UaxcShxGABI/AAAAAAAAAD4/Cm_b0ycvJbg/w1-h26-no/ABT+nav4.jpg)
repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px
5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link
a:hover,#blog-pager-newer-link
a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum
a:hover,.showpage a:hover{background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYDu8ra5NGzLV69H3rIpjvMb83hnxgR5ie2olY6LSYyShMjR59dJzyuKZlxMrX8kU6LT5TDkwEqk-3IJzSbleUXdmwRlhJKlsMqoV1lBu34FVk3SchKVFhuU7seaWf80uyCUOo5r2qEDk/w1-h26-no/ABT+nav2.jpg)
repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px
5px;text-shadow: 1px 0 1px #000;}</style><script type='text/javascript'>var
postperpage=7;var numshowpage=6;var upPageWord="Prev.";var
downPageWord="Next";var urlactivepage=location.href;var
home_page="/"</script><script
src='https://allbloggertips.googlecode.com/svn/ABT-Page-Navigation.js'
type='text/javascript'></script>
(B) Go to blogger layout option
(C) Select Add gadget option.
(D) Select "HTML/ JavaScript" Gadget and past the html/JavaScript code
Now save this ..
Now your Pager is Ready
Don't forget to like us on facebook .










0 comments:
Post a Comment