How to Insert Pagebreak on Blogger?

Filed Under : ,

Hi bloggy readers,
Have you ever seen a short article in some websites and found in the bottom of that article has pagebreak with the text link "Read more" or "Read the rest" or anything, that allows people to read the full version of that article when clicking at the Read more link? Yes, that is a a pagebreak function!

page break

Many blogger have used this pagebreak feature in order to cut the long article they have in their articles and show only the first paragraph of that article, because that ,of course, will make their blogs look good and besides, it will also increase the pageviews of that blog when visitors are curious to see the full content of one article in the homepage, right?. That's why, i decide to make this post.

First Phase: Adding 2 new line codes in formatting tab

1. Login to Blogger
To begin this tutorial, now Log in to your Blogger account and land to the Dashboard page.

2. Go to Setting
In the Dashboard, pick one of your blogs that you want to add with the Readmore function and then go to Setting. By pressing the Setting, you will enter the main configuration of your blog.

3. Go to Formatting
Still in the Setting tab, there are 8 sub-tabs that can be switched, such as Basic, Publishing, Formatting, etc. Now press the sub-tab Formatting in that sub-tab navigation. After landing on the Formatting page, you can see all of the configurations of your blog, now scroll down to the bottom until you see the option "Post template", then you must stop right there.

4. Fill the Post Template with the code
After finding the option Post Template in the Formatting sub-tab, now block these 2 line codes and press Copy. And then put the codes in the empty box of Post Template. By adding these 2 line codes into the Post Template box, every time you make a new post, these 2 line codes will automatically appear to the New Post editor.
<span class="fullpost">


</span>

5. Save the change
By pressing the Save Setting button on the bottom position, now save the current setting you've just made. And then, proceed to the next phase of this tutorial, adding the pagebreak code to your blog template.

Second Phase: Adding pagebreak code in the blog template

1. Go to Edit HTML
In the Dashboard page, pick one of your blog and go to the Layout/Design page. In the Layout/Design page, now click at the sub-tab Edit HTML to begin embedding the pagebreak codes on your blog template.

2. Give a tick at the Expand Template widget box.
In the Edit HTML Page, there is one small box called Expand Widget Template next to it, now press that small box.

3. Find the code
Now, by press Ctrl + F at the same time, you will enter the search mode. And find the code below:
<data:post.body/>

If you have any problem in locating the code section above, try to look the other code section that looks like the code below:
<p><data:post.body/></p>

4. Replace the code
Now block all the code above by using your mouse cursor and then replace it with the following code below
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

5. Save the Template
Now press the Save Template button to save the current change you've just made.

How to apply this pagebreak to my article?

Every time you want to create a New Post, in the post template, you will see the 2 line codes you've already embedded in the first phase of this tutorial:
<span class="fullpost">


</span>

Now if you want to post an article, you must remember to put the first paragraph of your article before the code
<span class="fullpost">

And then, put the rest article (without the first paragraph) before the code
</span>

And publish it! In the homepage, you will only see the first paragraph. And to read the rest article, you have to click the magic words "Read more". Anyway, on my other article, i also made a similar article about adding a pagebreak function along with the Title of that post. Go check this post if you are interested - How to Make a Pagebreak function With a Title of the Post? -

Okay, that's it for now about adding pagebreak on Blogger. If you feel that this post helps you a lot, feel free to share this article to your Facebook or Twitter friends. I'll appreciate that.

Good luck bloggy!

Related Posts :


Share This Article to Other People Across the World !
Thanks!
Get the fresh update from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner

0 comments:

Post a Comment

Browse Our Template Gallery

Subscribe Now To Get Update!

Want to Get The Update From Whatmakesblog.com to Your Email Inbox? Just Type Your Email Address Below and Press Subscribe...
Your email address will not be shared..
Delivered by FeedBurner

Last Posts

Site Info