Before going any further, make sure to backup your Blogger template.
1. STYLING THE PAGINATION
-
Firstly we’ll add the styling to the CSS. To do so, go to Template
> Edit HTML and search for
]]></b:skin> .
If you have trouble finding it check this tutorial. - Just above the ]]></b:skin> tag paste the following.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* Start techpoison Pagination - Custom CSS */ #blog-pager, .blog-pager { display: block; padding: 5px 0; } .showpage a, .pagenumber a, .totalpages, .current { position: relative; display: inline-block; padding: 5px 10px; margin: 0 2px; background: #ffffff; color: #333; border: 1px solid #f2f2f2; font-size: 12px; border-radius: 2px; transition: all 0.3s; } .showpage a:hover, .pagenumber a:hover, .current { background: #333333; color: #ffffff; text-decoration: none; } /* End techpoison Pagination */ |
2. ADD PAGINATION FUNCTIONALITY
- Now we can add the JavaScript to turn the default older/newer navigation into numeric pagination on index pages.
- Again go to Template > Edit HTML. Search for the closing body tag, </body> , which will be near the end of your template.
- Just above the closing body tag pastes the following.
1 2 3 4 5 6 7 8 |
<!-- Start techpoison Pagination --> <b:if cond='data:blog.pageType == "index"'> <script type="text/javascript"> //<![CDATA[ /** WRITTEN BY TECHPOISON.IN **/ var postperpage=3; var numshowpage=4; var prevpage ='Previous'; var nextpage ='Next'; var urlactivepage=location.href; var home_page="/"; //]]> </script> <script src="https://cdn.rawgit.com/xomisse/ac8ccfa4b8fb2c26d5cf76270db92201/raw/f957494b1691cce3d5a8cb92e5b4ed57cded9729/pagination.js" type="text/javascript" /> </b:if> <!-- End techpoison Pagination --> |
As you can see, we’re using a conditional statement to target only the index page, leaving the older/newer navigation on all other pages.
- Change the post per page value to the number of posts that will appear on each page. This should match the number you’ve selected in Settings > Posts, comments and sharing settings > Posts > Show at most.
- Change the Num show page value to how many pages you want to be shown in the numbered page navigation.
- You can also change the prev page and next page values to the text you want to be displayed.
- Then Save the Template, you should now see the numbered pagination on index pages.
