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.
How To Add your Profile Pic for Avatar next to Post Titles in Blogger

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

COMMENTS

BLOGGER: 1
Loading...
Name

2016,14,2017,8,2018,14,Adsense,8,Advertising,2,Affiliate Marketing,4,Alexa,1,Alternatives,2,Android,1,Announcements,1,Apps,5,Ask Me,6,Back linking,8,Backup,1,Bing,1,Black Friday,1,Blockquote,1,Blog Names,3,Blogging,18,Blogging Mistakes,6,Books,1,Business Tips,5,Case Study,6,Content Marketing,18,CSS,4,Customization,20,Domains,6,Downloads,1,eCommerce,1,Email Marketing,3,Entrepreneurs,12,Event Blogging,2,Exclusive,37,Facebook,6,Facts,2,Featured Snippet,1,Finance Tips,1,Forums,2,Freebies,3,Freelancing,4,Giveaways,1,Google,10,Guest Contributions,86,Health Tips,2,Hosting,9,How To,126,Ideas,3,Images,1,Info graphic,21,Inspiration,4,Interviews,4,Keywords Research,1,Make Money,47,Newbie's Guide,74,News,25,NLB,9,Offline Business Ideas,1,Page Rank,3,PayPal,1,Pictorial,2,Posts,5,PSD Files,1,Quotes and Sayings,22,Referral Earning,4,Relationship Tips,1,Review & Guide,16,Roundups,3,Save Money,1,Self Improvement,1,Selling,1,SEO,46,SMO,4,SMS - Messages,1,Social Media,14,Sponsors,2,Startups,1,Technology,2,Templates,8,Tips and Tricks,56,Tools,5,Tops and Lists,51,Traffic,14,Twitter,2,Video Marketing,1,Viral,2,Vlogging,4,Web Designing,10,Widgets,24,Wishes and Greetings,1,WordPress,11,Writing,28,YouTube,2,
ltr
item
AllBlogThings.com - How To, Blogging, SEO, Content Marketing, Lists, Quotes: How To Add your Profile Pic for Avatar next to Post Titles in Blogger
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.
http://2.bp.blogspot.com/-Lk3NDoxXiwQ/VEyNPpRySlI/AAAAAAAAE0E/wN9fguuXt44/s1600/How%2BTo%2BAdd%2Byour%2BProfile%2BPic%2Bfor%2BAvatar%2Bnext%2Bto%2BPost%2BTitles%2Bin%2BBlogger.png
http://2.bp.blogspot.com/-Lk3NDoxXiwQ/VEyNPpRySlI/AAAAAAAAE0E/wN9fguuXt44/s72-c/How%2BTo%2BAdd%2Byour%2BProfile%2BPic%2Bfor%2BAvatar%2Bnext%2Bto%2BPost%2BTitles%2Bin%2BBlogger.png
AllBlogThings.com - How To, Blogging, SEO, Content Marketing, Lists, Quotes
https://www.allblogthings.com/2014/10/Add-Avatar-Next-to-Post-Titles-in-Blogger.html
https://www.allblogthings.com/
https://www.allblogthings.com/
https://www.allblogthings.com/2014/10/Add-Avatar-Next-to-Post-Titles-in-Blogger.html
true
8869657471256965778
UTF-8
Viewing All Posts Bad, Try Again VIEW ALL Read More Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED! LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back To Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Just now About 1 minute ago $$1$$ minutes ago 1 hour ago About $$1$$ hours ago Yesterday About $$1$$ days ago About $$1$$ weeks ago More than some weeks ago Followers Follow PREMIUM and Locked Please share to unlock this content Copy All Code Select All Code All coding here were copied to your clip-board If You can't copy the coding or text here, please press CTRL+C or CMD+C with Mac to copy now