Blogger blogs were not with the functionality to add more section in blog post .So this was leading to extra long posts on Blogger home pages , archives and labels . We earlier shared methods to add read more in Blogger using JavaScripts and some other hacks . But theses were very hard to implement . Now as part of 10th anniversary of Blogger , the Blogger team announced a couple of new features which includes the option to add read more tag in Blogger blogs . This facility is available for users of  Blogger on draft .

(more…)

Adding Read more in Blogger posts is pretty difficult compared to WordPress . Since we don’t have a more tag on Blogger, we need to implement a template hack for getting this done.

Open Edit HTML from blogger Layout section and expand widget templates .
Copy this JavaScript code and paste it before </head> in your Blogger template code . Now , press Cntrl+F and search for <p><data:post.body/></p> . The block of codes found near to the above line usually looks as shown below .

<div class=’post-body>
<p><data:post.body/></p>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div

You have to edit them as shown below to add read more in Blogger posts .

<div class='post-body'  expr:id='"post-"   data:post.id' >

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

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

       <span id='showlink'>        <a expr:href='data:post.url'>Read More......</a>       </span>       <script type='text/javascript'>         checkFull("post-"   "<data:post.id/>");       </script&gt; </b:if>

<div style='clear: both;'/> <!-- clear for photos floats --></div>

Make sure that the codes(in orange) above <p><data:post.body/></p> are added just after <div class=’post-body’ (or you have to find a similar one in your template) .

Now the template part is over and the next task is to add read more in Blogger posts. Save the template and return for a new post .

This is the part above read more
<span id=”fullpost”>
Here goes Read more ..
</span>

So when each time you blog , insert <span id=”fullpost”> and
</span> in “compose” to access read more into your Blogger posts .

Update : Blogger team added expandable post option in Blogger blogs .