beautiful and simple about the author box below every post in blogger

Today i,m going to tell you that how to add beautiful author box below every post . author information is one of the best way to increase social media strategy .means it is a best widget in which you can add your social media profiles and you can add also about your self so peoples can know more about you .it make your post body more beautiful.

Widget Demo

Installation

Goto blogger dashboard
then goto template tab and edit html
Now click expand widget template
Then find ]]></b:skin>
Now paste below code just above ]]></b:skin>

.author_info { float: right; width: 573px; padding: 10px; border: 1px solid #e0e0e0; margin-bottom: 15px; margin-top: 15px; background: #eee; } .author_info h3 { margin-bottom: 10px; } .author_photo { float: left; margin: 0 0 0 10px; } .author_photo img { margin-right: 10px; border: 1px solid #e0e0e0; }

Now search for <div class='post-footer-line post-footer-line-1'>
and paste below code just below <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == "item"'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://lh3.googleusercontent.com/-AEjwZp9w37s/UNSIMPc2PcI/AAAAAAAAA7M/JjHAI3AjFFI/h120/images.jpeg'/></div>
<h3>About the Author</h3> This article is written by: <b>YourName</b> - who has already written <b>30</b> articles for <a href='YOUR-BLOG-URL'>YOUR-BLOG-NAME</a> YourName is a professional web designer. Catch him on <a href='http://twitter.com/yourtwitterID'>Twitter</a>, <a href='Your Facebook URL'>Facebook</a> or <a href='your e mail ID'>email</a> him <br> </br> <br> </br>
YourName's <a href='your web url'>Website</a><br style='clear:both;'/>
</div>
</b:if>