ADVERTISEMENTS
How to Create "Read more" or "Continue reading" links for long posts
By default, blogger shows 20 posts in each page. It will just be fine for readers if your posts are short. Otherwise, they have to roll up or down to view completely the length of the page. It's inconvenient, isn't it?
Do you see the posts on my blog? Each shows only a part of the whole entry we call a summary and visitors need to click on the "Continue reading" link to view the whole article. This link does not only reduce the length of an entry to let the viewers quickly scan many posts before deciding which post to read in its entirety, but it also adds a professional look to your blog. The disadvantage of this Blogger hack is, it will take a few more seconds for the entire article to reload on your browser.
In order to add the "Read more" or "Continue reading" links on your posts, just follow these very simple steps. We made these as easy to understand as possible.
Do you see the posts on my blog? Each shows only a part of the whole entry we call a summary and visitors need to click on the "Continue reading" link to view the whole article. This link does not only reduce the length of an entry to let the viewers quickly scan many posts before deciding which post to read in its entirety, but it also adds a professional look to your blog. The disadvantage of this Blogger hack is, it will take a few more seconds for the entire article to reload on your browser.
In order to add the "Read more" or "Continue reading" links on your posts, just follow these very simple steps. We made these as easy to understand as possible.
Please Note: Before Editing your Template, Save a copy of your current template by clicking 'Download Full Template' in 'Edit HTML' page of the Blogger 'Layout' Window and 'Preview' the changes before Saving
- In your Blogger Dashboard, go to Layout > Edit HTML and then mark/check 'Expand Widget Templates'.
- To find some important codes, press Ctrl+F in your keyboard.
- Look for
]]></b:skin> (or copy and paste this in the Find: box) and put the following code after it:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
.rmlink {
display:none;
font-weight:bold;
float:right;
}
<b:else/>
span.fullpost {display:none;}
.rmlink {
display:inline;
font-weight:bold;
float:right;
}
</b:if>
</style> - Now, immediately after
<p><data:post.body/></p>, put the following code:
<span class='rmlink'><a expr:href='data:post.url'>Read more...</a></span>Please Note: If you want to customize it, simply replace "Read more" with your own choice of words, for example: "Continue reading". - Save Template.
- Next, go to Settings > Formatting and then paste the following code in the 'Post Template' box:
Summary
<span class="fullpost">
Full content
</span>
There you go. From now on, each of your new posts will be displayed with a "Read more" or "Continue reading" link.
0 comments