Automatic Post Summary in Blogger.

Is it possible to show the summary of post without applying default Jump break in Blogger.Yes it is.We can show the summary of post in main page or in archive or label page using JavaScript.Just you need to customize the template other work will be don’t by JavaScript.Although it is better to use Jump Break(Read more) instead of Auto Read more.Why?Because the user who has disable JavaScript or doesn’t support JavaScript cannot see read more.Some points of difference between Jump Break.

Default Read More	Auto Read More
We need to apply Tag to show summary.	We don’t need to apply tag to show summary.
It uses HTML.	It use JavaScript.
If no HTML(<!--more-->) is used read more will not be applied	All the post is applied read more.
All the codes,Image will appear where read more is applied.	Only text and image will be seen.

Although if you want to apply Auto Read more then here is the tutorials.

Adding JavaScript.

1. Go to Blogger Dashboard>Template or Design>Edit HTML
2. Back up your Blog.
3. Tick on expand widget.
4. Find </head> and add the following codes just above it.

   <!-- Auto read more script Start -->
   <script type='text/javascript'>
   var thumbnail_mode = &quot;yes&quot;; 
   summary_noimg = 300; 
   summary_img = 200; 
   img_thumb_height = 150;
   img_thumb_width = 150;
   </script>
   <script src='http://greenbajgain.googlecode.com/files/Auto%20Post%20Summary.js' type='text/javascript'/>
   <!-- http://bloggerrounder.blogspot.com-->
   <!-- Auto post Summary script End -->
   

5. Where
   1. thumbnail_mode –(line line 3).If you want to show the image in summary then set it yes bit if not then set it no.
   2. summary_img –(In Line 5) = Set a number of words if there is image in your post.
   3. summary_noimg –(In line 4)Set a number of words when there is no image in your post.
   4. img_thumb_height and img_thumb_width –(In Line 7 )Total height or width of Image  in pixel.
   5. Applying Auto Read more in Index pages.

Applying Read More in Index Page.

If you want to apply the read more in index page i.e in Main page,Label Page and Yearly archive page then Apply this method.Remember We are still in “Edit HTML”

1. Find <data:post.body/>
2. Replace that line with this.

   <!-- Auto read more Start -->
   <!-- http://bloggerrounder.blogspot.com -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <data:post.body/>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;static_page&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>
   <a class='more' expr:href='data:post.url'>Read more..</a>
   </b:if>
   </b:if>
   <!-- http://bloggerrounder.blogspot.com -->
   <!-- Auto read more End -->
   

Applying Read More in Archive or label Page .

Use this instead of step 2 to apply auto read more in archive or label page.

<!-- Auto read more Start -->
<!-- http://bloggerrounder.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&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>
</b:if>
<a class='more' expr:href='data:post.url'>Read more</a>
</b:if>
</b:if>
<!-- http://bloggerrounder.blogspot.com -->
<!-- Auto read more End -->

Applying Auto read more in all page.

If you want to apply auto read more in all page then use this

<!-- Auto read more Start -->
<!-- Bloggerrounder.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&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>
<a class='more' expr:href='data:post.url'>Read more </a>
</b:if>
</b:if>
<!-- Bloggerrounder.blogspot.com -->
<!-- Auto read more End -->

Styling the Read More text.

If you want to Use Image instead of text then just replace “Read More” text like this.

<img src="ImageUrl"/>

Replace Image Url with your own.If you want to download the read more images then you can get it from here.The images are from MBT,Blogger Rounder Friends.

If you want to style more the add the CSS in Blogger like this.

.more {
/*CSS Styling Codes here.*/
}

If you don’t know how to add CSS then you can learn from here.

Enjoy!

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.