Monday, March 26, 2012

Add Author Bio Widget at Bottom of Each Post for Blogger

I am happy to develop this author bio profile widget for bloggers. You have seen this widget in many WordPress blogs but implementing on blogger is very difficult. I was busy in this widget for last three days to give a cool and stylish look. Now, I have developed this author bio widget for your blogger blog. As my coding skills, i has tried to minimized the style sheet code.


The main things that this widget takes your Gravatar profile picture so you don`t need to upload any other photo. With help of this, Its 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 it in your blog.


Steps to add Author Bio Profile widget

  1. Go to  Blogger > Design > Edit HTML
  2. Backup your template
  3. Expand Widget Templates 
  4. Search for the following code
<div class='post-footer-line post-footer-line-1'>
     5. 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("http://3.bp.blogspot.com/-YDfIvg3KYeE/T3AvpW2Gy0I/AAAAAAAABKw/zPiGkaX1V4I/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 == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Author Name&quot;'>
<div id="postauthor">
<div id="author-info">
 <img alt='' src='http://www.gravatar.com/avatar/8619b5a3d8adc89e68ea2ec07d7d6838?s=80&amp;d=&amp;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 ProBloggingTools on <strong> <a href="http://twitter.com/ProbloggingTool" rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> ProBloggingTool feed via <a href="http://feeds.feedburner.com/probloggingtool" rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=probloggingtool&amp;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%2Fprobloggingtools&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=230688610312045" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>         
<a href="https://twitter.com/ProBloggingTool" class="twitter-follow-button" data-show-count="false" data-size="small">Follow @ProBloggingTool</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/114529039105949094770" target="_blank" rel="nofollo" class="gplus-s" >Google</a></div></div>
</b:if>
</b:if>
    6. Edit Author Name with your Eject Profile Name. (Important )
    7. Edit RSS URL, E-mail URl and Twitter ID.
    8. Edit all Social Media Links (Dark Words) with yours.
    9. Change your Gravatar Profile Picture URL
   10. Save template and Visit your blog.

Credits

This Author Bio Widget is Fully Developed by PBT. If you want to share this with your readers, you have to give credits to this blog by attach a link.

Need Help?

If you want further assistance, feel free to ask here by do comment. I am happy to  help you. Do you have any other tools and widget , you can share it with our readers.

5 comments :

  1. how to add my picture in that?? Also how to add bio for guest posts?

    ReplyDelete
  2. @Mohamed

    If you have profile on gravator.com then go to profile and fetch our pic URL, other register there.

    recently, Blogger has updated guest post author feature, i am working on it.

    ReplyDelete
  3. but i think this will gonna to show the admin bio even below the guest post.
    can we sort it out?

    ReplyDelete
    Replies
    1. Its will show only on the Author Post. I think you have to check out the condition. You must fill the actual author name in coding part then it will work perfect for admin.

      For author Post, go here http://www.probloggingtools.com/2012/03/guest-author-info-widget-below-blogger.html

      Delete

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...