Thursday 13 June 2013

How To Show Image Next to Post Titles in Blogger?

Image Next to Post Titles
Adding an author profile picture or blog's logo next to your blog posts title can improve your blog's look that gives a professional touch to your blog posts. It really help to build your blog readership as it is must to gain reader's trust. When they land to your blog to read the posts, they should feel that there is someone who is willing to build up this blog. No one will like a dead blog. If you will add an author profile image before your blog posts title then they will attract to you and try to communicate with you for any of their queries or feedback. So let's see how to add an image or avatar just before every post titles in blogger.


Adding Image Before Post Titles


Perform these simple steps: 
  1. Go to Blogger.
  2. Navigate to Template >> Edit HTML
  3. Backup your blog template. 
  4. Now press Ctrl+F and search for .post h3 or .post h2
  5. You will find a similar code like this


  6. .post h3 {
    color: #7CA2C4;
    font-size: 20px;
    font-family: Arial, sans-serif;;
    font-weight: normal;
    margin: 0px;
    padding: 0px 10px 0 47px;
    }

  7. Now replace the whole code with this one


  8. .post h3 {
    background:url(Image URL) no-repeat top left;
    color: #289728;
    font-size: 20px;
    font-family: Arial, sans-serif;;
    font-weight: normal; height:45px;
    margin: 0px;
    padding: 0px 10px 0 47px;
    line-height:1.1em;
    }

  9. Now replace Image URL with your image or icon URL.
  10. Now click on save template button.
  11. You are done!
Advice:
Use image under the size of 40px x 40px. It will better if you use an image with white background because it looks nifty.
This was the little trick to show author image before post titles in blogger. If you have any query then feels free to ask me by leaving a comment below this post. Thanks buddy! :)

No comments:

Post a Comment

Follow Me on Facebook.com

About

Followers

Popular Posts