Change Thumbnail of Wordpress or Blogger Post

If you want to show your posts thumbnail in blogger or WordPress or change thumbnail and add any image of your choice as thumbnail then you are at right place here we are providing you a simple and clean solution. Let's Start!

I have created a video tutorial below. Kindly watch the video below;

   Scenario:   

            According to my research I have found many methods to do this but at least all of the given methods are totally dummy method and suppose not to work. But there are some html/java codes available which easily compete this task and change the thumbnail of any post to a custom image. To do this you need to follow the simple to steps.

Note: If your Blogger isn't show posts in thumbnail then you need to follow step 1 and if blogger already enabled to show thumbnails then directly go to Step 2 

 Step 1:  

  Show Snippet or Thumbnail in Blogger's Body:    

If you are happy to change your blogger theme code then show you show the snippet and thumbnail anywhere inside the blog post area.

If you want to show snippet then use this code

                               <data:post.snippet/> 

And for thumbnail add use this code;

                             <img expr:src='data:post.thumbnailUrl'/>           

Another suggested method is that mostly people says to add following code to blogger HTML

<b:if cond='data:blog.pageType != &quot;index&quot;'>

      <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:else/>

        <data:post.body/>

      </b:if>

  <b:else/>

  <data:post.body/>

  </b:if>

These are above mentioned method are for only to show “thumbnail or snippet” to your blogger or WordPress body. Here one question arises that

 “Can we tell blogger what's in data:post.thumbnailUrl?”  

If your blogger or WordPress theme already enabled to show thumbnails for posts then Skip Step 1 and Go to Step 2 below; 

 Step 2:  

How to Change Thumbnail of WordPress or Blogger Post

Mostly people say that blogger will just pick an image magically from their post. Yes they are right because blogger Automatically pick first image to make it as thumbnail for your post.

To set any desired image as thumbnail just put that image as first while writing a post. Here blogger automatically set that image as thumbnail.

How to Show Image as Thumbnail but Hide in Post:

In some manners we don’t want show that image in our post body but want to show that as thumbnail then there is little hack to this do follow the all steps mentioned below;

1.     Add the desired thumbnail image at the top of the post.

2.     Go in 'HTML'(you're in customize tab right now) and locate the image tag.

3.     Add style attribute to it and add display property to none like this

 <img style="display:none;">

4.     Now Publish the post.

5.     You'll notice that on the home screen, you can see the thumbnail but after opening the post you'll not see it.

6.     That's it!

INFORMATION!

If you feel any difficulty or confusion then please let us know in comments below or Contact Us.  Kindly Subscribe our YouTube  Channel to Get Quality video tutorials. Thanks