Divide/Break Blogger post into differernt Pages

Posted On // 59 comments
Split up blogger pagesHey! It has been long time since I posted my previous post at ABT, so today I am back with yet another post which teaches you how you can split up your blogger post into different pages just like in blogs like Mashable and other WordPress blogs.

To create engagement and to divide the posts in section this method can be very useful. Also if you have a very long post you may use this method so the long post will now be splited into many shorts pages.



You can see the live demo of how it works by clicking the below button

Live Demo


Once you have seen the demo to split up your post what you need to do is just follow the below steps.


Add the code in Post Editor


Firstly open the post editor and switch to HTML tab. By default the Compose tab is selected. After opening it paste the below code

<style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
</style>
<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','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
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','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
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','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

<div class="content_1">

Add content here


</div>

<div class="content_2" style="display: none;">

Add content here

</div>

<div class="content_3" style="display: none;">

Add content here

</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>

Now replace Add content here with the text you want in the respective pages and publish the post.

Important Points to Note before you move on


There are some points you need to note as they are very crucial for this particular splitting.

  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

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  2.  It is preferred that you first draft the post and at the last point add this code and make respective changes as due to changing of tabs from Compose to HTML and vice versa the code may automatically get changed.
     
  3. You may have got the idea of the code pattern and I guess one can add more pages if they want (here the tut is given only for 3 pages) in case you have any problem drop a comment below and I will try to help you as soon as possible.

Thats it, you are done now. Now you and your visitors can see long posts divided just as you would see in WP posts.

59 comments

7 October 2014 at 08:13

5+

Reply
16 October 2014 at 08:03

thanks for the Widget.

Regards- http://truetricks.net

Reply
17 October 2014 at 11:42

sir please help me how can i add code box in my blog posts.(like your code box- all blogger tricks)
please help me

princechaudhri9@gmail.com

Reply
22 October 2014 at 08:30

Nice Blogger Tricks
Thanks!

Reply
2 November 2014 at 03:09

Awesome Post Sir,
Visit : www.fulltechbuzz.com

Reply
3 November 2014 at 23:54
Bobby George Author
4 November 2014 at 07:51

Hi ,This is amazing .Exactly what I wanted.Thank you so much.

But unfortunately one of the templates (infinite responsive blogger template) i use seems to have problem with this.Well basically with links .all hyperlinks breaks lines.If a sentence has a link then the line breaks after the link and the rest of the text is pushed to the next line.Something wrong with the CSS.So the numbering of pages appear vertically instead of horizontal.I cant figure it out but i guess its something to do with Display:block.Any help would be deeply appreciated.

Thank you so much

Reply
Bobby George Author
4 November 2014 at 08:10

Thanks a lot for this.Is there a way to make this into "next page " and "previous page" instead of numbers?

Reply
4 November 2014 at 18:10

nice tips , well come http://designsweblog.blogspot.com/

Reply
kawaii meme Author
11 November 2014 at 11:16

Nice Article.
Thanx Man

newstrics.com

Reply
26 November 2014 at 05:57

this one i really loved... thanks for sharing this awesome widget

Reply
Awais Gul Author
19 December 2014 at 03:54

Nice Post Keep it up :)
Regards :-> Mistabic.com

Reply
Madam Kighal Author
6 March 2015 at 00:36

Thank you so much! Can you please tell me how to make 5th page, I actually need 12 pages....so, just if you can show me what changes after forth in code...Thank you in advance.

Reply
Nitin Maheta Author
24 March 2015 at 02:47

Different*

Reply
Ayesha Batool Author
29 March 2015 at 00:54

Wow Its amazing.... Now no need to spend your money for new website, hosting all features are now available in Free blogger platform. Nice effort dear admin. www.sorathemes.com is my little effort :)

Reply
Nitin Maheta Author
29 March 2015 at 09:58

I was talking about mistake in "Different" word. Into title.

Reply
30 March 2015 at 08:13

When i click the page button it goes to the next page but not at the beginning of the page. Rather the next page loads at a random location mostly in the comment section and not at the beginning or head of the page

Reply
Jeff Author
13 April 2015 at 21:36

awesome tutorial. thanks for sharing! will try on my blog, www.pisoandbeyond.com

thanks!!!

Reply
Anonymous Author
1 May 2015 at 12:13

All Blogging Tutorial and Trick 2015 Plz Visit Our Site- http://www.hackpower.org/

Reply
11 May 2015 at 08:59

its nice.

Reply
Infobeatz Author
22 May 2015 at 10:29

Thanks for the information.This is a new trick for me and I was waiting for the posts like the same you given

Reply
Yuneeta Chan Author
1 June 2015 at 07:13

Thank you it works however I want more than 3 pages. How can I do that?

Reply
8 June 2015 at 04:51

its very useful.

Reply
16 June 2015 at 22:22

Though you have been back to the blog after a longtime since your first post, it is really good to see you to be back with a Bang. Yes, really as i am telling like this means, now-a-days,even the students who are all approaching the online research paper writing service websites are not willing to study the essays and writing works finished by them if they are in long paragraph format. So,this post will be very helpful for the bloggers like me to attract the visitors of the blogs by posting in an attractive manner. Hats off for such a beautiful article. Willing to see such more quality posts from you in a frequent manner. But, as on seeing this post, the time taken by you for this post seems to be a correct one.

Reply
Shem Daniel Author
18 July 2015 at 19:10

wow it work well for me, i just did some little twiks on it.thanks!
http://travelbyyourside.blogspot.com

Reply
Parmeet Author
5 September 2015 at 11:49

Hey bro, Please tell me how to increase infolinks earning ?

I am not getting more than $0.30 CPM. Is there any method to increase CPM

I am getting goof amount of traffic on http://rechargendeals.com but my CPM is too low.

Reply
6 September 2015 at 23:10
Ayesha Umer Author
6 September 2015 at 23:12
Roshini RS Author
8 September 2015 at 03:40

I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting such a good blog, keep updates regularly.
Regards,
Angular training in chennai

Reply
9 September 2015 at 09:38

Thanks so much. But it kind of stressful do so always. I was thinking if there will be a better and automated method. I am going to test it on the blog www.suremediagist.com

Reply
Admin Author
23 September 2015 at 01:00

I need a code for 20 pages

Reply
Shafi Khan Author
23 September 2015 at 08:05

What to add in place of '#'?
And how can we change next page button color?

http://www.rechargians.com/

Reply
Vergo Bonita Author
1 October 2015 at 15:10

very interesting article, thank you Greetings,

Thatsup
Thatsup.info

Reply
12 October 2015 at 05:31

Easy Way to download Blogger Template Without any Problems:

Click Here:
www.ansaritrixs.com/2015/10/blogger-template-download

Reply
Anonymous Author
21 October 2015 at 10:00

Thanks for sharing this.
You may also like Amazon Diwali Sale

Reply
Indzign Author
27 October 2015 at 08:26

Nice one, thanks for sharing

Reply
SSSYAHROONIX Author
7 November 2015 at 10:50

Thanks a lot for the tutorial.

Reply
3 December 2015 at 09:20

Very Helpful

Reply
Sirosh Nasir Author
11 December 2015 at 00:24

Great tutorial. I was looking this since long time. Thanks

Reply
Anonymous Author
24 December 2015 at 20:19

thanks for the Widget.

Regards- http://www.sanweb.in

Reply
17 January 2016 at 22:22

thanks bro wellcome https://dota2tivi.blogspot.com/

Reply
Anonymous Author
26 January 2016 at 02:56

Divide/Break Blogger post into "differernt" Pages.

¡¡¡ Different !!! ;)

Reply
16 February 2016 at 21:17

http://mydevresources.blogspot.in/2015/11/add-code-snippet-in-blog.html
(Adding code box in blogger)

Reply
Govtjobs Author
29 February 2016 at 21:38

Nice Information in the post

Reply
loku Author
31 March 2016 at 04:40

thanks for sharing!

Reply
Ahsan Awan Author
4 April 2016 at 16:21

Wow Awesome Thank for sharing this Post
i really impressed this post thank men
and also this blog is best for newbies

Latest tutorials

Reply
SDaily Author
8 April 2016 at 12:34

Thanks for Sharing!

Reply
manoj Author
24 April 2016 at 10:22

thanks to sharing

Reply
Mr Guru Author
28 April 2016 at 04:40

Please is there any way to make the page reload... so ads on the page can equally reload??

Reply
Film Stream Author
30 April 2016 at 16:49

Please bro I need a code for 20 pages
Thanks in advance :)
Regards - happy new year 2017

Reply
Sagar Patel Author
6 May 2016 at 01:49

Very Good Post

Reply
6 May 2016 at 02:14

hiiii

Reply
Ncert Books Author
13 May 2016 at 03:12

Very Nicee Article

Reply
vijay kumar Author
11 June 2016 at 05:29

This is an awesome tutorial for beginners. Thanks for sharing will try on my blog.

Reply
24 July 2016 at 01:42

How to split into 5 pages

It's easy to care for dogs

Reply
Undi Gunawan Author
29 September 2016 at 15:28

Good idea. it will reducw my bounce rate :) http://undilife.blogspot.com

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Divide/Break Blogger post into differernt Pages |