Blogger Help - Add Read More link to your posts

Although this tutorial is the easiest way to truncate posts on Blogger blog, but being a javascript based hack, this method is not SEO friendly. If you want to use a SEO friendly post-truncating method on your blog, then kindly read this post.

---

Most of the bloggers, want to show more than one post in their blog's home page, but displaying all the content on the home page of each and every post makes the home page very lengthy, and visitors may miss out any article while scrolling down the entire length of the page.
So here's a method for bloggers to display only a part of  the posts, and not the entire posts. If a visitor wants to read the complete article then he/she will click on the "Read More" link at the bottom of the post, which will be redirected to the particular post.

Steps to follow:
1. Log into the Blogger.com account
2. Go to "Layout" section
3. Back up your current template, by downloading it.
4.  Now click on "Expand Widget Templates"
5. Now find this code - ]]></b:skin>
6.  Just AFTER that code add these lines

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

7. Now again find this code : <data:post.body/>
8. And just after this, add these code lines:

<!--READ-MORE-STARTS--><b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read More!</a>
</b:if><!--READ-MORE-STOPS-->

If you want to shift the "Read More!" text to the extreme-right side, use this code:

<!--READ-MORE-STARTS--><b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><div style="text-align: right;">Read More !</div></a>
</b:if><!--READ-MORE-STOPS-->

9. Now save the template.

IMPORTANT :Now these adjustments will NOT show your previous posts with "Read More" tag, but you can display them with Read More tags, by editing them with instructions as below:
From now on, whenever making a new post, the part of the post you want to HIDE on your main homepage, write those lines in between these code lines:

<span class="fullpost">WRITE THE PART OF THE POST YOU WANT TO HIDE HERE</span>

See the screen shot below for details:

NOTE 1: After writing new posts, always proof-read your edit HTML section, to avoid mistakes, one such mistake is discussed below:

Make sure, that "Edit HTML", while writing posts looks exactly like this:

<div style="text-align: left;">Post in brief, may include pictures too
<span class="fullpost">Hidden part</span>
</div>

In the above example notice that I have closed span, before div, that placement is very necessary, if you put like this </div> </span>, i.e. closing div first and span later this will NOT work, because span has been started inside div, so it must be closed within div tag.

In case you have multiple paragraphs, while posting a post, and you are giving same text alignment to all the paras, then by default, after every para, the div element will be closed, and again it will start for the next para, so THIS SHOULD NOT be like this, you have to start <div> in the beginning of the post, end it at the last, and make sure <span class="fullpost">Hidden part</span>, is between your div tags.
If you want your previous posts also to hide part of their text, then you must edit them and add span tags to them.


*UPDATE: Now there's a new hack to make all this process automatic: READ HERE about AUTOMATIC READ MORE trick for Blogger.

NOTE 2: If the above method does not work in your blog, here try this second method:
eBlogTemplates

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Google Facebook Twitter More

• Digg
• Linkedin
• Stumbleupon
• Delicious
• Tumblr
• BufferApp
• Pocket
• Evernote

Related Posts

• FeedBurner Showing 0 (Zero) Subscribers CountA hot topic being discussed in the Blogosphere is the about the recent issue at Google's FeedBurner. As reported by the
• How To Add Music or MP3 Songs in Your Blogspot Blog *UPDATE 06 October'16: Google Media Player is no longer working. So, read this new tutorial to add a better and more c
• Add A TweetQuote To Your Blogger BlogIn HTML/CSS, when you quote a piece of text from other websites/web pages, then it is usually done through customized q
• Logo Designing Contests - Art of Making Money OnlineA Logo is almost as important as the company name itself. In fact once a company goes famous, we don't even have to men