Author Information Widget for Blogger

We all had seen author info widget below each post on WordPress blogs, but actually its not much seen in Blogger. Basically Blogger is not a platform for beginners, its a kinda platform to blog. There are endless possibilities to makes your Blogger blog look like a WordPress blog. So to make that note true, today I am going to teach you how to add author info widget, below every blog post.

Updated script with author image inside the widget

author info widget for blogger

Step 1: Login to your Blogger dashboard and navigate to Layout > Edit HTML and check the box of expand widget templates. Now search for the code  ]]></b:skin> once you find it, replace the code with the below code

.author_info {
	float: left;
	width: 573px;
	padding: 10px;
	border: 1px solid #ccc;
	margin-bottom: 15px;
	margin-top: 15px;
	background: #eee;
.author_info h3 {
	margin-bottom: 10px;
.author_photo {
	float: right;
	margin: 0 0 0 10px;
.author_photo img {
	border: 1px solid #666;

Step 2: Now we are going to add the div part of the author info widget. To do that search for the code <div class='post-footer-line post-footer-line-1'> and paste the below code after <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src=''/></div>
                    <h3>This post was written by:</h3>                	

                                        <p><a href='' title='Posts by Franklin'>Franklin Manuel</a> - who has written 66 posts on <a href=''>Bloggermint</a>.</p>

                    <p>Franklin Manuel is a professional blogger and web developer. Follow him on <a href=''>Twitter</a> or <a href=''>email him</a><br style='clear:both;'/></p>


Edit your information according to your needs and you all set done, check your blog to see the changes.

March 21, 2010. This entry was posted in Blogger, Tutorials and tagged . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

56 Responses so far!

  1. Pingback: Tolya

  2. great website, really found this site interesting and will visit again

  3. @Seo service london – Thanks and I will try my best to provide more useful tips

  4. I’ve recently started a blog, the information you provide on this site has helped me tremendously. Thank you for all of your time & work.

  5. Thanks for this tutorial.

    How to show image author in this widget?

  6. I can’t find this part of the code. [I have Blogger]

    Can I paste BELOW this: or ABOVE

  7. @Ceci – Use postable to insert codes on comments, just search google for postable

  8. @Ebnat – Just add a image link within the div part. I have included the css part for displaying author image already.

  9. Pingback: Daily Edition, A Premium Blogger Template | Bloggermint

  10. Well this is definitely much simpler than what I came up with Franklin 😀 Very nice ! Cheers :)
    .-= Mia´s last blog ..Review : The Webs Best New Up & Coming Web Designers =-.

  11. @Mia – Nice to see your comments and yours too looks good :)

  12. Thanks Franklin!
    But i’ve one question: if we’ve more than One Author in a Blog,what’s the way to add the 2nd author box??

  13. @Attalib – I am working on it, but basically the code which I offered doesn’t do that. But there is another way, you can replicate the CSS and div part with another name and make it load with a conditional statement for a particular author’s page.

  14. If we use this code, but we also use the Blogger code to create a cut in the post (i.e. ), how do we get the author box to appear AFTER that cut instead of simply at the bottom of every post?

  15. @Matthew – I am not getting what you mean…you mean to say after the read more of every post?

  16. is a great poster, I always like to read what you encreve, on my site has also ums content and some news legal . BJs ,

  17. yeh.. it was really a good addon for blog owners and thanks for providing the code.. indeed very useful tip..!
    .-= telugu songs free download´s last blog ..Komaram Puli MP3 Songs Free Download 2010 =-.

  18. great post. i would love to have this on my blog but i can’t find in my template. this may be the same problem cici had but i didn’t understand your response to her.

    thanks for putting all this great stuff out in the world. i appreciate it.

  19. @This is not – Search for this code <data:post.body/> and paste the code in the step2.

  20. thanks so much. i got it to work. feel free to check it out.

  21. Hi Frank, brilliant tutorial there. Im a believer in blogger over WP for few reason and is great to see people making blogger better.

    Just checking have you done with the multi author code yet? It would really be a great help!

  22. @Vin – Yes, I am try to release for multi author, but got busy with other stuff. Will keep it posted once I finish it.

    Finally Blogger is an awesome blogging platform.

  23. @Suraz – Thanks for the tip and well done.

  24. Yes, Blogger is really making an effort to be more customizable than it was in the past with capabilities like this one you mention. It’s clearly trying to attract bloggers who would otherwise go to WordPress. I think they’re succeeding.

    (That said, I don’t think they’ll ever overtake WordPress!)
    .-= Matt´s last blog ..List of Aussie directories =-.

  25. That’s an awesome tutorial!! I have implemented it on my blog, and looks great. Thanks for that :)

    How do I reduce the height of the Author Box. I was able to reduce the width from the CSS section, but couldn’t find a way to reduce height. It looks very big on my blog, and I have to write all the stuff in it so that it doesn’t look empty.

  26. Great info…i was wondering how to add author info….it has surely helped me a lot….thanks for sharing :)

  27. Thanks for this great feature for blogger. Now its in my blog.

  28. Can you please tell me how to bring the author pic in line with the “This post was written by:”. If you check out a post on my blog you’ll see that the author pic is not aligned with the author info. Looks a little odd.

  29. Pingback: 10 Essential Blogger Plugins and Blogger Widgets | Bloggermint

  30. Hey frank. Thanks for that post. but I have a problem with the width. Only a potion of my picture was showed up. Help me with this please.

  31. Thanks so much! I had to adjust the width to fit my blog but after it was done I was happy with it!

  32. Thanx!! This was damn usefull!!
    Thank You Franklin Manuel.. :)

  33. Have you figured out to have multiple authors with this widget yet?

  34. Franklin Manuel

  35. Sorry it doesn’t work in my blog

    plz correct the error and reply soon..

  36. how can i add different author info box for different author

  37. I use yours Mash 2 Template in this blog
    how can i change the author box?
    It’s urgent.

  38. Pingback: Best plugins and widgets for Blogger : | Invesmo

  39. I was wondering will it work if more than 1 person blogs on my blog?

  40. Very nice and interesting have great posts on this blog i found.

  41. Great website …. Great tips and tricks for blogger …. keep the good work up …

  42. this could be perfect if there’s a listing of the post. :)

  43. very good… thanks

  44. Thanks! Thanks for the tip man!

  45. Hi,
    Its interesting. But I’m searching for a related posts widget for blogger. Some thing which is good looking like your related posts widget. I’m using Mash2 and there in code there is code for related posts but I can’t see any widget working there! so I deleted that code and searching for new :p

  46. it didnt worked for me

  47. thanks for this widget.

  48. Thank you! :) its indeed very useful

  49. Really awesome gonna try it your widgets are very useful.. :)

  50. Sorry, there was an error in showing HTML code use the below codes

    <b:if cond=' == "Author1"'>
    Code goes here...

    <b:if cond=' == "Author2"'>
    Code goes here...

    <b:if cond=' == "Author3"'>
    Code goes here...

  51. @paul.. it works.. but still tweaking it a little more to fit my blog…
    thanks for the tip…:))

Leave a Reply

Your email address will not be published. Required fields are marked *