Friday, May 20, 2011

How to show post summary on blogger home page by adding a ''Read More'' button

Its very easy to show post summary on blogger home page and adding a readmore tab.Just follow the following steps to edit the HTML of blogger template

  1. login to your blogger account
  2. select ''Dashboard''
  3. select ''edit html''
  4. download full copy of template just as a backup
  5. Check ''expand widget template''Expand Widget Templates
  6. now find the following in the html code (use ctrl+f to find)



</head>

  • paste the following code just above it









<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 240;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
type='text/javascript'/>
  • now find the following html code


<data:post.body/>


And replace it with the following code ..(just replace <data:post.body/> with the following code)







<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'>
<a expr:href='data:post.url'
rel='bookmark'><b>Read more >></b></a></span>
</b:if>


That's all now save the template and view your blog you will see post summaries on homepage with a read more tab

Read detailed post at Hub Pages

3 comments:

Dane Policarpio said...

How can you make the texts longer? nice article BTW

India Jobs said...

How to use this hack for Archive pages, label Pages & Older Posts pages. Please guide me.

Is there any way to make this without using javascript?

Reporter said...

This trick wont work now as blogger site is updated now. Blogger itself providing the jump break feature which has the same functionality in single click. I have used the same in my blog. In the post edit window there is tool between insert video and text alignment is the one you need to use. See http://ispringboard.blogspot.in/ here as sample.

Popular Posts