Add About The Author Widget Just Below Of Your Posts - V1 - Helper Blogger

Blogger Widgets | Templates | Tutorials


Thursday, 8 March 2012

Add About The Author Widget Just Below Of Your Posts - V1

The author is the heart and soul of a blog. It is the author who creates a beautiful blog that shares knowledge and other wonderful things with other people. Its natural that people are curious to know more about the person behind the blog who writes the posts. At times the blog visitors want to talk with the author and discuss about the things that he blogs. At such times, the "About The Author" widget is very useful for both the Author and also the readers.In this post I will explain how to add About the author widget to a Blogger/Blogspot blog.I will try to keep it as simple as possible so that it becomes easy for everyone to add it to their blog.

Widget Preview

How To Add This Widget To Blogger?

We will add this widget in two steps :

  1. Adding the CSS
  2. Adding the HTML.
1. Adding The CSS

  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. Backup/Download full template.
  3. Now find for ]]></b:skin>
  4. Add below code just above ]]></b:skin>
  5. Save your template.

#authorbox {
background:#333 url( no-repeat scroll left top;
margin:5px auto;
padding:40px 10px 10px 20px;
#authorbox:hover {
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
#authorbox h4 {
padding:10px 10px 5px;
#authorbox .author_small {
#authorbox img {
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(1deg);
-moz-transform: rotate(1deg);
border:4px solid #ff4408;
#authorbox img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(+9deg);
-moz-transform: rotate(-1deg);
#authorbox p {
padding:0 10px 10px;
#authorbox a {

You can customize this widget by changing the above CSS values.For making this changes you can use our HTML Editor or HEX Color Code Generator.

2. Adding The HTML

  1. Now again back to Edit HTML page.
  2. Tick the expand widget template checkbox.
  3. Now find


paste below code just below it.

<div id="authorbox">       
<img alt="" src="" height="100" width="100"></img>
<h4><a href="" title="Posts by Rahul Ippar" rel="author">Posts by Rahul Ippar</a></h4>
 <p>Hi,I my name is Rahul Ippar. I am author of this blog.I love blogging and I like to share things which I know.</p> <p>Follow Me On <a href="">Twitter</a> Or <a href="">Facebook</a></p></div>

You can change all the part of the code in bold according to your needs. Now click on Save Template and check any post in your blog. Remember that this widget will appear only on Post Pages and not on the Home Page.

If you found this post useful then please share it with your friends and if you are facing any problem, then use the comments section below.


  1. Replies
    1. this my error help Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
      XML error message: The element type "img" must be terminated by the matching end-tag

    2. I have updated the post.Try now...

  2. This comment has been removed by a blog administrator.

  3. rahul ji i have problem when i am insert jump break in post then in every post coming the about the author tell me plz

  4. itz not working man in my blog


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM