Advertise with ShineMat.com at low cost.
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;
 font-size:20px;
 margin:10px 0;
 font-weight:bold;
 }

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

2 comments:

  1. I hope you will continue your same best work and we will get more informative post which can helpful to us. Thanks for this

    ReplyDelete
  2. nice post thanks for posting bro!!
    please add more likethat again!
    i love this blog!
    Online Pokies and Casinos in Australia - FREE Bonuses
    more info visit this link

    @@@ peliautomaatteja@@@

    ReplyDelete

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.