How to Add Images to Blogger Post Summary

This post is in response to one of my readers who wanted to know how he can add images next to post  titles or post summaries. Before you do this, you will need to set the post to show only the post summaries. You can read my previous  post on how to customize the expandable summary.

After setting the expandable summary links, then go to;

• Blogger Dashboard - Template - Edit HTML- Proceed.
• Download your template before making changes.
• Click on Expanded Widget Template, using Ctrl + F, search for the following code; <a expr:href='data:post.url'><data:post.title/></a>.

 

Immediately after <a expr:href='data:post.url'><data:post.title/></a>, add the image URL <img src='The URL of your image.jpg'/>. For example;

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGBOQZBe42rQaFjNRDc-trafyqFRbg7SIhOW_UxH2oo592yb7K1qgcS-ErMamk1fnVLpAKYO_x6n7Z_l0N6X7pb-NdH_iB-5CKd1iAzR6cQmg643bp7Wb-yj46-R4MiccBZ1mwuJk1z9k/s1600/Blog.jpg'/> 

 

   

If you look at the image above, it appears just below the post title. To move/float the image so that it will appear on the left side, I will add the following; style='float:left; margin:0px 15px 15px 0px '/>. So my final coding will be like this;

 

 

This is how my image  will now looks like after floating it on the left side;

 

Preview your template and if you are ok with the changes, click on Save Template.