Add author photo with post_header on blogger for group blogs

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

Posted by Rajeel on September 12, 2009 in blogger, Tips & Hacks · 1 Comment

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Bloggeris a free blogging platform provided by Google.As it is free, itdoesn’t have much facilities like the WordPress blogs, which arepremium blogs.But Blogger gives the users the complete freedom tocustomize its code easily and just because of that we are able topractice most of all WP hacks in blogger also.Today, I’m telling youabout the hack to show the authors picture with the posttitle.This hack could be very useful for blogs running Guest Posts andGroup blogs.See the screenshot i took by enabling this hack in myblog.But.I had again disabled this hack as my blog has only one authorand there is no reason in putting my Avatar on all pages, which is notat 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

Now Add this code just before the

<b:if cond=’data:post.author == “Author1“‘>

<img height=’50′ src=’Author-1-image-URL‘ width=’50′/>

<b:if cond=’data:post.author == “Author2“‘>

<img height=’50′ src=’Author-2-image-URL‘ width=’50′/>

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′/>

Ifyou only add this code, then same image will be appearing for allposts.So we have to add the code to change the image on the basis ofAuthor.You can use the below code to customize the ‘widget 001′ toappear only on the posts by the assigned Author (here Author 1)

<b:if cond=’data:post.author == “Author1“‘>

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 imageswith bigger size.Better use PNG Images of small size and less graphics !

Rajeel
I think you all are familier with me. hmm... You may be or not, let me tell. I'm Rajeel, a teen blogger from India who loves computers, sports, internet and all other kind of tech stuffs. I love to call myself as the 'TeeN GeeK'

One Response to “Add Author photo on blog posts – Customize blogger for group blogging”

Mohsin Patel says:

September 13, 2009 at 1:39 pm

hey rajeel ..nice tutorial for blogger users to display author image ..!!

but wht about me ..i m on wordpresss ??

i want to display author image on

http://knowbest.info

Reply