How to add easily blog post summaries and thumbnails for blogger blog

Even few months ago (?? May be few days!!) it was my dream to create blogger blog post thumbnail and summery with read more links. Now I can do it easily with some easy CSS code. Using CSS code makes your blog faster than using JAVA. Anyway, lets see how to add easily blog post summaries and thumbnails for blogger blog.

1st- Keep a backup of your original template by any chance anything goes wrong. Go to Design--> Edit HTML--> Download Full Template. You will get a XML file. Save it in your computer or any where from where you can get it easily.

2nd- After that, go to Design--> Edit HTML--> check the Expand widget templates box at the top right corner of the main HTML code box.

Find this code there:

<data:post.body />

Now replace this code with this code:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>


3rd- Now find this code:

</b:skin>


Just before that code, paste this code:

.thumb img {
float: left;
margin: 0 10px 10px 0;
}

Practically we’ve finished. But, if you want to show your blog thumbnail image right side, paste this code code instead of that:

.thumb img {
float: right;
margin: 0 0 10px 10px;
}



It’s very easy to understand. Just changing float: left to float: right.

I tried it. Got success. Hope, you will try also. Happy blogging.

Category: blog, blog post, blog post summaries, blog thumbnail, blogger.com, blogging, how to, Web technology