Divide/Break Blogger post into differernt Pages

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.

106 comments:

  1. thanks for the Widget.

    Regards- http://truetricks.net

    ReplyDelete
  2. 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

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

      Delete
  3. Awesome Post Sir,
    Visit : www.fulltechbuzz.com

    ReplyDelete
  4. 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

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

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

    ReplyDelete
  7. Nice Article.
    Thanx Man

    newstrics.com

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

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

    ReplyDelete
  10. 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.

    ReplyDelete
  11. 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 :)

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

    ReplyDelete
  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

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

    thanks!!!

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

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

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

    ReplyDelete
  18. 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.

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

    ReplyDelete
  20. 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.

    ReplyDelete
  21. 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

    ReplyDelete
  22. 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

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

    http://www.rechargians.com/

    ReplyDelete
  24. very interesting article, thank you Greetings,

    Thatsup
    Thatsup.info

    ReplyDelete
  25. Easy Way to download Blogger Template Without any Problems:

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

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

    ReplyDelete
  27. Nice one, thanks for sharing

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

    ReplyDelete
  29. thanks for the Widget.

    Regards- http://www.sanweb.in

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

    ReplyDelete
  31. Divide/Break Blogger post into "differernt" Pages.

    ¡¡¡ Different !!! ;)

    ReplyDelete
  32. Nice Information in the post

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

    Latest tutorials

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

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

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

    ReplyDelete
  37. Funny scary horror prank video you can't stop your Laught after watch this video.

    https://youtu.be/V7Kwqb9fpQg

    ReplyDelete
  38. Information is good in the post, it is very usefull.

    Latest Government Jobs In India

    ReplyDelete
  39. Awesome Tricks For Beginners This is So Helpful For all those Who Start their Business in Beginning.
    ISARKARINAUKRI.CO.IN

    ReplyDelete
  40. Hi, thanks for the information provided in the article.

    Latest Govt Jobs In India

    ReplyDelete
  41. This may be the best web I've ever discovered today. Awesome works without a doubt!
    Rent the Runway (Abridged) Case Solution

    ReplyDelete
  42. what is your template name?

    ReplyDelete
  43. Hello,
    Thanks for Sharing Useful information with us..!!
    https://educationnexams.wordpress.com/

    http://entranceexaminformation.blogspot.com/

    ReplyDelete
  44. very nice blog. i was searching for this guide only, thank you!

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

    ReplyDelete
  46. I read your mention information that one is very useful and am save your link for future updates.
    Haryana Board 12th Time Table

    ReplyDelete
  47. Gonna try this on my blog http://earcontra.com

    ReplyDelete
  48. http://www.gkindiaonline.com/

    ReplyDelete
  49. Not Working ..................

    ReplyDelete
  50. Sarkari Recruitment is one of the biggest Indian Job Site so here you will getKarnataka govt jobs Latestso

    ReplyDelete
  51. Not working please help,code is placed successfully plus the jquery script but when i click on page 2,3,4....it's redirecting me to the TOP of the first page and only page 1 working not others.

    ReplyDelete
  52. Thanks for sharing informative post.

    ReplyDelete
  53. What you're saying is completely true. I know that everybody must say the same thing, but I just think that you put it in a way that everyone can understand. I'm sure you'll reach so many people with what you've got to say.

    ReplyDelete
  54. bigo live download download for pc and get this app in your bigo live

    ReplyDelete
  55. Hi is there a way for me to have previous and next button instead of numbers? thanks!

    ReplyDelete
  56. good widget thanks for sharing

    ReplyDelete
  57. Hi, Can you paste the code only for 2 pages?

    ReplyDelete
  58. Flipkart Cashback offers has come up with some exciting ways to attract customers this season.Having tied up with various banks SBI, ICICI, Kotak etc, our site launched various flipkart cashback options.

    ReplyDelete
  59. That's really great that you have mentioned on this page. Here are the latest government jobs in India.

    ReplyDelete
  60. Thank you for the useful information. You might be interested in Latest Govt Jobs in AP So

    ReplyDelete
  61. Great Website. Good to see this. So

    ReplyDelete
  62. Thank you for sharing in this article Obat Perangsang Wanita I can learn a lot and could also be a reference

    ReplyDelete
  63. Nice Website.Great Information sharing.Happy to read this article .I appreciate this post.
    Current Fake Companies List

    ReplyDelete
  64. SBI Jobst Apply Online | 2313 PO Jobs Openings Notification & Application

    ReplyDelete
  65. Thanks, it worked. Easy to follow and got what I wanted.

    ReplyDelete
  66. Thanks Your for your useful code. i try it here http://emagazine2u.blogspot.com

    ReplyDelete
  67. شركة مكافحة حشرات بالاحساء
    من افضل الشركات التى توجد فى مجال المكافحة
    و هذا بما لديها من الخبرة الطويلة فى مجال المكافحة و ان لديها المواد التى تستخدم فى المبيدات الحشرية
    و التى تعمل على القضاء عليها نهائيا مع ضمان عدم عودتها مرة اخرى
    لان فريق العمل لدينا مدرب على اعلى مستوى على التعامل مع كافة المبيدات الحشرية
    و وضع كل نوع للحشرة التى يواجهها كما اننا قبل البدء فى العمل
    نعمل عزيزى العميل ان نعطى لك الخطة التى سوف نقوم بالسير عليها واحدة تلو الاخرى
    و هذا من شركة تنظيف بالاحساء
    لاننا نبذل اقصى جهد فى ان تكون لدينا النظافة الشاملة و المتكاملة حتى لا نتسبب فى اى انزعاج لك عزيزى العميل
    و لهذة الاسباب و اكثر عليك عزيزى العميل ان لا تتردد فى الاتصال بــ : شركة المثالية للتنظيف بالاحساء
    فاننا سوف نضمن لك عزيزى العميل السرعة فى الانتهاء من اداء الخدمة و العمل على التواصل الدائم معك عزيزى العميل بعد اداء الخدمة
    حتى نضمن عدم وجود اى مشاكل من الممكن ان تواجهك مرة اخرى و حتى تستطيع العيش بالهدوء اللازم
    لكى تتمتع بالحياة التى تجعلك على قدر من النشاط لوجود الطاقة لديك
    و كما اننا نعمل على تسليك المجارى الموجودة اذا كان هناك اى انسداد نها
    و التاكد من ان المواسير و المجارى تعمل بشكل الصحيح من شركة تسليك مجارى بالاحساء
    لذلك لا تتردد عزيزى العميل فى الاستعانة بنا و نحن سوف نقم بالازم و اكثر من اجل راحتك و راحة اسرتك كما ان لدينا افضل الاسعار و اقلها الموجودة فى الاسواق
    و حتى تتناسب جميع خدماتنا مع جميع الفئات

    ReplyDelete
  68. This is an awesome tutorial for beginners. Thanks for sharing will try on my blogs.,,,,,

    ReplyDelete
  69. Awesome post sir , very Good
    thanks for share here
    http://www.sarkari-exams.com/

    ReplyDelete