In the previous post, I discuss on "How to Disable Copy Function in Blogger" and today I am going to share you a secret to making your website fast loading and to reduce bounce rates of your Blogspot web. There is no any doubt that I love Blogspot blogging platform. Therefore, my most of the tutorials are belong to Blogspot.
In the recent days, I found a trick to speed up Blogspot post when I visit list25.com website that is very popular in the world. I notice that they use brick ups in the post. These bricks are dividing one post into different pages that load fast.
More...
I think to share this trick with Blogspot users who write long articles or write on top 10 list that includes large images.
But first, let's talk about what is post breaking and how it can help you to boost up your blogspot speed and reduce bounce rates.
What is Breakups in Post?
Most of the bloggers say that long posts, more than 1k words, index fast and get a position in the search result. They are quite right if the content is original and professional. But long post takes a long time to load on the browser which affects the ranking of a website in Google.
That's, why bloggers use post break up to increase the loading speed of the website. The breaking up of post decrease the size of the page and makes multiple pages. On the other hand, it also beneficial to reduce bounce rate. So I also recommend using this function, if you write lengthy articles.
Benefits of Breaking Post into Multiple Pages:
There are three advantages of using breakpoints in the post.
1. Speedup Post
There is no doubt that half page loads faster than a full page. The splitting up of the post is the best way for making website speed faster.
2. Bounce Rate
In the beginning, I was unfamiliar with bounce rate which is another factor of SEO(Search Engine Optimization). Many peoples are confused about bounce rate? The question is, it must increase or decrease.
Bounce rate is the average of how many views, one visitor have done on your website. If there is an increase in bounce rate, its mean visitors are leaving your site. To reduce bounce rates on Blogspot, giving a break paginate in every long post must require for you.
3.User Experience
As I am a Blogger, I alway try to check how a visitor feels on my website. User Experience is every important thing require to make your blog more attractive. Making your site, user-friendly attract more visitors to your blog. So using break paginate also help in increasing user experience on your blog or website.
How to Break Post into Multiple Pages
If you want to see the Demo of breaking Post, then click on the demo button.
[thrive_link color='dark' link='http://bloggingvision.blogspot.com/2015/10/how-to-break-posts-into-multiple-pages.html' target='_blank' size='medium' align='aligncenter']Demo[/thrive_link]
Go to Blogger account and choose a blog where you want to add break paginate system.
Now go to Template>Edit HTML and here you need to search for jQuear source link that will be in <head>. If there is no link available similar to the given link, then copy-paste this code under the <head> tag to enable jQuery libratory.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Now you need to search ]]></b:skin> tag in the Template Editor and then paste the following code before this closing tag.
.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;
}
The following CSS is used to give the style to the break paginate style. You can customize it according to your template design by changing the CSS code only.
Now again search </head> in your template editor and paste the following jQuery script above it.
<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>
Save it. Now we have added all functions of post break up in blogger template. It's time to call the function in the Blogger post.
Before breaking the post, I want to show you another way to add the javascript and CSS. There is another way to add Javascript and CSS in the blogger template that will not remove when you will change the template of your blog.
First of all, you need to add some tag before and after the codes. For CSS use the following tag.
<style>CSS Here</Style>
Now go to Layout of your template and click on Add Gadget. Select HTML/Javascript and paste CSS code with start and close tag. And now you can also be able to paste javascript functions in it. Now whenever you change the template, it will remain in its position.
So, when every you want to break the post into multiple pages then use the following HTML codes in the blogspot template.
<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 whenever you want to break the post into Multiple pages, go to post editor. Convert compose into HTML and paste the HTML into it. Replace the Add Content Here with your paragraph or anything you want separate and draft the post to check if it is working correctly. After that publish the post. The above HTML code can be use for breaking one post into three possible parts.
Do share this post with your friends, if it works for you.
