How To Break Posts Into Multiple Pages In Blogger

Pagination is great factor in customizing and making your blog look more beautifull.Pagination Counts Much to a serious blogger.This tutorial will show you how to break your blogger.One more benefit of pagination is that it makes your blogger fast loading and hence make it look more professional.

Pagination does not slow down your blog when user switich to other separated portion.The separate portions are preloaded and does not slow down your webpage.

In order to do pagination follow these simple methods and if you want to see live demo click here

How To Break Blogger Posts In Different Sections.

Step 1 : Go to Blogger Dashboard>Theme>Edit Html.Now you search for j query plugin.You will find it after closing Head Tag </head>.If you don't find jquery script below </head>  Tag simply add the following code below head.

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

Step 2 : Now its time to add style in your pagination.Add the following CSS code above ]]></b:skin> Tag  in your template.

.post-pagination {

    margin: 40px auto;

    text-align: center;

    width: 100%;

float:left;

}

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

}

Step 3 : Now add the following code above </Head> which is bassicall the javascript which defines the function of your pagination. 

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

 After pasting the code, Click on Save template button to save the changes. 

Step 4 : Now Creat a new post.Switch to HTML tab and paste the following code.

<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 Ad Content Here with the contents of  sections of your page and click Public to see the results.If any problem persists comment below.

Tagged With

• How to break blogger posts in different sections
• How to separate blogger posts in different pages
• How to add tabbed view in blogger
• How to add different sections in blogger posts
• How to add jumpbreak sections in blogger
• How to add switch to other page in blogger posts
• Blogger pagination,How to do pagination in blogger,Blogger Pagination Tutorial.