How to add beautiful author box widget to blogger

Summary: This useful article teaches you that how you add author box widget in free blog blogger really author box in post footer makes your blog more professional and you contents looks in beautiful style. 

By this useful and important article you teach that how you add Author box widget in free blog blogger. One day my friend came to my home to meet me after long time he is also having lot of blogger blogs and he questioned me that we are using blogger blog there is no facility to add author box widget but Wordpress blog post looking very beautiful along with author introduction and picture in the footer of post. This time I have said to my friend that this is very easy and simple really he was in wonder and said that it is possible. I said yes so I have made article and think that I would share it with other friends and visitors.  I have also looked that lot of blogs have an exacting page or text box in footer to show something about the blogger. I think an Author box in post footer make your blog more professional. You may be thinking of that why I do not inserting an author box in post footer.  Anyway I powerfully supposed and once again force that a nice author box under the post footer make your blog more professional and also you add a twitter or facebook link that would be helpfully for increasing follower and fan. Now I will guide you step by step how you add Author box widget footer of the free blog blogger post really it is very popular. 

1.    Do not hurry up please first go to www.blogger.com and then open your blogger Dashboard after that  go to Design and then Edit HTML. Now you have complete this procedure and now find the  bellow code  press  Ctrl + F command in your blogger template and cut paste the following code with carefully.  After doing this please keep backup of your blog in safe place of your Computer.

]]></b:skin>

2.  Now see the code below copy and paste it before the above code.

.authbio{
color: #666;
 font-weight: normal;
 font-size:0.9em;
 background: #fff;
 border: 1px solid #ccc;
 width: 540px;
 padding: 15px;
 margin-bottom:25px;
 }
 .authbio a{
 text-decoration:underline;
 }
 img.alignleft {
 float:left;
 background-color: #c4e3e0;
 border:1px solid #c4e3e0;
 padding: 5px;
 margin-left:2px;
 margin-top:0px;
 margin-bottom:25px;
 margin-right:12px;
 }

3. I think you have done well the above code and now search for the following text code  in your blogger template through Ctr+F command.

<data:post.body/>

 4.  This is very important that look at the following code with carefully and insert after the above text 

<div class="authbio">
 <div style="float: left;">
 <img alt="" src=" http://i.imgur.com/zAEgds.jpg " />
 </div>
 <h1>
 GM Qazi</h1>
Hardware and Software Engineer and also you like facebook, twitter or linkdin profile anything you want </div>

5.  Now go to http://imgur.com/  and make your picture link and replace  the red color link with your image link and amend your profile detail in the above code.  Finally save it and see that how it look like. 

This article will be very useful for new blogger owners and others, if you like it  or suggest me  please leave your comments.