USEFUL TRICKS- InVaDeR: ADD AUTHOR BIO WIDGET AT BOTTOM OF EACH POST

Bloggers are increasing day by day with new blog concepts. To show the content owner detail their is no widget provided by blogger so here is the proper method how you can attach Author/ Admin Bio Box after every post.

The main things that this widget takes your Gravatar profile picture so you don't need to upload any other photo. With the help of this, it look like a pro author widget. As you know, Blogger updates guest author features so I am also working on it for guest blogger but still you can use it in your blog.

Steps to add Author Bio Profile widget

Go to Blogger->Design->Edit HTML

Backup your template

Expand Widget Templates

Search for the following code

<div class='post-footer-line post-footer-line-1'>

Just below it paste the following code

<style type="text/css">
#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:100%; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }
    #author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc; }
        #author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px
#CCC; padding:3px;}
        #author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
        #author-info h5 {color:#666; text-transform:none; font-size:12px; letter-spacing:0; font-family: Georgia;}
        #author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}
        * { margin:0; padding:0;}
#author-connect{width:21%; float:right; margin-right:8%; }
a.gplus-s{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXVdIYWFM5eiBD1T95_tyPbt164Tb5JwUk_8TFJucVNTF05gMmMCLPtE7sZj1UQf69MjFeXUSZKUbL7XqVXGfQh1T_PAQSjfzEZuaD60QXtdAek06VfUuyErzhoNiUnXWxSdbzgQlCIMVT/s1600/gp-icon.png") no-repeat 0 0px; color: #666; font-weight: bold;margin: 5px 0px; padding: 0 20px;text-decoration: none;}

</style>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "Author Name"'>
<div id="postauthor">
<div id="author-info">
<img alt='' src='http://www.gravatar.com/avatar/8619b5a3d8adc89e68ea2ec07d7d6838?s=80&d=&r=G' height='80' width='80' /><h6 style="font:Georgia">Article by <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<h5>AuthorName has Written Many Useful Articles.</h5>
<p>If you like This post, you can follow TopBloggerTricks on <strong> <a href="http://twitter.com/TopBloggerTricks" rel="nofollow" >Twitter </a> </strong>. Subscribe to <strong> TopBloggerTricks feed via <a href="http://feeds.feedburner.com/TopBloggerTrickstk" rel="nofollow" >RSS</a> or <a href="http://feedburner.google.com/fb/a/mailverify?uri=TopBloggerTrickstk&loc=en_US" rel="nofollow" > EMAIL </a> </strong>to receive instant updates.</p></div>
<div id="author-connect">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTopBloggerTricks&send=false&layout=button_count&width=120&show_faces=false&action=like&colorscheme=light&font&height=21&appId=230688610312045" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>
<a href="https://twitter.com/TopBloggerTricks" class="twitter-follow-button" data-show-count="false" data-size="small">Follow @TopBloggerTricks</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a href="https://plus.google.com/118121786688701820900" target="_blank" rel="nofollo" class="gplus-s" >Google</a></div></div>
</b:if>
</b:if>