how to add "read more" tag to blogger

All these days, i searched and searched for an article on how to add the "continue reading" tag for a blogger post, and eventually my search ended up in an article called "how to get extremely pissed off when something doesn't happen the way you want it to." Sounds pretty familiar???

I seriously think you are correct because, firstly there are a few sites which offer you the tip on how to add the "read more" tag and all of them didn't work properly (at least for me, they didn't). When I followed their procedure, I ended up getting error messages like the following:

• Your template could not be parsed as it is not well-formed. Make sure the 'div' tags is ended with a proper end tag.
• or make sure the b:if tag is ended with a proper 'end' tag.

If these are the error messages you encountered or anything which sounds unfamiliar to you, just follow this small tutorial and it will be easy as sipping coffee!!

There are only two steps involved in getting a "read more" tag. It couldn't be more simpler than this.

• Go to your blogger dashboard by logging in and browse to 'Layout>Edit HTML' and then you will be presented with the HTML/CSS code for the template your blogspot adores itself with. You might want to copy the whole code and paste it in notepad(preferably Notepad++) and then modify it there and then later paste the whole thing back in the Blogger pad.
  
• Then, search for this part of the code (by pressing Ctrl + F):

I found out that some of the xml templates doesn't have the same code structure to what i have explained above and this could pose a lot of problems to bloggers who are searching hard to find the above mentioned code lines. So after reviewing one of my peer's blog, i found at another way to rectify this "more tag" problem. Here is how you do it.

Find this part of the code in the xml template:

<data:post.body/>

Once you find this code, "REPLACE" the above line with the following set of lines:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<data:post.body/>
<b:else/>
<style>.fullpost{display:none;}</style>
<data:post.body/>
<a expr:href='data:post.url'>Continue Reading »</a>
</b:if>

Now, Save the template and go to Settings>>Formatting and scroll below till you find the Post Template window and in the given space, paste the following lines:

<span class="fullpost">

</span>

Save the settings and when you create a new post, you can observe(html section) that the following code is automatically generated:

<span class="fullpost">
</span>

If you want you add the "more tag to you existing posts, just go to "edit HTML" and paste the part of the article you want to be visible when the read more tag is clicked, between these two lines:

<span class="fullpost">

The part of the post invisible in the main page comes here.....

</span>

Thats about it. If you have any problems with understanding the above code or if you get any sort of errors, please feel free to comment and i shall try my best to rectify it.