How to Add Pagination on Tumblr

Pagination is the key to increase page views and engagement with your visitor. Here is a working pagination HTML and CSS codes which you will need to put on your Tumblr theme.

This is a second Tumblr Tutorial about Pagination Customization. Not only customization, You will able to add fresh paginate buttons on your index page and as well as on permalink page.

Tumblr Pagination Codes

There are two types of pagination. One on the index page or home page and second on permalink page means post page. Both requires CSS and HTML codes. First Add Pagination Code on your index page and then follow below tutorial and tips to put pagination on post page.

Perhaps, You have noticed Next and Previous page buttons under each of your blog post. To get it, Paste below CSS HTML codes just before </style>

#perm_pagination {text-align:center; font-size:14px; margin-bottom:27px;}
#perm_pagination a {background:#1c1c1c; color:#808080; padding:6px 11px; margin:0 2px; border:1px solid #3a3a3a; box-shadow:1px 1px 1px #111;}
#perm_pagination a:hover {background:#111; border:1px solid #555; color:#eee;}

Now your CSS decoration is complete, Copy and paste below HTML codes just after </block:Posts> in your Tumblr theme.

<center>
            {block:PermalinkPagination}
                <div id="perm_pagination">
                    <span class="next_post">
                    {block:NextPost}                           
                        <a href="{NextPost}">&laquo; Previous</a>                   
                    {/block:NextPost}
                    </span>
                        -   
                    <span class="prev_post">
                    {block:PreviousPost}
                        <a href="{PreviousPost}">Next &raquo;</a>
                    {/block:PreviousPost}
                    </span>
                </div>
            {/block:PermalinkPagination}
            </center>

Now Save your Tumblr theme and take a look.


Related Posts For "How to Add Pagination on Tumblr" are:

Show / Hide all 10 notes

Why we are here:

About Tumblings.net updates Tumblr help tutorials time to time to customize Free Tumblr Themes, HTML Codes, Cute Backgrounds, Layouts, Widgets and Cool Quotes 2013.
Find us on Google+, Facebook and Twitter

Alexa About Us