Add Author Image Beside your Blog Post Title

Learn the trick about to add Blog Author Image beside the Blog Post Title in Blogger site?

3
data:blog.title
Blogger tricks
 Profile image beside your blog post titles gives you more personal feel to your site. It indicates the credibility of real author to readers and the site doesn’t generate auto content with no attention to readers. Before proceed make your picture 40px X 40px by using any image resizer and upload it in any image hosting site like Photobucket or Bitly and get the image link. So now let's add this beautiful trick to your blogger blogs and make things even more eye catching.

Step 1 Log in to your blogger account and Click on Template ->Edit HTML-> Proceed

Step 2 Now find the below code in your template by pressing Ctrl+F (Windows) or CMD+F (Mac)

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


The Code can be different but concentrate on .post-body h3 { or .post h2 {

Step 3 Replace this entire code with below code,
.post h3 {
background:url(IMAGE LINK OF YOUR PROFILE PIC) no-repeat top left;
color: #04BDFA;
font-size: 20px;
font-family: Arial, sans-serif;;
font-weight: normal; height:45px;
margin: 0px;
padding: 0px 10px 0 47px;
line-height:1.1em;
}

Customization

Now replace the IMAGE LINK OF YOUR PROFILE PIC with your own image link
Replace #04BDFA with the post title color code of your blog. Use BloggerSpice Color Picker for more color code.

Step 5 Save your template and you are done!

If you faced any problem then do not hesitate to leave a comments. Happy Blogging!
Add Author Image Beside your Blog Post Title
4 Stars stars - "Add Author Image Beside your Blog Post Title"  Profile image beside your blog post titles gives you more personal feel to your site. It indi...

Post a Comment

Thank you I like this trick.

I think that this would make a great template for my website. I have been looking for something like this.
I appreciate this post. all over the world. I think that this would make a great template for my website.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *