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(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;
width:auto;
overflow:hidden;
color:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin:5px auto;
padding:40px 10px 10px 20px;
font-family:verdana;
}
#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 {
font-size:16px;
color:#fff;
clear:none;
margin:0;
padding:10px 10px 5px;
}
#authorbox .author_small {
font-style:italic;
}
#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);
float:left;
border:4px solid #ff4408;
margin:10px;
padding:0;
}
#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 {
color:#ffffff;
margin:0;
padding:0 10px 10px;
}
#authorbox a {
color:#ff4408;
text-decoration:none;
}

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

<data:post.body/>

paste below code just below it.

<div id="authorbox">       
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSjEtjCiazsl45AL3GpV4UHQRmjhHli3OuaeiDRPr2crC0CO8BVjdL3RhmO8vYmjz3EiTzsY__REKwG3Qwszzt-iQBAzkYDFnu9NxMM1PE9_ha4AxIPmDxfRZezsGqg1dkQQKrF-gLlt3k/h120/man_cartoon.jpg" height="100" width="100"></img>
<h4><a href="http://www.helperblogger.com/" 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="http://www.twitter.com/helperblogger">Twitter</a> Or <a href="http://www.facebook.com/btsnts">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.