Elegant And Stylish Author's Bio Box For Blogger Below Each Post To Increase Audience Trust

About The Widget

Before the introduction to the widget I would like to tell you that the next google update Panda 4.0 is close and there are rumours that penalty in this update would be based on the page creation,like contact me,about me page etc. so I personally recommend you to add an about me page or this about me widget to your blog because google wants that the author's should be open and familiar to their audience.I will be soon writing about this,briefly describing it's causes and ways to defend yourself.I have also added this widget to my blog and I also recommend you.You can see it's live demo at the bottom of the post.

Steps To Add It:-

• Go to Template tab of your blog
• Click on Edit Html Box
• Search For </head> tag in your html and add the following code above it:-

.technopcareaauthor_info{
float:center;
width:645px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:#eee;color:#000;
}
.technopcareaauthor_info:hover{
background:#eee;
border:1px solid #ccc;
-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);
}
.technopcareaauthor_info h3{
color:#000;
margin-bottom:10px;
}
.technopcareaauthor_info h3:hover{
border : 1px solid #EEEEEE;
-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);
}
.technopcareaauthor_photo{
float:right;
margin:0 0 0 10px;
}
.technopcareaauthor_photo img{
border:1px solid #666;
-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(+2deg);
-moz-transform:rotate(+2deg);-ms-transform:rotate(+2deg);
-o-transform:rotate(+2deg);transform:rotate(+2deg);float:left;
}
.technopcareaauthor_photo img:hover{
background:#FFFFFF;
border : 1px solid #EEEEEE;
-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);
}
ul.technopcareasocial{
list-style:none;
margin:10px;
overflow:hidden;
}
.technopcareasocial li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.technopcareasocial li a{
display:block;
width:40px;
height:40px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vRdfLp-cDUgIFKu5BwGGcgmqQM3jwVlu1atAtrdkNsXbGMCB20zMDFH40bJACAqxVQCHJwPfCCkkmqoGWYe__cNg8s8u_nMcdBaqI6X9Gl4J0XCZQI0RBCRzU1UepryTVfVxN6GAVegO/s1600/social.png") no-repeat transparent;
text-indent:-99999em !important;
}
.technopcareasocial li a:hover{
padding:0 !important;
}
.technopcareasocial li.rssicon a{
background-position:0 0;
}
.technopcareasocial li.twicon a{
background-position:-50px 0;
}
.technopcareasocial li.fbicon a{
background-position:-100px 0;
}
.technopcareasocial li.gicon a{
background-position:-150px 0;
}
.technopcareasocial li.rssicon a:hover{
background-position:0 -50px;
}
.technopcareasocial li.twicon a:hover{
background-position:-50px -50px;
}
.technopcareasocial li.fbicon a:hover{
background-position:-100px -50px;
}
.technopcareasocial li.gicon a:hover{
background-position:-150px -50px;
}
.technopcarealinediv{
margin-top:25px;
height:0px;
clear:both;
display:block;
border-top:1px solid #fefefe;
border-bottom:1px solid #CCCCCC;
}
.technopcareaemailbutton{
background:#f7f8f9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.technopcareaemailbutton:hover{
background:#f1f1f1;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
text-decoration:none !important;
}
.technopcareaemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.technopcareaemailform{
position:relative;
width:250px;
margin:0 auto;
}
.technopcareaemailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.technopcareaemailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.technopcareaemailbutton{
padding:8px !important;
}
.technopcareaemailform, .technopcareaemailinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}

• Now add the following set of codes above the place where you want this box to appear.For example say <data:post.body/> or post-footer-line post-footer-line-1:-

<!--Author's bio by http://technopcarea.blogspot.com/ starts-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='technopcareaauthor_info'>
<div class='technopcareaauthor_photo'>
<img alt='author' height='150' src='your-image-url' width='150'/>
</div>
  <h2>This article is written by:<a href='your-googleplus-url'>Your name</a></h2>
<p>Your brief bio here</p>
<a id='dontremove' href='http://technopcarea.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNAdKeCm0UixFtd1uhT11VxjqJWqrjgBMVhNwGI5HdecWuJeMxINSfZPWuo9_U0zNL9A1_pi_cXIRkoVZXqpC4XK1-RH6g_OOjAmAOvf3fd2WTUR8TuqteNnbPaAG0pFsIdxTAiNM8k24/s194-p-no/' alt='credit' title='credit' height='1px' width='1px' /></a> <div class='technopcarealinediv'/>
<div class='technopcareaemail'>
<small style='text-align:center;'>Get Latest Article Into Your Inbox!</small>
<form action='http://feedburner.google.com/fb/a/mailverify' class='technopcareaemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=your-feedburner-id&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Your-feedburner-id'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='technopcareaemailinput' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
 <input class='technopcareaemailbutton' title='' type='submit' value='SignUp'/>
</form>
</div>
<ul class='technopcareasocial'>
<li class='rssicon'>
<a href='http://feeds.feedburner.com/your-feedburner-id'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/your-twitter-url'>Twitter</a>
</li><li class='fbicon'>
<a href='https://www.facebook.com/your-facebook-page-url'>FaceBook</a>
</li><li class='gicon'>
<a href='https://plus.google.com/your-google+-url'>Google +</a>
</li>
</ul>
</div>
</b:if>

<!--Author's bio by http://technopcarea.blogspot.com/ ends-->

• Now replace highlighted feedburner,facebook,twitter and google+ url with your's

Final Words

This widget is recommended by me and I personally use it to protect myself from the new google update and because it's similar to all other widgets as this also doesn't increases loading time of the blog.