Add author box below posts

This writer box contains writer picture , release and online community details. It provides small release of the writer of the weblog to its guests below every publish. It will also helps in increasing your online community supporters. If anybody prefers your weblog site or your information then he/she can straight follow you on your public networking sites with the help of this gadget. In this way it will help you in getting good online community visibility.

Adding author box below posts in blogger

Step 1: In your blog’s template code find <div class=’post-footer-line post-footer-line-1′>
Step 2: Paste following code just below it and save the template.
Step 3: Modify red colored code according to your needs.

<style>

.wc-aboutauthor{
float:left;

padding:15px;
width:500px;

margin-bottom:15px;
border:1px solid #ccc;

background:url('http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png');
margin-top:15px;
color:#444444;

-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);

color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:-6px;
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
}
.wc-aboutauthor h2
{

}
.wc-aboutpic{

-webkit-transition:-webkit-transform .15s linear;
float:right;
margin:0 0 0 10px;
}
.wc-aboutpic img{
border:1px solid #999999;

-o-transition:-o-transform .15s linear;transition:transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);

padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);

.wc-aboutpic img:hover{
-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);
-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;
}

box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
background:#FFFFFF;
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);

transform:rotate(-1deg);
-webkit-transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
}
.wc-aboutsoc img
{
height:35px;

margin-right:30px;
margin-bottom:-13px;
}
.wc-aboutsoc  p
{
font:16px georgia;
color:#ffffff;
background:#b6e026;
display:inline;
border-radius:5px;
padding:5px;
}
</style>

<img alt='Author image' height='150' src='profile picture address' width='150'/>
<b:if cond='data:blog.pageType == "item"'>
<div class='wc-aboutauthor'>
<div class='wc-aboutpic'>


</div>

<h2 >About the Author :</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<div class='wc-aboutsoc'>

<p> Connect with him on : </p><a href='Facebook address'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Facebook'/></a>    <a href='Twitter address'> <img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' title='Twitter'/></a> <a href='Google plus address' > <img src='http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png' title='Google plus'/></a></div>
</div>

</b:if>