Great 1:1 Traffic Exchange

Monday, October 6, 2008

How to Add "Read More" tags in Blogger

"Read more" tags is very useful if you have a lots of long articles all on one page. You just have to post the the summary of your post instead showing the entire post on the front page. When people want to read the rest of the post they can click "Read more" link to see the entirely post.
Just follow these step below to add "Read More" tags into your blogger:


#1 Make sure that "permalink" is enabled. Sign into "Dashboard", Click the "Settings", then click "Archiving" and ensure that "Enable Post Page" is set to "YES".
#2 Click the "Layout" then click "Edit HTML". In this page, you may save the template to restore your current template in case input the wrong code. For this problem, you have to download full template. Furthermore, Click the "Expand Widget Templates" for view the full content of the template code. In the template editor window, find this line of code:
<div class="post-body">
Below that code, paste this code:
<!-- Read More Hack Begin -->
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<!-- Read More Hack End -->
Next, find this line of code :
<data:post.body>
Paste this code below that code:
<!-- Read More Hack Begin -->
<a expr:href='data:post.url'>Read More...</a>
</b:if>
<!-- Read More Hack End -->

You may change the "Read More..." with your own words or images depend on you.
Be careful to put the code, in this template we have 2 <data:post.body/> tags, find the default template tags.After the you have pasted the codes in the relevant places, the whole thing should look like this:

<div class='post-body'>
<!-- Read More Hack Begin -->
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<!-- Read More Hack End -->

<p><data:post.body/></p>

<!-- Read More Hack Begin -->
<a expr:href='data:post.url'>Read More...</a>
</b:if>
<!-- Read More Hack End -->

<div style='clear: both;'/>
</div>
Well done, now save your templates.
#3 Now, create a new posting. When you type your post, where you want the post summary to end, add in this code:

and then type in the rest of your post. At the end of the post, just add the last line of tag:

Example:

Result :


No comments: