How To Break Longer Post Into Multiple Pages In Blogger?

Q: How Do I Break Longer Post Into Multiple Pages In Blogger?

Step 1: Go to blogger dashboard. Step 2: Now click on Theme > Customize > Edit HTML. Step 3: Now click anywhere in the code area. Step 4: Press Ctrl + F and search for . Step 5: Copy the below code and paste it below the tag. Note: You may skip this step if you have already installed on your Blogger template before. Step 6. Again search for ]]> . Step 7: Copy the below code and paste the below code just above the ]]> . Step 8: Next, search for . Step 9: Copy the below code and paste the below code just above the . Step 10. Now save the template. Step 11: Create a New Post and switch your posts to HTML view mode. Step 12: Paste the below code into the content field. Customization: Replace Add your content here for 1st page, Add your content here for 2nd page and Add your content here for 3rd page as well with your own blog post content. You are done.

One of the problem of being a blogger is to keep the reader read the full content from a post beginning to end. Generally speaking, keeping things brief helps blogger get the job done. Make sure the content is informative with abundance of data you wish to provide to your readers. In this article you will come to know how to break longer post into multiple pages in blogger.

From this problem the multiple page of a post idea comes. By breaking longer posts into multiple pages, you can take care of data. This can assist you with keeping readers engaged. This codes will reduce the bounce rate of your site.

In Blogger there is no form in element to divide posts or pages and there are no gadgets to make long post into multiple pages. By using a basic jQuery capability you can make long post into multiple pages. Here we will tell you the best way to part lengthy blog content in Blogger into different pages.

Today we will know how to break longer post into multiple pages in blogger?

How Do I Break Longer Post Into Multiple Pages In Blogger?

Step 1:

Go to blogger dashboard.

Step 2:

Now click on Theme > Customize > Edit HTML.

Step 3:

Now click anywhere in the code area.

Step 4:

Press Ctrl + F and search for <head>.

Step 5:

Copy the below code and paste it below the <head> tag.

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

Note: You may skip this step if you have already installed on your Blogger template before.

Step 6.

Again search for ]]></b:skin>.

Step 7:

Copy the below code and paste the below code just above the ]]></b:skin>.

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

Step 8:

Next, search for </head>.

Step 9:

Copy the below code and paste the below code just above the </head>.

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

Step 10.

Now save the template.

Step 11:

Create a New Post and switch your posts to HTML view mode.

Step 12:

Paste the below code into the content field.

     <div class="content_1">         Add your content here for 1st page         </div>         <div class="content_2" style="display: none;">         Add your content here for 2nd page         </div>         <div class="content_3" style="display: none;">         Add your content here for 3rd page         </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>

Customization: Replace Add your content here for 1st page, Add your content here for 2nd page and Add your content here for 3rd page as well with your own blog post content.

You are done.

Conclusion

Hope you have successfully added these codes into blogger theme. If you like this way to break longer post into multiple pages in blogger, please share it to your friends.

Attention! Ad blocker Detected!

How To Break Longer Post Into Multiple Pages In Blogger?

Also Read

How To Break Longer Post Into Multiple Pages In Blogger?

How Do I Break Longer Post Into Multiple Pages In Blogger?

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Step 6.

Step 7:

Step 8:

Step 9:

Step 10.

Step 11:

Step 12:

Conclusion

Post a Comment

Recent Posts

Footer Copyright

buttons=(Accept !) days=(30)

Contact form

Attention! Ad blocker Detected!

How To Break Longer Post Into Multiple Pages In Blogger?

Also Read

How To Break Longer Post Into Multiple Pages In Blogger?

How Do I Break Longer Post Into Multiple Pages In Blogger?

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Step 6.

Step 7:

Step 8:

Step 9:

Step 10.

Step 11:

Step 12:

Conclusion

You may like these posts

Post a Comment

Footer Copyright

buttons=(Accept !) days=(30)

Contact form