Add Image or Icon Before Every Blog Post Titles

Today we are discuss about How to Add Image or Icon before Every Post Titles .Adding an image or avatar of your blog before every blog post is a great concept and it is very simple to add in blogger blog. We are going to learn how to add your own image, avatar or icon before your post titles. This will present your blog more professional. We also add our brand logo as our post title avatar. Do you want to know how it looks like just see the picture above….follow the bellow steps to add avatar before blog post.

---

Add image or Icon Before Post Titles

---

1. Log in to Blogger blog

2. Go to your blogger dashboard

3. Now click Template from left side menu

4. Backup your full template before editing

5. Click Edit HTML, Click Proceed

6. Search for .post h3 or .post h2 by pressing Ctrl+F

7. You find the some code like bellow..

.post h3 { font-size: XXpx; font-family: Arial, sans-serif; font-weight: normal; color: #XXXXXX; margin: Xpx; padding: Xpx Xpx Xpx Xpx; }

8. Now select whole code and replace with below code…

.post h3 { background: url(YOUR IMAGE LINK GOES HERE) no-repeat top left; padding: 0px 5px 0 35px; line-height: 1.5em; font-size:20px; margin:10px 0; font-weight:bold; }

Don’t forget to make these changes…

**Replace yellow text with your icon/ image/ avatar picture.

**Make sure your image size is 30px X 30px.

**It will be good to see if you use your image with white background and 1px gray border.

9. Finally click Save Template and you are done.

That’s all. If you still have any problem just let me know. Don’t forget to use the comment box for your valuable thoughts.

At last have a nice day… 

HAve Good Visting keep visting  for more tips