How To: Split, Paginate Long Blog Post In WordPress, Blogger/Blogspot, and Tumblr

I received a tutorial request from my reader that asked me how to paginate or split a very long blog post in WordPress, Blogger or Tumblr. So here I’m going to show you a simple workaround on how to split that long blog posts into multiple pages in your WordPress, Blogger or Tumblr blog.

Split, Paginate Long Blog Posts In WordPress, Blogger and Tumbler

Splitter for WordPress - Splits Long Posts Into Pages

Splitting a long blog post into pages has never been this easier with Splitter. Splitter is a plugin for WordPress that splits your blog post into multiple pages by automatically adding ‘nextpage’ while maintaining the validity of your HTML. Paginating or splitting your blog post in WordPress with Splitter is very simple. Here’s how:

Tip: Learn How To Auto Generate Website Thumbnails, Screenshots In WordPress

Step 1 Install and activate Splitter for WordPress here. Or you can search for "Splitter" at WordPress plugin directory site.

Step 2 Once installed, you should see Splitter below your WordPress text editor (see screenshot below). There you can specify a maximum number of characters per page.

Splitting long blog posts in WordPress is really that easy! Here's the final look (of course, you can customize the pagination links/buttons):

Easiest Way To Split or Paginate Long Blog Post in Blogger, Tumblr

For Blogger and Tumblr, no instant widget or plugin for this but you too can implement a simple pagination for long blog posts just like Splitter. Just a few lines of jQuery codes you can split or paginate your long blog post in Blogger or Tumblr. Here's how:

1 Divide your post into DIV or SPAN and add class attribute on it (this tutorial I'll make use of DIV). For example:

<div class="content_1">
//Content of first page goes here
</div>

<div class="content_2" style="display:none;">
//Content of second page goes here
</div>

<div class="content_3" style="display:none;">
//Third page content goes here
</div>

2 Create pagination links:

//When users click on these buttons, let's bring them to corresponding pages
<p style="font-weight:bold;">Pages: 
<a href="#" class="button_1"> 1</a>
<a href="#" class="button_2"> 2</a>
<a href="#" class="button_3"> 3</a></p>

3 And the jQuery scripts:

//add jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
</script>

<script style="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').show('slow');
  jQuery('.content_2').hide('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').hide('slow');
  jQuery('.content_2').show('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').hide('slow');
  jQuery('.content_2').hide('slow');
jQuery('.content_3').show('slow');
return false;
});
});
</script>

Note:The pagination and jQuery codes must be placed below your segmented <div> contents.

Fading in and out the content with jQuery does the magic, and you can do it on your Tumblr or Typepad blog. If you need help on how to split or paginate a long blog post in Blogger, WordPress or Tumblr, just reply in this post and I'll try to make an effort to help you as fast as I could.

Tip: Free VideoChat, VOIP Plugin for WordPress that Works Like Skype 

Thanks for reading folks! More tutorials coming so bookmark us or you can receive updates through email -- just enter your email below!

Pages: 1 2 3

Get weekly alerts delivered straight to your inbox

Your email address

Filed under: Blogger , Blogging Tools , WordPress