Add your Profile Pic or Avatar next to Post Titles in Blogger

[a href="http://zailab.blogspot.com/2011/03/random-468x60-ad-banner-widget-for.html" rel="nofollow" target="_blank"]DEMO1[/a]

[a href="http://bloggertricks-testblog.blogspot.com/2009/10/this-is-how-peacful-land-turned-into.html" rel="nofollow" target="_blank"]DEMO2[/a]

 

Add a Profile Image Next To Post Titles

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for .post h3 or .post h2
4. You will see a similar code like this one,

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

 

Replace this entire code with this one,

.post h3 {
background:url(IMAGE LINK OF YOUR PROFILE PIC) 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;
}

Now replace bolded yellow text with Image URL of your avatar. Your avatar should be 40px by 40px in size. For better visibility choose a profile pic with white background and coloured border like this one,

[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdcJcQg5831rr5DLKq9an3bgNAv_M7CgBbiTn8jt2L7gxUaKcDp0y3_AixuexIgpVTqeE37kCepAhU6yinhkQeX63KiJXXV6UckmrZJ8Go1rUidDenqf57Cubv8eBYpiQ5OmBd3PnL7MI/s1600-h/Bean_1-2%25255B4%25255D.jpg"][/a]  or you can try this without border,

[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj61QqYy9KKWD8-2Tw-PNBKTemf6-OP3IF5NumtdtB40jpEnUi5gumMF1QFXqNrfzeBNhO4ujerEual7GR5mHIRIoIfOIlNt8SHJD5hUq4WI_-UA5ByNzBb7546yuC-d8s_l0M31jOlqMU/s1600-h/68d8888227719f3af839a045bc70bf7f%25255B15%25255D.jpg"][/a]

To Learn how to upload images on blogger and get their URLs read,

• 
  
  [a href="http://www.mybloggertricks.com/2009/11/create-blogger-backup-for-images-and.html" target="_blank"]Upload images on blogger[/a]
  
  

     5.   Save your template and you are done!

Visit your blogs to see an interesting new change. If you faced any problem then do not hesitate to let your brother know. Would be a pleasure to help you out. Have Fun! :>

You will also like these tutorial tricks:

• 
  
  [a href="http://www.mybloggertricks.com/2011/06/optimize-blog-post-titles-using-h2-tag.html" target="_blank"]Change Heading tag of post titles[/a]
  
  



• 
  
  [a href="http://www.mybloggertricks.com/2011/05/style-post-and-sidebar-titles-with.html" target="_blank"]Use Google Fonts for Post titles and Sidebar titles[/a]
  
  

Source: http://www.mybloggertricks.com/2011/08/add-your-profile-pic-or-avatar-next-to.html