How to Create "Read More" in New Blogger Template

I got this trik from Isnaini. Isnaini said he got the trik from blogger help site, How can I create expandable post summaries?. But he said you may not tried exactly based on that because he already tried several times but fail, mostly in style/css.

From his site he explain as below:

Login to blogger.com, choose which blogger you want to edit, click Layout then go to edit HTML.

Before do some edit to HTML backup your complete HTML. (You may find the link after you click Edit HTML as describe above)

To get your HTML can be edited as a whole; you have to activate the Expand Widget Templates.

Insert below codes before tag </head> and/or after code } ]]></b:skin>

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

To arrange the posting, find codes <p><data:post.body/></p> in your template. Add below codes after that code:

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

Yeah… . You almost done! To get this code work, in your actual post insert <span class="fullpost">. And at the end of your post add code </span>.

Example:
Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. <span class="fullpost"> Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link read more.. diklik </span>

Result:
Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. Read More ...

Good Luck Buddy