[How to] Add Automatic post summary with thumbnail on blogger[Tutorials]

0
469
views

Hello bloggers, You might have seen on my blogger blog that my posts previews are placed systematically in a box with the post summary and a image. It looks more elegant and clean , professional.

So I thought to share this with you. Yes, you can also make this with your blog.After this No need to Add JUMP LINK (Read more) in your post. Just write your article with an image simply and all work will be done by this hack itself automatismToday I m gonna share with you How to Add Automatic post summary with thumbnail on blogger…For more updates follow us and LIKE fan page….

The tutorial for How to Add Automatic post summary with thumbnail on blogger goes here…

First of all Go to your Blogger Dashboard ->Design -> Edit HTML and back up your template..
Now find </head> tag in your template code.
Now copy the code below paste below code Just Above / Before </head> tag

<script type=’text/javascript’>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src=’http://blogergadgets.googlecode.com/files/excerpt.js’ type=’text/javascript’/>
 

Note: Edit this according to your need…if unable to understand tell me I will help you.

Now find <data:post.body/> 
Replace it with

<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>
<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>
</b:if>

Now preview it,if looks according to you and SAVE it…..
Enjoyed the Post…tell us..use the comment box belowHappy Blogging

Leave a Reply