Oqzigen Blog Add Numbered Page Navigation For Blogger Template

Hi, in this time I will share my knowledge about how to create navigation page number for Blogger. This is blog navigation to move to next page, different with default of Blogger template with next and previous navigation, this navigation shaped a figure so you can see where you are on the blog page. So this is very useful, your default navigation will be replaced with this navigation page number. This is like navigation page number of search engines result. Follow this steps below if you want to add this page navigation to your blog.How to add Navigation Page Number for Blogger 1. Go to blogger > Template > Edit HTML2. Backup your template3. Search </head> and paste this code just above </head><!--Navigation setting start--><style type='text/css'>.showpageArea { background: #eee; padding: 3px 0 3px 0;margin-top:40px;margin-bottom:5px;}.showpageArea a {color: #000000;font-weight:normal;background:#fff;padding: 3px 6px !important;font-size:11px;margin:0px 2px;text-decoration: none;}.showpageArea a:hover {border: 1px solid #696969;color: #FFFFFF !important;background: #696969 !important;}.showpageNum a {font-weight:normal;font-size:11px;padding: 3px 6px !important;margin:0px 2px;text-decoration: none;}.showpageNum a:hover {color: #FFFFFF !important;background: #696969 !important;border: 1px solid #696969 !important;}.showpageNum a:link,.showpage a:link {font-size:11px;padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;}.showpagePoint { background: #ffffff;font-size:11px;padding: 2px 5px 2px 5px;margin: 2px;font-weight: bold;}.showpage {font-size:11px;}.showpage a:hover {font-size:11px;}.showpageNum a:hover {font-size:11px;font-weight:normal;}.showpage a:hover {color: #FFFFFF;background-color: #3d85c6;}.showpagePoint {color: #FFFFFF !important;background: #009999 !important;border: 1px solid #009999; }.showpageNum a:link,.showpage a:link {color: #000000 !important;background-color: #009999;} .showpageArea a {border: 1px solid #009999;}</style><!--Navigation setting end-->3. And then search </body> and paste this code just above </body><!--Numbered Page Navigation Start--><script type='text/javascript'>var pageCount=2;var displayPageNum=5;var upPageWord =&#39;Previous&#39;;var downPageWord =&#39;Next&#39;;</script><script src='http://oqzigen.googlecode.com/files/numbered-page-navigation.js' type='text/javascript'/><script src='http://oqzigen.googlecode.com/files/numbered-page-navigation2.js' type='text/javascript'/><!--Numbered Page Navigation End-->4. Ok and Save your templateYou can make some adjustments, replace 5 with the number you want to change the number of page numberand adjust 2 with the number of your posts on main page.You can setting the number of posts in Layout and click Edit in Blog Posts widget and select the number of posts on main page you want.DEMOCreate your blog more SEO, you can add breadcrumbs to your blog to increase your blog more SEO friendly.