Latest Updates:

How To Add Avatar Or Icon Before Post Titles

Hello buddy! Today we will learn a simple but beautiful trick. This trick is really easy to apply in blogger. 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.
To understand more deeply, see this screenshot.

Adding icon before post titles

Now lets know its steps...

1. Log in to Blogger blog

2. Click your blog title

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 will watch some CSS code something looks like…

.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 40px;
 line-height: 1.5em;
 margin:10px 0;

9. Finally click Save Template and you are done.

Customization area

■ 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.

You may also like these tutorials:
Customizing Blogger's official label widget.
Addthis Sharing button for Blogger blog.

That’s all. If you still have any problem just let me know. Have a good day!

Written By:
Topic Under: 11/15/2012
  • Blogger Comments
  • Facebook Comments


Post a Comment

Hi, Your are most welcome and feel free to share your comment(s). We will try to response your comment(s) as soon as possible.

Please DON'T spam here. Spam comments will be deleted just after our review.

Thank You For Being With Us.

Copyright © 2021 Shine Mat | All Right Reserved
Design and Customize By: Ashraful Haque Saimoom and PBThemez | About Us | Contact Us
Scroll to Top