How To Add Pagination To Tumblr – Previous/Next Buttons Code


If you want to add pagination to your Tumblr, you just need to add a small code snippet, though there are several Previous/Next Code buttons to insert navigation right under your description menu, we’ll focus on the basic numbered pagination.



How to Add Pagination on Tumblr.

  1. Click on the customize theme button >> Edit HTML
  2. Look for the tag {Description} within your theme with Ctrl+F and once found paste the following code snippet right after it: (NOTE: You can indeed find more than one of these tags along your theme, hopwever, just one of theme is the one that is related to your description)

  3. <br/>
    <center>  <center>{block:NextPage}<a href="{NextPage}"><font size="20">&#171;</font></a>{/block:NextPage}
      {block:PreviousPage}  <a href="{PreviousPage}"><font size="20">&#187;</font></a>{/block:PreviousPage}<br>
      {block:PermalinkPagination}
      {block:NextPost}<a href="{NextPost}"><font size="20">&#171;</font></a>{/block:NextPost}
      {block:PreviousPost}  <a href="{PreviousPost}"><font size="20">&#187;</font></a>{/block:PreviousPost}
      {/block:PermalinkPagination}<p>
    </center>
    <br/>


  4. Start “Updating Preview” until you see the arrows with the Previous/Next pagination showing up.

Check our directory for more Tumblr Codes.

10 Responses to "How To Add Pagination To Tumblr – Previous/Next Buttons Code"

Add Comment
  1. bronx

    May 16, 2012 at 1:00 am

    Thanks for share this tips. But i have some big question here, how to changes the symbol of <> become a name of title its self.

    Thanks!

    [Reply]

  2. Casey

    July 11, 2012 at 3:21 am

    I did that, and it worked, but now my description is gone?

    [Reply]

  3. Ted

    January 23, 2013 at 11:08 pm

    Code works just as I intended. 5/5

    [Reply]

  4. Rachel

    January 30, 2013 at 7:46 am

    Well, I just started tumblr yesterday, and I feel pretty accomplished! I’ve incorporated the Scrolling Title, the Infinite Scrolling, the Image Header/Title, and several other tweaks that I managed to do on my own. I’ll happily admit that it was this website that helped me accomplish that much!

    I’ve taken a java course before, but pretty much failed at that, so I feel pretty successful. heh.

    Anyway, what is a “Pagination?” Also, I think you could further help all the tumblrers by including pictures to illustrate the instructions/actions- many of the processes are naturally pretty confusing!

    Thank you so much! You techie guys/gals are awesome. :)

    [Reply]

    Mr. Tumblr Reply:

    Pagination is explained on the article you are posting the comment on.

    [Reply]

  5. Vera

    February 22, 2013 at 10:36 pm

    Wow, this is the first piece of code that I, as a total noob, can just copy and use and it works! Perfect! Thank yoU! Weird thing is that the links to other pages on my tumblr suddenly appear center-alligned after I put in this code. I checked the html but I didn’t change anything.

    [Reply]

  6. Chirsty

    March 3, 2013 at 1:08 pm

    The arrows are pointing the wrong way, but except from that it is working perfectly fine.

    [Reply]

  7. Kelsey

    April 22, 2013 at 5:28 am

    AWESOME. I finally found a code that actually works, 100/100.

    [Reply]

  8. NQ

    July 16, 2013 at 3:46 pm

    The “first” page of my tumblr is still in infinite scroll mode… from the 2nd page it’s okay. What should I do? Thank you!

    [Reply]

  9. Click

    July 18, 2013 at 12:10 pm

    how about to put the prev/next inside the post, not just in index?!!

    [Reply]

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>