Tuesday, 13 August 2013

How To Use Custom Post Thumbnail In Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

If you ever used self-hosted WordPress, then you might know about post thumbnail (featured post) feature. By using that feature, you can pick a custom image for your post's thumbnail, which is a great feature. I also use this feature on my wwefansnation.com.

I searched around the internet (just Google'd it) and found nothing like this for Blogger blogs. So I discover my own way to pick custom post thumbnail for Blogger. For this trick, we don't need any heavy JavaScript or CSS codes. It's a very little trick, even a newbie can easily use it.

By default, Blogger automatically uses first image of the article as post's thumbnail. So we'll add our thumbnail image to the top of our article, and we'll make it invisible with some CSS. Just add following html code to your post's top (in post editor's html editor):

<img src="Image-Link" style="display:none;"/>

Replace Image-Link with your image's link. Now your image will only appear as your post's thumbnail, and not in the post. This article is an example of this trick. You can visit archive pages to see this trick in action. Don't forget to post your comments.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
Powered by Blogger.