How to split/Divide long blog Content in into multiple pages in blogger

How to split/Divide long blog Content in into multiple pages in blogger



Publishing this text on splitting wordpress posts into
a couple of pages few folks asked us about doing it in
Blogger that is to separate long web publication publish into multiple pages
in Blogger. Splitting posts in wordpress could be very simple
and there are numerous plugins to achieve this,(My next post) however the way it's
performed in Blogger.

In Blogger there's no build in
function to separate posts or pages and there are not any widgets
to paginate, however by utilizing a simple JQuery perform you
can paginate your blog posts.

So why do you split a blog
post?

• It is Search Engine Friendly.
• It improves your Search Engine Optimization
• It is Likely to Give you More PV(Page Views) if you do it always
• It also Make Readers to Stay for a long time on your blog, by the time they starts reading an Interesting Story or Publication.

We have already discussed Some the benefits of
adding pagination to blog posts in this article . Here we
will show you how to split long blog post in Blogger
into multiple pages.


Don't panic, the code below is discreet and handy to
appreciate. Anticipate that you're about to put up a
lengthy blog put up and wish to split that into four pages.
Here is how you do that in easy steps.


How to split/Divide long blog Content in into multiple pages in blogger

• Step 1- Make sure you have the jquery plugin in your blog, if not
then add the below code just below the code head in
your template

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



• Step 2- Login to your blogger Account and choose the Blog you to Start Splitting it Content. Then Navigate to Setting > post and comment.
Then your will see Post Template .Now Paste the Below Code inside the Box and Save it.


<br /><style><br />.post-pagination { <br /> margin: 20px auto; <br /> text-align: center; <br /> width: 100%; <br />} <br />.button_1, .button_2, .button_3 { <br /> border: 2px solid #f4655f; <br /> font-weight: 900; <br /> padding: 6px 36px; <br /> color:#f4655f; <br /> transition:ease 0.69s !important; <br />} <br />.button_1:hover, .button_2:hover, .button_3:hover { <br /> background: none repeat scroll 0 0 #f4655f; <br /> color: #fff; <br /> text-decoration: none; <br />} <br /></style><br /><script type="text/javascript"><br />jQuery(document).ready(function(){ <br />jQuery('.button_1').click(function(){ <br />jQuery('.content_1').fadeIn('slow'); <br /> jQuery('.content_2').fadeOut('fast'); <br />jQuery('.content_3').fadeOut('fast'); <br />jQuery(this).css('background','#F4655F'); <br />jQuery(this).css('color','#fff'); <br />jQuery('.button_2').css('background','#fff'); <br />jQuery('.button_2').css('color','#F4655F'); <br />jQuery('.button_3').css('background','#fff'); <br />jQuery('.button_3').css('color','#F4655F'); <br />return false; <br />}); <br />jQuery('.button_2').click(function(){ <br />jQuery('.content_1').fadeOut('fast'); <br /> jQuery('.content_2').fadeIn('slow'); <br />jQuery('.content_3').fadeOut('fast'); <br />jQuery(this).css('background','#F4655F'); <br />jQuery(this).css('color','#fff'); <br />jQuery('.button_1').css('background','#fff'); <br />jQuery('.button_1').css('color','#F4655F'); <br />jQuery('.button_3').css('background','#fff'); <br />jQuery('.button_3').css('color','#F4655F'); <br />return false; <br />}); <br />jQuery('.button_3').click(function(){ <br />jQuery('.content_1').fadeOut('fast'); <br /> jQuery('.content_2').fadeOut('fast'); <br />jQuery('.content_3').fadeIn('slow'); <br />jQuery(this).css('background','#F4655F'); <br />jQuery(this).css('color','#fff'); <br />jQuery('.button_1').css('background','#fff'); <br />jQuery('.button_1').css('color','#F4655F'); <br />jQuery('.button_2').css('background','#fff'); <br />jQuery('.button_2').css('color','#F4655F'); <br />return false; <br />}); <br />}); <br /></script><br /> <br /><div class="content_1"><br /> <br />Add First Page content here <br /> <br /></div><br /> <br /><div class="content_2" style="display: none;"><br /> <br />Add second page content here <br /> <br /></div><br /> <br /><div class="content_3" style="display: none;"><br /> <br />Add Third Page content here <br /> <br /></div><br /> <br /><div class="post-pagination"><br /><a class="button_1" href="#">1</a><br /><a class="button_2" href="#">2</a><br /><a class="button_3" href="#">3</a><br /></div><br /> <br />

And Save it

Note- You can Expand this to More Pages with HTML Knowledge.




• Step 3- After you might have saved the above Code. Now anytime you want to create a post. Simply Navigate to your Blog And Create New post (Make sure it is in HTML View).
and you will the the Above code in the Box where you want to create new post..

Now replace Add First Page content here with the text you
want on the first page and

Add Second Page content here with the text you
want on the second page and

Add Third Page content here with the text you
want on the third page and
publish the post.

Now when you Check the Post..
You will see the First Page Content with a Pignation Link to Second and Third Pages..


Hope You Enjoyed this How to split/Divide long blog Content in into multiple pages in blogger


Kindly Share to Others!!!

SHARE THIS