Hey! 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.
Firstly open the post editor and switch to HTML tab. By default the Compose tab is selected. After opening it paste the below code
Now replace Add content here with the text you want in the respective pages and publish the post.
There are some points you need to note as they are very crucial for this particular splitting.
Thats it, you are done now. Now you and your visitors can see long posts divided just as you would see in WP posts.
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.
- 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>
- 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.
- 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.
5+
ReplyDeletethanks for the Widget.
ReplyDeleteRegards- http://truetricks.net
sir please help me how can i add code box in my blog posts.(like your code box- all blogger tricks)
ReplyDeleteplease help me
princechaudhri9@gmail.com
http://mydevresources.blogspot.in/2015/11/add-code-snippet-in-blog.html
Delete(Adding code box in blogger)
Nice Blogger Tricks
ReplyDeleteThanks!
Awesome Post Sir,
ReplyDeleteVisit : www.fulltechbuzz.com
Good Post Blogging my love
ReplyDeleteHi ,This is amazing .Exactly what I wanted.Thank you so much.
ReplyDeleteBut 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
Thanks a lot for this.Is there a way to make this into "next page " and "previous page" instead of numbers?
ReplyDeletenice tips , well come http://designsweblog.blogspot.com/
ReplyDeleteNice Article.
ReplyDeleteThanx Man
newstrics.com
this one i really loved... thanks for sharing this awesome widget
ReplyDeleteNice Post Keep it up :)
ReplyDeleteRegards :-> Mistabic.com
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.
ReplyDeleteDifferent*
ReplyDeleteWow 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 :)
ReplyDeleteI was talking about mistake in "Different" word. Into title.
ReplyDeleteWhen 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
ReplyDeleteawesome tutorial. thanks for sharing! will try on my blog, www.pisoandbeyond.com
ReplyDeletethanks!!!
All Blogging Tutorial and Trick 2015 Plz Visit Our Site- http://www.hackpower.org/
ReplyDeleteits nice.
ReplyDeleteThanks for the information.This is a new trick for me and I was waiting for the posts like the same you given
ReplyDeleteThank you it works however I want more than 3 pages. How can I do that?
ReplyDeleteits very useful.
ReplyDeleteThough 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.
ReplyDeletewow it work well for me, i just did some little twiks on it.thanks!
ReplyDeletehttp://travelbyyourside.blogspot.com
Hey bro, Please tell me how to increase infolinks earning ?
ReplyDeleteI 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.
This is very informative thing
ReplyDeleteThis is very informative thing
ReplyDeleteThanks 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
ReplyDeleteI need a code for 20 pages
ReplyDeleteWhat to add in place of '#'?
ReplyDeleteAnd how can we change next page button color?
http://www.rechargians.com/
Easy Way to download Blogger Template Without any Problems:
ReplyDeleteClick Here:
www.ansaritrixs.com/2015/10/blogger-template-download
Thanks for sharing this.
ReplyDeleteYou may also like Amazon Diwali Sale
Nice one, thanks for sharing
ReplyDeleteThanks a lot for the tutorial.
ReplyDeleteVery Helpful
ReplyDeleteGreat tutorial. I was looking this since long time. Thanks
ReplyDeletethanks for the Widget.
ReplyDeleteRegards- http://www.sanweb.in
thanks bro wellcome https://dota2tivi.blogspot.com/
ReplyDeleteDivide/Break Blogger post into "differernt" Pages.
ReplyDelete¡¡¡ Different !!! ;)
Nice Information in the post
ReplyDeletethanks for sharing!
ReplyDeleteWow Awesome Thank for sharing this Post
ReplyDeletei really impressed this post thank men
and also this blog is best for newbies
Latest tutorials
Thanks for Sharing!
ReplyDeletethanks to sharing
ReplyDeletePlease is there any way to make the page reload... so ads on the page can equally reload??
ReplyDeletePlease bro I need a code for 20 pages
ReplyDeleteThanks in advance :)
Regards - happy new year 2017
Very Good Post
ReplyDeletehiiii
ReplyDeleteVery Nicee Article
ReplyDeleteThis is an awesome tutorial for beginners. Thanks for sharing will try on my blog.
ReplyDeleteFunny scary horror prank video you can't stop your Laught after watch this video.
ReplyDeletehttps://youtu.be/V7Kwqb9fpQg
Information is good in the post, it is very usefull.
ReplyDeleteLatest Government Jobs In India
How to split into 5 pages
ReplyDeleteIt's easy to care for dogs
nice blog good job
ReplyDeleteGPSC Social Welfare Officer Answer Key
I Free Jobs Alert
JIPMER MBBS Answer Key
NER Railway Recruitment
UPRNN JE Admit Card
Awesome Tricks For Beginners This is So Helpful For all those Who Start their Business in Beginning.
ReplyDeleteISARKARINAUKRI.CO.IN
This may be the best web I've ever discovered today. Awesome works without a doubt!
ReplyDeleteRent the Runway (Abridged) Case Solution
Current Affairs on International
ReplyDeleteState level current affairs
http://www.current-affairs.org/
what is your template name?
ReplyDeleteHello,
ReplyDeleteThanks for Sharing Useful information with us..!!
https://educationnexams.wordpress.com/
http://entranceexaminformation.blogspot.com/
very nice blog. i was searching for this guide only, thank you!
ReplyDeleteThanks for sharing this post!
ReplyDeleteEducation
Good idea. it will reducw my bounce rate :) http://undilife.blogspot.com
ReplyDeleteI read your mention information that one is very useful and am save your link for future updates.
ReplyDeleteHaryana Board 12th Time Table
Gonna try this on my blog http://earcontra.com
ReplyDeleteNot Working ..................
ReplyDeleteNot 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.
ReplyDeletets ssc hall ticket 2017 date
ReplyDeleteThis site is very good I like this website
Thanks for sharing informative post.
ReplyDeleteWhat 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.
ReplyDeleteThanks bro.
ReplyDeletePopAds
Puc.kar.nic.in Model Question Papers 2017
bigo live download download for pc and get this app in your bigo live
ReplyDeleteHi is there a way for me to have previous and next button instead of numbers? thanks!
ReplyDeletegood widget thanks for sharing
ReplyDeleteHi, Can you paste the code only for 2 pages?
ReplyDeleteFlipkart 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.
ReplyDeleteThat's really great that you have mentioned on this page. Here are the latest government jobs in India.
ReplyDeleteشركة شفط بيارات بالدمام
ReplyDeleteشركة تنظيف موكيت وسجاد بالدمام والخبر
شركة اعمال سباكة بالدمام والخبر والقطيف
شركة تنظيف بالجبيل
شركة شفط بيارات بالدمام
ReplyDeleteشركة تنظيف موكيت وسجاد بالدمام والخبر
شركة اعمال سباكة بالدمام والخبر والقطيف
شركة تنظيف بالجبيل
Thank you for the useful information. You might be interested in Latest Govt Jobs in AP So
ReplyDeleteThank you for sharing in this article Obat Perangsang Wanita I can learn a lot and could also be a reference
ReplyDeleteNice Website.Great Information sharing.Happy to read this article .I appreciate this post.
ReplyDeleteCurrent Fake Companies List
nice
ReplyDeleteSBI Jobst Apply Online | 2313 PO Jobs Openings Notification & Application
ReplyDeleteThanks, it worked. Easy to follow and got what I wanted.
ReplyDeleteThanks Your for your useful code. i try it here http://emagazine2u.blogspot.com
ReplyDeleteThis is an awesome tutorial for beginners. Thanks for sharing will try on my blogs.,,,,,
ReplyDeleteAwesome post sir , very Good
ReplyDeletethanks for share here
http://www.sarkari-exams.com/