August 8, 2011

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


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:





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

23 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Nice Concept! Keep rocking!

    ReplyDelete
  2. how can we get different images for different authors like if i have a guest post on my blog????

    ReplyDelete
  3. Thanks for this neat trick, though I'm not able to find .post h2 or h3. I believe this is after I changed my title tags through the instructions of your previous tutorial "Change Heading tag of post titles". Pl do confirm this via checking my blog (http://fmwaweru.blogspot.com). So, how should I go about implementing the above trick.

    ReplyDelete
  4. @felix

    Inside your template find this code instead,

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


    Then replace it with this

    h3.post-title {
    background:url(IMAGE LINK OF YOUR PROFILE PIC) no-repeat top left;
    padding: 0px 10px 0 47px;
    line-height:1.1em;
    font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: .75em 0 0;

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


    Make the changes as guided. You are always welcomed. :)

    ReplyDelete
  5. @Mohmd, thanks man. It worked like a charm

    ReplyDelete
  6. I can't find these codes .post h3 pr .post h2

    ReplyDelete
  7. I'm using the Ethereal theme and having a hard way to go ..any help would be grateful

    ReplyDelete
  8. hello admin, how to add these pic for a blog containing guest authors??

    ReplyDelete
  9. Well this kind of information is really worth searching for this. It’s good to have these kinds of articles around to keep the information flow steady. Helping those who really can make things right in the future, good work!
    Download free games

    ReplyDelete
  10. great article. got help.thanks
    http://www.windowsreloded.blogspot.com

    ReplyDelete
  11. There are lots of useful information in these comment. I am so glad I have come to it and i will track back for updates.

    ReplyDelete
  12. There are lots of useful information in these comment. I am so glad I have come to it and i will track back for updates.
    DVD Duplication

    ReplyDelete
  13. I've a blog of GODHUBS COMMUNITY BIBLE STUDY can anyone help me... How to add author profile picture from mobile.

    ReplyDelete
  14. Dear your website is awesome about SEO tips. Informative article & really helpful for newbie. I want you still going on writing your content. Keep writing content. Without knowing knowledge no one can shine is life, so we have to gather our knowledge about website or blog or sites.

    Search Engine Optimization

    http://seohear.blogspot.com

    ReplyDelete
  15. nop code like that on my template
    how is it... ?

    anyway.. cool stuff from you bro

    ReplyDelete
  16. no code like that in my template
    i used your code instead of
    h3.post-title
    but not working
    help me to solve this puzzle
    http://crackedmecher.com

    ReplyDelete
  17. Liked | Shared | Bookmarked | Superb Article
    thanks for sharing such a informative article. You explained it very well and in such a way that it seems very easy to understand.
    Blogger Fun Tricks

    ReplyDelete
  18. Hi Mohammad,
    I have one quest that is how do we make border around the image that we kept according this tut because I've seen border in image of ur post titles.

    Regards,
    Nirazo

    ReplyDelete
  19. hi thank you, i did not found it HTML, but i put it in CSS code and it works fine.

    ReplyDelete
  20. Mustafa because of your help I just managed to create a blog, You will like it! :P. Please have a look. www.bestsubinfo.blogspot.com

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!