How to Split/Paginate Long Post into Multiple Pages on Blogger Blog ~ Dangstars™

Blogger platform doesn’t have much inbuilt features. But most of the features can be added by us without depending on it. You may have seen in many websites that for big post/article they Split their post into different parts.

Splitting posts in WordPress is easy. But not same in Blogger and you can’t find any widget which do this task.

Are you searching for this tweak?

Are you really want to Split your blog post into multiple pages?

Then you can do just by following my simple tutorial added below.

How its works?

Check DEMO Preview

While I’m surfing internet for this issue, I came across Blog Time Now where I got this awesome trick. So I thank them for sharing this awesome tweak will all. They used jQurey for splitting the blogger posts into multiple pages. The code used here for demo is for 4 multiple pages. i.e, if you’re publishing a big post then split it up into 4 parts/pages. The codes used here are so simple.

Advantage of Splitting Blog Post into Multiple Page

The main aim for paginating your blog post is to make your readers to feel good. If they found your blog post is so long they may go for other blog. So if you shorten it with these feature it will surely tends or create an interest over the visitors to read your contents more. It will also decrease your blog bounce rate and increase your traffic. This may increase your page views.

You can get another ad slot which results in more revenue. It may increase your blog speed because when it was a big post it may takes some time to load your page. But this feature can save you from this drawback.

Really wanna to add this feature to your blog? Then lets see how to Split Long post into Multiple Pages in Blogger.

Split/Separate Long post into Multiple Pages in Blogger

Step 1: Go to Blogger >> New Post >> HTML

Step 2: Then Add your content in specific element from the code given below i.e, separate your blog post into four parts and add then in required element respectively.

<span class=”content1″>
Add your 1st page content here
</span>
<span class=”content2″ style=”display:none”>
Add your 2nd page content here
</span>
<span class=”content3″ style=”display:none”>
Add your 3rd page content here
</span>
<span class=”content4″ style=”display:none”>
Add your 4th page content here
</span>

Step 3: After adding your content you’ve to create page links for those 4 pages. So add the below code just above/before the content code added just before,

<p><b>Pages: <span style=”color: #3d85c6;”>
<a href=”#” class=”page1″>1</a>
<a href=”#” class=”page2″>2</a>
<a href=”#” class=”page3″>3</a>
<a href=”#” class=”page4″>4</a></span></b></p>

Step 4: Then to make these links as active add the following script just below/after the pagination links,

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script style=”text/javascript”>
jQuery(document).ready(function(){
jQuery(‘.page1’).click(function(){
jQuery(‘.content1’).show();
jQuery(‘.content2’).hide();
jQuery(‘.content3’).hide();
jQuery(‘.content4’).hide();
return false;
});
jQuery(‘.page2’).click(function(){
jQuery(‘.content1’).hide();
jQuery(‘.content2’).show();
jQuery(‘.content3’).hide();
jQuery(‘.content4’).hide();
return false;
});
jQuery(‘.page3’).click(function(){
jQuery(‘.content1’).hide();
jQuery(‘.content2’).hide();
jQuery(‘.content3’).show();
jQuery(‘.content4’).hide();
return false;
});
jQuery(‘.page4’).click(function(){
jQuery(‘.content1’).hide();
jQuery(‘.content2’).hide();
jQuery(‘.content3’).hide();
jQuery(‘.content4’).show();
return false;
});
});
</script>

Step 5:

Once you finish everything just Publish it and Check your blog post. Cool!!

Congratulation! You have successfully separated your long blog post into multiple pages. Hope you will like this new tweak to split long blog posts into pages in Blogger. If you’re facing any issues then drop them in comments below. Do some likes and share it with your friends and make us grow! Happy blogging