How to add Read More in Blogspot

As you can see, my blog has this Read More function. This little trick can help you to summarize your post before your reader read the rest of your post. Well, continue your reading here.

First of all, you must to your blogger account. Next step, open your template from Layout > Edit Html. After that, click the Expand Template Widget. Click the picture below.



Next, add this code below the

</head>

section. Add this code:

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

Locate this code in your template by using the Find command. (CTRL+F in mozilla)

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

Now, add this code below the above code:

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

*** You can change the Read More.. with anything you like. You can use images too.

Save your template.

We are entering the second phase of this tutorial.
Click SETTING and then FORMATTING.

At the bottom of the screen is, some empty white box. Now, fill the box with this code:

<span class="fullpost">

</span>

Now, Save your Setting. You're done adding the Read More function.


SOME IMPORTANT STUFF
1. Your older post will not automatically have this function. You HAVE to add it manually.
2. When you making post, make sure to add the summary before this code:

<span class="fullpost">

</span>

Put the rest of the post in between the code.