Friday, December 26, 2008

Create 'Read More' link

Did you ever wonder how to cut down lengthy article? See, you got here a 300 word essay, which you publish in your frontpage; but readers get bored easily reading that post. Does this problem got any solution? Luckily, the answer is no other than a 'yes'. You could cut down your essay into a short 2 to 3 paragraph by utilizing the 'Read more...' link. Here's how you do it.

First, you need to know that you are facing the dreaded html editing, but I will make this as simple as I can. Ok, let's get started.

Open your Dashboard and go to 'Layout'. Choose the 'Edit HTML' tab. Find </head> in the html code. Once you find it, paste the following code right before the </head> tag:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
So it will look like this:
]]></b:skin>
<style>

<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
</head>

Save the template. Next you need to check the 'Expand widgets' checkbox. Then look for the tag <data:post.body/>. Once you found it, you need to add the following code right after it:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' >Read more...</a>
</b:if>

If you do it correctly, your code should look like the this:
<data:post.body><b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' >Read more...</a>
</b:if>
Ok you are done for the html part. Now moving on to your posts. To cut off lengthy article, type your post like this:
A catchy summary of the article
<span class="fullpost">The lengthy description</span>
The words inside the <span class="fullpost"></span> be replaced by a 'Read more...' link.

Reference: http://help.blogger.com/bin/answer.py?hl=en&answer=42215

No comments: