0
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 */

You can edit the CSS above to customize the look of the pagination and make it suit your blog design. You can really style it Anyway you want but my suggestion is to change the colors, adjust padding space and add your own fonts.

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.

Post a Comment

You are welcome to share your ideas with us in the comments!

 
Top