Thursday, October 25, 2012

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.

5 comments:

  1. Thank you for the information. But images i post on blogger does not have urls. Mostly embedded images/ images from my local drive/ copy paste images I use in my blog. So how to do it. You can check my blog "http://exclusiveindiandeals.blogspot.in/" and see what I am saying. How to bring these images at front page.

    ReplyDelete
    Replies
    1. I have checked your blog but I did not see any images on post only banners on your sidebar. Instead of copy and pasting your images, you can upload them instead, read how to do it in this post http://tito-productservicereview.blogspot.com/2012/03/how-to-insert-upload-image-in-blog-post.html then you can arrange wherever you want them to be in the post.

      Delete
  2. Good article about Blogger

    It is very useful for SEO when we add images on blogger
    Every one is showing some interest to reading you article

    ReplyDelete
  3. Hi there, I discovered your blog by means of Google at the same time as looking for a related matter, your site got here up, it seems to be fantastic. I have bookmarked it in my Google bookmarks. Have came across many good micro-job site such as gicree.com, zopaudios.com, www.themeforest.net and many other. Good luck!

    ReplyDelete
  4. Summarizing the contents would be more easy after those of the considerations.

    ReplyDelete