Bottom Ad [Post Page]

Search This Blog


Recent Posts


10 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Tel: +01 19 9876-54321


Trending Buzz

Contact Form


Email *

Message *

Follow by Email

Full width home advertisement

Author Description

Hey there, We are SoraTemplates! We are trying to provide you the new way to look and use the blogger templates. Our designers are working hard and pushing the boundaries of possibilities to widen the horizon of the regular templates and provide high quality blogger templates to all hardworking bloggers!
FantasyExpert | Dream11

Post Page Advertisement [Top]

Recent Tube



Life & style




» » 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='' />
<!-- 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

Newer Post
Older Post

No comments:

Leave a Reply