Saturday, August 12, 2017

By this useful Article I guide you about, how to divide Blogger Post in Different Pages. If your blogger post content more than thousand words and above and also with large images, it will take time to load of the blogger post. 


If your visitors think this post takes more time, I think this is not good practice. This article is very useful like other tutorials such as Blogger SEO Tips and Tricks. Now I guide you step by step following suggestions tips and tricks through this tutorial, how to divide large size of blogger post in different pages. 


  1. Introduction Splitting of Pages in Blogger Post
  2. How to Add Splitting Code in blogger Posts
  3. How to Create Final Splitting Code to Blogger Post

Divide Blogger Post Into Multiple Pages

1.   Introduction Splitting of Pages in Blogger Post

In my experience through this article, I tell you about  on part of blogger posts into numerous pages couple of people got some information about doing it in Blogger that is to part long blog entry into various pages in Blogger. Part posts in blogger is extremely straightforward and there are numerous modules to accomplish this, yet how it's done in Blogger. In Blogger there is no work in highlight to part posts or pages and there are no gadgets to paginate, however by utilizing a straightforward jQuery work you can paginate your blog post entries. So why to part a blog entry? We have just talked about every one of the advantages of adding pagination to blog entries through this article to blogger post. Here we will demonstrate to you best practices to part long blog post entry in Blogger into numerous pages.  Accept that you are going to distribute a long blog entry and might want to part that into 4 pages or above. Here is the manner by which you do that in only 3 basic strides. Now First open your blogger new post for more guidance see the picture has given below:


2.   How to Add Splitting Code in blogger Posts

1.  More often than not you will alter your post in form mode, however this time you will do this in HTML mode. Change to HTML editorial manager, include the traverse component that you see below and include your blog content in every component individually. From the line below you can see that exclusive first page content is noticeable and the staying second, third and fourth pages are covered up. So the rest of the pages will be obvious just if the guest explores. add your content in the following HTML Code as per instructions.
<span class="content1">
Add your first page content here
</span>
<span class="content2" style="display:none">
Add your second page content here
</span>
<span class="content3" style="display:none">
Add your third page content here
</span>
<span class="content4" style="display:none">
Add your final page content here
</span>
2. Now you have included your required contents in new blogger post. Presently you need to make page interfaces so when a client taps on that page he ought to get that specific substance. See the following code and add it below of above code one which includes Pages: 1, 2, 3, 4 interfaces beneath your post content.
<p><b>Pages: <span style="color: #3d85c6;">
<a href="#" class="page1">1</a>
<a href="#" class="page2">2</a>
<a href="#" class="page3">3</a>
<a href="#" class="page4">4</a></span></b></p>
3. Now Add the following script Code just below of above codes, after that the complete script will be continued to work properly.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script style="text/javascript">
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery('.content1').show();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page2').click(function(){
jQuery('.content1').hide();
jQuery('.content2').show();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page3').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').show();
jQuery('.content4').hide();
return false;
});
jQuery('.page4').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').show();
return false;
32
});
});
</script>

3.   How to Create Final Splitting Code to Blogger Post

Now you have add the above codes as per procedure, now you have got any confusion I have included full code, now add it in the HTML area of blogger post. see the following full code.

<span class="content1">
Add your first page content here
</span>
<span class="content2" style="display:none">
Add your second page content here
</span>
<span class="content3" style="display:none">
Add your third page content here
</span>
<span class="content4" style="display:none">
Add your final page content here
</span>

<p><b>Pages: <span style="color: #3d85c6;">

<a href="#" class="page1">1</a>
<a href="#" class="page2">2</a>
<a href="#" class="page3">3</a>
<a href="#" class="page4">4</a></span></b></p>

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

<script style="text/javascript">
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery('.content1').show();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page2').click(function(){
jQuery('.content1').hide();
jQuery('.content2').show();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page3').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').show();
jQuery('.content4').hide();
return false;
});
jQuery('.page4').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').show();
return false;
32
});
});
</script>

In view of the above code add your blogger post contents in add URL of the contents for example your blogger post URL will be added in Page-1, Page-2, Page-3, Page-4. I hope this article is very useful like other tutorials


Contact Form

Name

Email *

Message *

Home     About Us     Contact Us     Privacy Policy     Disclaimer     Sitemap    

                                  Copyright ©2014-2017. Media Music Mania - All Rights Reserved.