Stylish CSS Author Box Widget for Blogger

Author Box is a Box below posts which shows the Author Picture,Contact Address of Social Sites, and Few Lines About the Author.

 How it Actually Looks Below Posts?

1. Go To Blogger > Template
2. Click Edit HTML
3. Search for 
<div class='post-footer-line post-footer-line-1'>


4. And Paste the Below Code Just Below the Above Code and Save the Template.

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM6A6Tm7QtlnLqDF7S4OQPNdIaIO-CWRjNNah4ccocGMp0xoStLqn3Z5smauDVLj_0fZMuaTp9gatjZ5DymWDjxEABjkJFJl1Oj6WgrtzTqliYePvd1rO_DIl3ZeD4d1ZBxiK_zRXy1tN9/s1600/Parvej+Alam+%252849%2529+copy.png' width='150'/>
</div>
<h2 >About the Author :</h2>
<p>My name is Parvej Alam. Founder of Gulpa Tutorial Ltd. I am a student of JNU Calcutta branch of the BCA is studying in 3rd year.
He loves to share his thoughts with others like helping others 
in the niche of HTML,CSS,JavaScript, C Programming, Microsoft Excel Formula and other Blogger and Computer Tips. 
Currently he is living in Malda (West Bengal). You can find him on various Social Media Networks given Below.</p>
<div class='wc-aboutsoc'>
<p> Connect with Me on : </p><a href='https://www.facebook.com/parvej4u2'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' 
title='Facebook'/></a>    <a href=https://www.twitter.com/parvej4u2'> <img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' 
title='Twitter'/></a> <a href='https://plus.google.com/u/0/114312941188673148368' > <img src='http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png' title='Google plus'/></a></div>
</div>
</b:if>

1. Replace the Red Color Text with your Picture Link
2. Replace the Yellow Color Text About You
3. Replace the Green Color Text with the Facebook URL, Twitter URL, Google + URL Respectively

Author:

My name is Parvej Alam. Founder of Gulpa Tutorial Ltd. I am a student of JNU Calcutta branch of the BCA is studying in 3rd year.

He loves to share his thoughts with others like helping others 

in the niche of HTML,CSS,JavaScript, C Programming, Microsoft Excel Formula and other Blogger and Computer Tips. 

Currently he is living in Malda (West Bengal). You can find him on various Social Media Networks given Below.

• Tweet
• Share
• Share
• Share
• Share