Stylish Numbered Page Navigation For Blogger

Add Numbered Page Navigation Widget With DIfferent Styles For Blogger / Blogspot

Page navigation widget for blogger is most popular widget, and most bloggers are using this. because these players are only provided in the wordpress blogs hosted or blogs. But now his trick has been made available to bloggers is also here that I am giving this Page Navigation Widget with different styles and options for full customization

Widget 1

How To Install This Widget On Blogger :

Login to Blogger → Dashboard
Click on Drop Down Menu and select Layout
Add a HTML/JavaScript Gadget
Paste below code in it.

Style 1

Style 2

Style 3

Style 4

Style 5

Style 6

Style 7

Style 8

Style 9

Style 10

Stylish colored Navigation Widget 2

Add a HTML/JavaScript Gadget
Paste below code in it.

Style 1

Style 2

<style type="text/css">#blog-pager{padding:5px 0 !important;} .showpageArea {font-weight: bold;margin:5px;}/*http://mix--er.blogspot.com*/ .showpageArea a {text-decoration:underline;color: #fff;}/*http://mix--er.blogspot.com*/ .showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #789EB1; background: -moz-linear-gradient(top, #789EB1 0%, #618FA7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#789EB1), color-stop(100%,#618FA7)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1', endColorstr='#618FA7',GradientType=0 ); }/* http://mix--er.blogspot.com*/ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #6B6B6B 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#6B6B6B)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#6B6B6B',GradientType=0 ); } /* http://mix--er.blogspot.com*/ .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); } /*http://mix--er.blogspot.com*/ .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;} /*http://mix--er.blogspot.com*/ .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;} /*http://mix--er.blogspot.com*/ </style><a href="http://mix--er.blogspot.com" target="_blank" title="Blogger Tips and Tricks"><img src="http://bitly.com/BloggerPlayground" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://bitly.com/BloggerPlayground" target="_blank" title="Latest Tips And Tricks"><img src="http://bitly.com/BloggerPlayground" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://bitly.com/BloggerPlayground" target="_blank" title="Blogger Tricks"><img src="http://bitly.com/BloggerPlayground" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type='text/javascript'>var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script><script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/page-navigation/new-code/0-test-p-n-01_00-ycode.js' type='text/javascript'></script>

Style 3

<style type="text/css">#blog-pager{padding:5px 0 !important;} .showpageArea {font-weight: bold;margin:5px;} /* http://mix--er.blogspot.com*/ .showpageArea a {text-decoration:underline;color: #fff;} /* http://mix--er.blogspot.com*/ .showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #f85032; background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); } /* http://mix--er.blogspot.com*/ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); } /* http://mix--er.blogspot.com*/ .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); } /* http://mix--er.blogspot.com*/ .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;} /* http://mix--er.blogspot.com*/ .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;} /* http://mix--er.blogspot.com*/ </style><a href="http://bitly.com/BloggerPlayground/" target="_blank" title="Blogger Tips and Tricks"><img src="http://bitly.com/JQueryImageZoomEffect" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://bit.ly/24mmg" target="_blank" title="Latest Tips And Tricks"><img src="http://bit.ly/24mmg" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://bitly.com/BloggerPlayground" target="_blank" title="Blogger Tricks"><img src="http://bit.ly/24mmg" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type='text/javascript'>var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script><script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/page-navigation/new-code/0-test-p-n-01_00-ycode.js' type='text/javascript'></script>

Style 4

<style type="text/css">#blog-pager{padding:5px 0 !important;} .showpageArea {font-weight: bold;margin:5px;} /* http://mix--er.blogspot.com*/ .showpageArea a {text-decoration:underline;color: #fff;} /* http://mix--er.blogspot.com*/ .showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #ffb76b; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); } /* http://mix--er.blogspot.com*/ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); } /* http://mix--er.blogspot.com*/ .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); } /* http://mix--er.blogspot.com*/ .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;} /* http://mix--er.blogspot.com*/ .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;} /* http://mix--er.blogspot.com*/ </style><a href="http://bitly.com/BloggerPlayground" target="_blank" title="Blogger Tips and Tricks"><img src="http://bitly.com/BloggerPlayground" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://bitly.com/BloggerPlayground" target="_blank" title="Latest Tips And Tricks"><img src="http://bitly.com/BloggerPlayground" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://bitly.com/BloggerPlayground" target="_blank" title="Blogger Tricks"><img src="http://bitly.com/BloggerPlayground" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type='text/javascript'>var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script><script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/page-navigation/new-code/0-test-p-n-01_00-ycode.js' type='text/javascript'></script>

Style 5

<style type="text/css">#blog-pager{padding:5px 0 !important;} .showpageArea {font-weight: bold;margin:5px;} /* http://mix--er.blogspot.com*/ .showpageArea a {text-decoration:underline;color: #fff;} /* http://mix--er.blogspot.com*/ .showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); } /* http://mix--er.blogspot.com*/ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); } /* http://mix--er.blogspot.com*/ .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); } /* http://mix--er.blogspot.com*/ .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;} /* http://mix--er.blogspot.com*/ .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;} /* http://mix--er.blogspot.com*/ </style><a href="http://bitly.com/BloggerPlayground/" target="_blank" title="Blogger Tips and Tricks"><img src="http://bitly.com/BloggerPlayground" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://bitly.com/BloggerPlayground" target="_blank" title="Latest Tips And Tricks"><img src="http://bitly.com/BloggerPlayground" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://bit.ly/24mmg" target="_blank" title="Blogger Tricks"><img src="http://bit.ly/24mmg" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type='text/javascript'>var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script><script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/page-navigation/new-code/0-test-p-n-01_00-ycode.js' type='text/javascript'></script>

Notifikasi

Mix Blogging

Stylish Numbered Page Navigation For Blogger