How To Add your Profile Pic for Avatar next to Post Titles in Blogger

Adding profile image next to post titles in blogger will give a professional/personal touch to your blog. People will love your blog, because they find your blog original, being created by a human and not scam. People (your blog readers) will come back again and again, and will have trust on your website. As you can see many professional bloggers are using their profile pics next to the all blog post titles. You can too! Yes! this add-on trick is available in blogger.com. Now! let's learn How To Add Profile Pic for Avatar Next to Post Titles in Blogger by reading below.

Adding a Profile Image Next To Post Titles

1. First of all: Go To Blogger >> Select Blog >> Layout >> Edit HTML
2. Now Search for .post h3 or .post h2
You will see a similar code like this one 

.post h2 {
color: #845GGG;
font-size: 22px;
font-family: Arial, sans-serif;;
font-weight: bold;
margin: 0px;
padding: 0px 11px 0 48px;
}

NOTE: If you are failed in searching for above coding then search for following coding (are similar)

h3.post-title, .comments h4 {
font: normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
}

3. For first coding: Mark above coding and replace it with following coding

.post h2 {
background:url(URL of Your Profile PIC) no-repeat top left;
color: #289729;
font-size: 22px;
font-family: Arial, sans-serif;;
font-weight: normal; height:46px;
margin: 0px;
padding: 0px 11px 0 48px;
line-height:1.1em;
}

NOTE: If you have search for 2nd coding then replace it with following coding

h3.post-title {
background:url(URL of Your Profile PIC) no-repeat top left;
padding: 0px 10px 0 48px;
line-height:1.1em;
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;

}
.comments h4 {
font: normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
}

4. So! Half work is done. Now replace URL of Your Profile PIC with your 40px by 40px profile pic URL
5. Click on Save Template button and see your image at next to the blog post titles.

DEMO of Profile Pic Next To Blog Post Title

Final Words

You can change Title text color by replacing #289729 with your favorite color code. Also you can change font-size by changing the 22px to your own favorite size. For more tricks please share this post and leave comments. Credits goes to MBT