Add Author Box in Blogger | Script

 

Step 1.. Your blog’s template code find <div class='post-footer-line post-footer-line-1'>

Step 2.. Paste the following code just below it and save the template.

            Note: In the following code change Green color code with your social network addresses,
            Red color code with your profile picture address and Purple color code
            with your introduction.

<style>
.wc-aboutauthor{
float:left;
width:500px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:url('http://3.bp.blogspot.com/

-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/

s1600/backgrounds.png');
color:#444444;
-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 10px  rgba(0, 0, 0, .3);
}
.wc-aboutauthor h2
{
color:#b6e026;font-family:Helvetica,Arial;font-

weight:bold;text-shadow:#64665b 0px 1px 1px;font-

size:28px;margin-bottom:-6px;

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

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);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate

(+5deg);
-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);
-o-transform:rotate(+5deg);transform:rotate(+5deg);float:

left;
}
.wc-aboutpic img:hover{
background:#FFFFFF;
-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 10px  rgba(0, 0, 0, .3);
-webkit-transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
transform:rotate(-1deg);
}
.wc-aboutsoc img
{
height:35px;
margin-bottom:-13px;
}
.wc-aboutsoc  p
{
font:16px georgia;
color:#ffffff;
background:#b6e026;
display:inline;
border-radius:5px;
padding:5px;
margin-right:30px;
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div class='wc-aboutauthor'>
<div class='wc-aboutpic'>
<img alt='Author image' height='150' src=

'profile picture address' width='150'/>
</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 

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