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.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>
- Now find the </head> within the template editor
- Paste the given JQuery just above the </head> tag
- Last step search for the <head> tag and paste the JQuery plugin right below/after it.
.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; }
<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>
<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">Replace the blue text with your own text while creating a post/page.
<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>
No comments:
Post a Comment