Tuesday, 22 September 2015

How to Add Numbered Pagination on Blogger Template

How to Add Numbered Pagination on Blogger Template

Shalom Readers..!! Let’s continue our Blogging tutorial. In last article you have learned How to Add ContactWidget/Page on Blogger Template, here in this article you are going to learn “Add Numbered Pagination on Blogger Template/Homepage. The Blogger platform provides basic set of blog elements like on account of pagination only Older/Newer or previous/ Next navigation options are given.
Add Numbered Pagination on blogger template

The old day pagination style is gone now. You are required to redesign the template if you want people to keep browsing your blog. As it is also 101% true that rich content is vital part of every blog but blog aesthetics also support in order to keep people browsing the contents of your blog.

Recommended Read:

How to Show Post Summary/excerpts on Homepage with Thumbnail

As when you make a visit to wordPress sites, you have seen the stylish, boxed pagination buttons on the bottom. The Numerical pagination on site looks great as compare to Next/previous post. 
This is how our Numbered Pagination will look like.
If you want to show the Numbered pagination on Blogger template then this tutorial post “Add Numbered pagination on blogger Template” is going to answer all of your questions in a very simple way.

Shall we proceed..??

How to Add Numbered Pagination on Blogger Template

1.) Open Dashboard and Go to “Template” then “Edit HTML”
Note: Before proceeding further, make it pretty sure to back up your blogger template to avoid any mess-ups. For this, copy your whole script and paste in a word file.
2.) Now click anywhere over the script and hit “CTRL+F”
3.) Now search for 

and paste the following CSS code just above this tag.

<style type="text/css">
.showpageArea {
    clear: both;
    border: 1px solid #eee;
    border-width: 1px 0;
    padding: 15px;
    margin: 15px 0;
.showpageOf {
    color: #888;
    margin-right: 10px;
.showpageNum a, 
.showpage a {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 5px 10px;
    display: inline-block;
    margin: 0 5px;
    background-color: #eee;
    -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
    -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
.showpageArea, .showpageArea a {
    color: #333;
.showpage a: hover, .showpageNum a: hover, .showpagePoint {
    background-color: #3498DB;
    color: #f5f5f5;
.showpagePoint {
    font-weight: 700;

4.) Now again search for 
and paste the following JavaScript above the tag.

<!-- Begin Page Navigation -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
<script src='https://drive.google.com/uc?export=download&id=0BxdeKliyEmFxeFJkblhPd0phYUU' />
<!-- End Page Navigation -->

Cheers..!! You have finished the task to “Add numbered pagination on blogger template” Now open your Blog to see the Numbered pagination.

If you got stuck anywhere following the tutorial or have any thought you’d like to share, then post your query or thought by using the comments box below. Remember that your comments and thoughts are highly appreciated and welcomed. Thanks

No comments:

Post a Comment