Make readmore on Blogspot or Blogger

At first I use blogger to post my daily activities, there’s a slight concern about one thing. You see when I make a long post, the post will all be displayed on the front page (home).

It’s too long and it doesn’t look so great on my blog’s home page. I just want to make the first paragraph to be displayed on the front page. There’s no “readmore” link that I want to make expendable post summaries. There’s no tool in the editor (place to write your post) to add “readmore”. So how we’re gonna make it?

Don’t worry I know just the trick
is. There are 3 steps to make post summaries on front page. Just follow
my simple instruction below:

1. “Conditional CSS”
   Addition

Conditional CSS change how posts
displayed on the different pages. Click “Layout” —à”Edit
HTML”.

Then back up the template by clicking
“Download Full Template” Button. Search and find this code: </head>.
Add the following code right on top of it:

<style>

<b:if cond=’data:blog.pageType == “item”‘>

span.fullpost {display:inline;}


<b:else/>

span.fullpost {display:none;}

</b:if>

</style>

It is used to make class
named fullpost which will be displayed only on detail page (permalink).

1. Read More Addition

Next step is to add “readmore”
link (or whatever that you want to name it) that will be displayed after
the post summaries. You need to click check box Expand
Widgets Template right on top of Edit Template box.

Then scroll till you find this code:

<data:post.body/>

Add this following code after that:

<b:if cond=’data:blog.pageType
!= “item”‘>

<a expr:href=’data:post.url’ target=’_blank’>Read more!</a>


</b:if>

Once finished, click Save Template.
This readmore link will only be displayed at home page and Archive.
If clicked, will open new page contain the full post.

1. Addition on Post Template

Last step is to add format on post
template, so every time you make a new post where to put post summaries
and where to put the whole remaining post.

Click Settings–à

Formatting, then drag to the lowest of the page.

Copy and paste this following code
to the Post Template box.

Post Summary

<span class=”fullpost”>

The rest of the remaining post


</span>

Klik Save Settings, and you’re done!