0

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

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

Abhishek Balani

A Full Stack Developer, sometimes designer, passionate coder, tireless knowledge seeker, curious learner.

I have a strong passion for new technologies, very autodidact and love to build new things from the ground up. Having 5+ years of dynamic experience accumulated from working in early stage startups to mid-sized organizations in Agile environment.

Skilled in Python and related frameworks, React.js, Databases, Hadoop, Elastic Search and various AWS Services like Boto3, API Gateway, Lamda, EC2, EMR, CloudWatch.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.