Add Author photo on blog posts - Customize blogger for group blogging

Blogger is a free blogging platform provided by Google.As it is free, it doesn't have much facilities like the Wordpress blogs, which are premium blogs.But Blogger gives the users the complete freedom to customize its code easily and just because of that we are able to practice most of all WP hacks in blogger also.Today, I'm telling you about the hack to show the authors picture with the post title.This hack could be very useful for blogs running Guest Posts and Group blogs.See the screenshot i took by enabling this hack in my blog.But.I had again disabled this hack as my blog has only one author and there is no reason in putting my Avatar on all pages, which is not at all fit for my theme.  

Step 1 : Create an Avatar For you.Refer this post for more info on that.

Step 2 : Host your Avatar on any free Image hosts and collect a link.

Step 3 : Sign in to blogger and Go to Layout -> Edit HTML -> Click on Expand Widget Templates

Step 4 : Add the Image code in your Blogger template ;

    Search for this code or similar 

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>
<data:post.title/>
</b:if>

 

Now Add this code just before the <a expr:href='data:post.url'>

<b:if cond='data:post.author == &quot;Author1&quot;'>


<img height='50' src='Author-1-image-URL' width='50'/>


</b:if>


<b:if cond='data:post.author == &quot;Author2&quot;'>


<img height='50' src='Author-2-image-URL' width='50'/>


</b:if>

Change the values in blue, suit to your blog

Step 5 : It's all done.Click save

How It Works

 

The thing is Simple.The real code to add image with the post title is ;

<img height='50' src='Author--image-URL' width='50'/>

If you only add this code, then same image will be appearing for all posts.So we have to add the code to change the image on the basis of Author.You can use the below code to customize the 'widget 001' to appear only on the posts by the assigned Author (here Author 1)

<b:if cond='data:post.author == &quot;Author1&quot;'>
 

</b:if>

Remember to give the real name of author, appearing on the post as author.

If your blog have only one author, then this simple code is enough.just change tha Author--image-URL with your Avatar.

Insted of just avatar, you can use social bookmarking buttons also here ! 

NB : Using this hack may slows down you page, if you are using any images with bigger size.Better use PNG Images of small size and less graphics !