How to Split Long Blogger Post Into 3 Parts

Are you still wondering how to split your long blogger posts into different sections/pages? This technique is programmatically known as the Post Pagination. The post pagination divides the long blogger posts/pages into different pages within the same blog post. If you visit the professional blogs, they usually split their long texts into different section/pages. If you are looking for the post pagination, then this tutorial will surely help you. You may customize this widget according to your template style.

Check out: Replace No Comments Label With Your Own Text in BlogSpot Template

Why Should You Split Long Blog Post?`

Today's generation is too fast and they are looking for the short and meaningful blog posts but sometimes we need to explain the things deeply and it requires lengthy text in order to describe it briefly. But what if you don't break your long blog posts? Yes, people will never come to your blog and they will start shouting at you. Believe me, today's visitors like the short post because they want to spend long time. Therefore, it is important to split/break/divide your long blog posts into different pages.

Demo

Click Here

How to Install the Post Pagination to Blogger

Jump to your blogger Dashboard > Template > Edit HTML
Click anywhere inside the Template Editor
Press Ctrl + F to open the search box within the template editor
Type ]]></b:skin> and hit Enter Key to locate the ]]></b:skin>
Paste the given CSS right before/above ]]></b:skin>

.post-pagination { margin: 40px auto; text-align: center; width: 100%; float:left; } .button_1, .button_2, .button_3 { border: 2px solid #5f72f4; font-weight: 900; height: 30px; padding: 6px 36px; color:#5f72f4; transition:ease 0.69s !important; } .button_1:hover, .button_2:hover, .button_3:hover { background: none repeat scroll 0 0 #5f72f4; color: #fff; text-decoration: none; }

Now find the </head> within the template editor
Paste the given JQuery just above the </head> tag

<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.button_1').click(function(){ jQuery('.content_1').fadeIn('slow'); jQuery('.content_2').fadeOut('fast'); jQuery('.content_3').fadeOut('fast'); jQuery(this).css('background','#5f72f4'); jQuery(this).css('color','#fff'); jQuery('.button_2').css('background','#fff'); jQuery('.button_2').css('color','#5f72f4'); jQuery('.button_3').css('background','#fff'); jQuery('.button_3').css('color','#5f72f4'); return false; }); jQuery('.button_2').click(function(){ jQuery('.content_1').fadeOut('fast'); jQuery('.content_2').fadeIn('slow'); jQuery('.content_3').fadeOut('fast'); jQuery(this).css('background','#5f72f4'); jQuery(this).css('color','#fff'); jQuery('.button_1').css('background','#fff'); jQuery('.button_1').css('color','#5f72f4'); jQuery('.button_3').css('background','#fff'); jQuery('.button_3').css('color','#5f72f4'); return false; }); jQuery('.button_3').click(function(){ jQuery('.content_1').fadeOut('fast'); jQuery('.content_2').fadeOut('fast'); jQuery('.content_3').fadeIn('slow'); jQuery(this).css('background','#5f72f4'); jQuery(this).css('color','#fff'); jQuery('.button_1').css('background','#fff'); jQuery('.button_1').css('color','#5f72f4'); jQuery('.button_2').css('background','#fff'); jQuery('.button_2').css('color','#5f72f4'); return false; }); }); </script>

Last step search for the <head> tag and paste the JQuery plugin right below/after it.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Note: Custom templates usually comes with the jquery plugin so if you already have installed the jquery plugin, then kindly ignore this step.

Next time when you create a blog post, switch to HTML and past the HTML code

<div class="content_1">
<h1>Add Your 1st Heading Here</h1>
<p>Your content goes here</p>
</div>
<div class="content_2" style="display: none;">
<h1>Add Your 1st Heading Here</h1>
<p>Your content goes here</p>
</div>
<div class="content_3" style="display: none;">
<h1>Add Your 1st Heading Here</h1>
<p>Your content goes here</p>
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Replace the blue text with your own text while creating a post/page.