Home
Blogging

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?
BloggerSpice
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!
Tags:

You may like these posts

3 Comments

  1. Thank you I like this trick.
  2. Nice Trick Dude
  3. 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.
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up