--> Add your Profile Pic or Avatar next to Post Titles in Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

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

Adding a Profile image next to your blog post titles gives a more personal touch to your site. It indicates that a real human is working beh...

profile-pic-next to post-titlesAdding a Profile image next to your blog post titles gives a more personal touch to your site. It indicates that a real human is working behind the site and the site doesn’t generate auto content with no attention to readers. You have seen web entrepreneurs using their profiles pictures on their blog next to each one of their posts. An example includes shoemoney. So lets add this beautiful add-on to your blogger blogs and make things even more neater. Kindly see a demo first:

DEMO1

DEMO2

 

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,



blogger profile picture  or you can try this without border,



shoemoney avatar



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





Replace #289728 with the post title color code of your blog. You can find this title colour from the code which was already present. In my case it is #7CA2C4 so I will replace #289728 with #7CA2C4



     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:



COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Add your Profile Pic or Avatar next to Post Titles in Blogger
Add your Profile Pic or Avatar next to Post Titles in Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnsIy5-hYLP6WCYOVHaEHe0E2UjDMpTvsanRPCkHYkG5Hsg_BGaksoe1hKs_BE_M7mlzeYI4l42_kddXv1cjCoqkwBw6E2mxpuXUmAFyucQeN0zrj2ik1EChJ3owt8leCaBL9TimFkss0/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnsIy5-hYLP6WCYOVHaEHe0E2UjDMpTvsanRPCkHYkG5Hsg_BGaksoe1hKs_BE_M7mlzeYI4l42_kddXv1cjCoqkwBw6E2mxpuXUmAFyucQeN0zrj2ik1EChJ3owt8leCaBL9TimFkss0/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/08/add-your-profile-pic-or-avatar-next-to.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/08/add-your-profile-pic-or-avatar-next-to.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back 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 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy