HOW TO ADD AUTHOR WIDGET TO YOUR BLOG

OK everything seems to fine up to now. But When I have been reading many articles on my friends blogs and much more. I came to know they are keeping their widget regarding About the Author as your are seeing below this post. Ok after an study regarding my template then I came to know how to insert the code into my html and make my “About The Author “ visible under my posts. You need not worry about your knowledge regarding html. Ok before getting into tutorial. I would like you to stay connected with me in my Facebook , Twitter and also Google+ .

Ok. Getting into tutorial….
First opend your template. Inorder to do this . Just goto www.blogger.com sign in. Then click you site if you have more than one. Then left click Template based on new blogger version. Then click on edit template. Make sure you always back up your data. If anything wrong happens you can get back your old one safely.
Quick link :    Template –> Edit HTML –>  Make sure you ticked  Expand Widget Template.
Then you need find the below shown text. 

]]></b:skin>

Hope you got it. Then copy the below code and paste In the above “ ]]></b:skin> “ 

.dc-about-author-containter h3, .dc-about-author-containter p{
margin:0 0 10px 0;
padding:0;
}
.dc-about-author-containter{
background: #f2f7fc;
border: 1px solid #000;
clear: both;
margin: 20px 0;
overflow: hidden;
padding: 20px;
}
.dc-about-author-pic{
background: #fff;
border: 1px solid #e7e7e7;
float: left;
height: 100px;
width: 100px;
margin: 0 -122px 0 0;
padding: 10px;
}
.dc-about-author-pic img{
width: 100px;
}
.dc-about-author-text{
float: left;
margin: 0 0 0 140px;
}

After this. You have one more step and the code is just below. 

<!--REMOVING THE WEBSITE NAME IS NOT PERMITTED-->
<!--WEHELPALWAYS.BLOGSPOT.IN AUTHOR WIDGET STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;TYPE YOUR NAME HERE&quot;'>
<div class='dc-about-author-containter' style='background-color: #ffffff;'><div class='dc-about-author-pic'><img alt='' class='avatar avatar-100 photo' height='100' src='YOUR-PHOTO-URL' width='100'/></div><div class='dc-about-author-text'><h3>About the Author</h3>
<p>ABOUTH THE AUTHOR YOUR DETAIL TYPE HERE</p>
<div align='right'><br/><br/>
<a href='http://wehelpalways.blogspot.com/2013/03/How-To-Add-Author-Widget-To-Your-Blog.html';#; target='blank' style='text-decoration:none;font-size:70%;'>[Add this]
</a></div></div></div>
</b:if>
</b:if>
<!--WEHELPALWAYS.BLOGSPOT.IN AUTHOR WIDGET ENDS-->
<!--REMOVING THE WEBSITE NAME IS NOT PERMITTED-->

Hope your are done then before saving your template you need to change the below mentioned items : 

1. TYPE YOUR NAME HERE    :  REPLACE THIS WITH YOUR NAME
2. YOUR-PHOTO-URL              : ENTER THE URL OF PHOTO
3. ABOUTH THE AUTHOR YOUR DETAIL TYPE HERE : ENTER THE TEXT YOU WANT TO DISPLAY BESIDE YOU PIC.

The below is the widget it is the sample to this tutorial. 

NOTE : THE WIDGET IS SOMEWHAT DIFFERENT WHEN COMPARED TO THE TUTORAIL IT IS BECAUSE I  EDITED THE COLOUR AND MORE. YOU CAN DO IT ON YOU OWN. 

Let me know whether this helped you or not.. 
Comment below.