About The Author Widget For Blogger - V2

You will found a lot of Wordpress blogs that include an "About the Author " box/widget below every blog post. So, I thought why not provide the same for the blogger/blogspot blogs.We previously gave about the author widget for blogger.And after making some changes we are publishing second version of about the author widget.
In this version we make this widget simple but attractive.You can edit this widget very simply by just changing the CSS values.For making these changes you can use our HTML Editor.Take a preview on widget.

Now lets see how to add this widget to blogger blogs.

How To Add About The Author Widget To Blogger?

You can add this widget in simple two steps.Just follow them carefully.

Step 1 - Adding the CSS

• Go to Blogger Dashboard > Design > Edit HTML.
• Backup/Download your template.
• Search for ]]></b:skin>
• Add below code just above  ]]></b:skin>
• Save your template.

.author_info {
 float: left;
 width: 520px;
 padding: 10px;
 border: 1px solid #2EFE2E;
 margin-bottom: 15px;
 margin-top: 15px;
 background: #E0F8E0;
        font-family:verdana;
}
.author_info h3 {
 margin-bottom: 10px;
        font-family:consolas;
}
.author_photo {
 float: right;
 margin: 15 0 0 10px;
}
.author_photo img {
 border: 1px solid #666;
}

Step 2 - Adding the HTML

• Now again move back Edit HTML page.
• Tick expand widget templates checkbox.
• Find <div class='post-footer-line post-footer-line-1'/>
  
• Paste below code just below of  <div class='post-footer-line post-footer-line-1'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHrKXDdELHAUZTvWReJK4Ff2G9Tx-RtN1tFiUIps-ZI4afKTdqeODbzigXbb1V51wg94XKd3ykSWdHzEaUt1-49G5D51VkIG0uTHSPhyftndhtnlLdc2cLogIuPC9XdvqcfHfc02iPXk0S/h120/man_cartoon.jpg'/ height="120" width="120"></div>
                    <h3>This post was written by:</h3>                 

                                        <p><a href='http://helperblogger.com' title='Posts by Rahul'>Rahul Ippar</a> - who has written 120 posts on<a href='http://helperblogger.com'> HelperBlogger</a></p>

                    <p>Rahul Ippar is a professional blogger and web developer. Follow him on <a href='http://twitter.com/helperblogger'>Twitter</a> or <a href='http://www.facebook.com/'>Facebook.</a><br style='clear:both;'/></p>
                   </div>

</b:if>

Edit your information according to your needs and save the template.

I hope you enjoyed this post!! For any help, please feel free to leave your comments here!! I will sort out any of the issue with respect to this hack. Also, try spreading this post to your friends if you feel it is worth spreading :)