.png)
You may have a customized Numbered Page Navigation Widgets. In this tutorial we are providing you various types of page navigation. These can be inserted in your blog by following the steps given below.
Step 1: Go to Blogger Dashboard > Template > click on the Edit HTML button
Step 1: Go to Blogger Dashboard > Template > click on the Edit HTML button
Step 2: Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box. Then search for the following tag
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ]]></b:skin> |
Step 3: Now choose one of the numbered page navigation styles given below and copy the code and paste it just above the code.
These are the following codes for page navigation widgets along with their designs:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} | |
| .blog-pager {background: none;} | |
| .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;} | |
| .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;} | |
| .showpageOf{display:none!important} | |
| #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;} | |
| #blog-pager .pages{border:none;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} | |
| .blog-pager {background: none;} | |
| .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} | |
| .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;} | |
| #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;} | |
| .showpageOf{display:none!important} | |
| #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} | |
| .blog-pager {background: none;} | |
| .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;} | |
| .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} | |
| .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;} | |
| a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;} | |
| #blog-pager .pages{border:none;background: none;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} | |
| .blog-pager {background: none;} | |
| .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;} | |
| .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;} | |
| #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;} | |
| .showpageOf{display:none!important} | |
| #blog-pager .pages{border:none;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } | |
| .blog-pager {background: none;} | |
| .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;} | |
| .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;} | |
| #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;} | |
| .showpageOf{display:none!important} | |
| #blog-pager .pages{border:none;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } | |
| .blog-pager {background: none;} | |
| .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;} | |
| .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;} | |
| #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} | |
| .showpageOf{display:none!important} | |
| #blog-pager .pages{border:none;} |
Step 4: Now find (CTRL + F) this tag:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| </body> |
Step 5: Add the following script just above it:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <b:if cond='data:blog.pageType != "item"'> | |
| <b:if cond='data:blog.pageType != "static_page"'> | |
| <script type='text/javascript'> | |
| /*<![CDATA[*/ | |
| var perPage=7; | |
| var numPages=6; | |
| var firstText ='First'; | |
| var lastText ='Last'; | |
| var prevText ='« Previous'; | |
| var nextText ='Next »'; | |
| var urlactivepage=location.href; | |
| var home_page="/"; | |
| /*]]>*/ | |
| </script> | |
| <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/> | |
| </b:if> | |
| </b:if> |
After installing, you might want to change these default settings:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| perPage: 7, | |
| numPages: 6, | |
| var firstText ='First'; | |
| var lastText ='Last'; | |
| var prevText ='« Previous'; | |
| var nextText ='Next »'; | |
| } |
1) perPage: how many posts will be shown in each page (7). This value has to be the same as the number of posts on the main page. Otherwise, add the same number by going to "Settings" > "Formatting" and type it in the "Show at most" field, then click on the "Save Settings" button.
2) numPages: how many pages will be shown in the page navigation (6)
3) to replace the 'First', 'Last', "« Previous" and "Next »" texts, just type your own within the quotes.
Step 6: Click on the Save Template button and you're done.
0 comments