Fancy Author Box Widget For Blogger

Fancy Author Box Widget is one of my favorite Blogger Widgets, I had always dream that I would make my blog like a professional blog, But I think I've done too much professional work on my blog.  Today We are going to learn How to Add A Fancy Author Box Widget For Blogger.

This widget is converted from Wordpress Fancy Author Widget which nearly costs 10$ [We don't support piracy, Help Developers to earn what they deserves] Today here I'm posting this Awesome Fancy Widget for Blogger. Thanks to Ramki Krishnan from www.crackroach.com for This widget.

As  We know Author Box are always been most effective tools for striking your personality on visitors or different media. More the attractive Author Box, Greater The Personalty Effect ! If you really want to make your personality impact better then you must need this author box on your blog !
You can check out the widget screenshot here in the following image.

Wanna try this awesome widget?

Its really easy to Install this widget on your blog might take upto only 5 minutes.
Before adding this widget make sure you should have a nice and professional picture of size 80x80 pixels and you must have your own Bio - Tag lines for adding them in this widget.

This widget is fully Multiple Purpose Widget, you can show your Bio on first tab, second tab displays your Twitter Followers or profile information, Third tab is integrated for your Facebook profile, your blog readers can easily follow you by it. In fourth one We have added a Google+ "Add To Circles" Button which makes any user to add you on Google+ easily, and the last one is specially optimized for your Blog Feed which shows your Blog's Last 3 Posts or Articles.

Now Are you interested for installing this Awesome Fancy Author Box for your blog? Try Now, Its too easy as I'v mentioned. 
Before doing anything make sure to backup your blog template [How to Backup Your Blog Template]
1. Go to Blogger > Layout > Click Add Gadget.
2. Select "HTML/Java Script" .
3. Copy the following code and just paste in it and hit save !

<script>
jQuery(document).ready(function(a){a(".ts-fab-tabs > div").hide();a(".ts-fab-tabs > div:first-child").show();a(".ts-fab-list li:first-child").addClass("active");a(".ts-fab-list li a").click(function(){a(this).closest(".ts-fab-wrapper").find("li").removeClass("active");a(this).parent().addClass("active");var b=a(this).attr("href");if(b.indexOf("#")!=-1){currentTabExp=b.split("#");b="#"+currentTabExp[1]}a(this).closest(".ts-fab-wrapper").find(".ts-fab-tabs > div").hide();a(b).show();return false})});</script>
<style>.ts-fab-wrapper{margin:0 0 2em;clear:both}.ts-fab-wrapper a{text-decoration:none!important}.ts-fab-wrapper img{border:none!important}.ts-fab-list{overflow:hidden;padding:0 0 0 5px!important;margin:0!important}.ts-fab-list li{display:block;float:left;list-style:none;margin:0 5px 0 0!important}.ts-fab-list li a{display:block;line-height:16px;height:16px;padding:8px 12px;background-color:#e9e9e9;border:1px solid #e9e9e9;border-bottom:none!important;text-decoration:none;font-size:13px;color:#333;font-weight:bold;outline:0;text-shadow:none!important;border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0}.ts-fab-list li a:hover{color:#333}.ts-fab-list li.active a{background-color:#333;color:#fff;border-color:#333}.ts-fab-list li a{background-image:url('http://www.pagetrafficbuzz.com/wp-content/plugins/fanciest-author-box/images/fab_tab_icons.png')}.ts-fab-list li.ts-fab-bio-link a{background-position:8px 8px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-bio-link.active a{background-position:-280px 8px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-twitter-link a{background-position:8px -42px;background-repeat:no-repeat;padding-left:35px}.ts-fab-list li.ts-fab-twitter-link.active a{background-position:-270px -42px;background-repeat:no-repeat;padding-left:35px}.ts-fab-list li.ts-fab-facebook-link a{background-position:8px -92px;background-repeat:no-repeat;padding-left:23px}.ts-fab-list li.ts-fab-facebook-link.active a{background-position:-284px -92px;background-repeat:no-repeat;padding-left:23px}.ts-fab-list li.ts-fab-googleplus-link a{background-position:8px -142px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-googleplus-link.active a{background-position:-276px -142px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-linkedin-link a{background-position:8px -242px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-linkedin-link.active a{background-position:-276px -242px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-latest-posts-link a{background-position:8px -192px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-latest-posts-link.active a{background-position:-280px -192px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-custom-link a,.ts-fab-list li.ts-fab-additional-link a{background-image:none!important}.ts-fab-widget .ts-fab-list li a,.ts-fab-icons-only .ts-fab-list li a{text-indent:-9999em;padding:8px 12px!important}.ts-fab-widget .ts-fab-list li.ts-fab-bio-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-bio-link a{width:4px}.ts-fab-widget .ts-fab-list li.ts-fab-twitter-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-twitter-link a{width:12px}.ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-googleplus-link a{width:8px}.ts-fab-widget .ts-fab-list li.ts-fab-linkedin-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-linkedin-link a{width:8px}.ts-fab-widget .ts-fab-list li.ts-fab-facebook-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-facebook-link a{width:0}.ts-fab-widget .ts-fab-list li.ts-fab-latest-posts-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-latest-posts-link a{width:4px}.ts-fab-widget .ts-fab-list li.ts-fab-custom-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-custom-link a{text-indent:0!important}.ts-fab-tab{display:none;border:2px solid #333;padding:12px;background:#fff;min-height:80px}.ts-fab-tab:after{content:'';display:table;clear:both}.ts-fab-tab:first-child{display:block}.ts-fab-widget .ts-fab-tab{padding:8px}.ts-fab-avatar{display:block;float:left;width:64px;height:64px}.ts-fab-no-float .ts-fab-avatar{float:none;margin:0 0 12px}.ts-fab-avatar img{display:block;border:none!important}.ts-fab-text{margin-left:104px;line-height:1.5}.ts-fab-no-float .ts-fab-text{margin-left:0}.ts-fab-header{margin-bottom:10px}.ts-fab-text h4{clear:none;font-size:18px;line-height:1!important;font-weight:bold;margin:0 0 .2em!important;line-height:1;padding:0}.ts-fab-description{font-size:12px}.ts-fab-follow{margin-top:10px}.ts-fab-latest{margin:0!important;padding:0!important}.ts-fab-latest li{list-style:none!important;line-height:1.1;margin:0 0 .6em!important}.ts-fab-latest li span,.ts-fab-twitter-time{font-size:12px}.latest-see-all{font-weight:normal}.ts-fab-wrapper iframe{margin-bottom:0!important}body.rtl .ts-fab-avatar{float:right}body.rtl .ts-fab-text{margin-left:0;margin-right:76px}body.rtl .ts-fab-list{padding:0 5px 0 0!important}body.rtl .ts-fab-list li{float:right;margin:0 0 0 5px!important}.fb_iframe_widget>span,.fb_iframe_widget>span iframe{min-height:64px!important}
</style>
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareEgg'/>
</div>
<a href="http://BloggerHero.com" title='Powered by BloggerHero'>BH</a>

4. After Saving the widget, Go to Dashboard > Template > Click Edit HTML.
5. Find <data:post.body/> by pressing CTRL+F and copy the following code and paste it below <data:post.body/>

<!-- Fanciest Author Box For Blogger from Crackroach and BloggerHero --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-16747'>
<ul class='ts-fab-list'>
<li class='ts-fab-bio-link'><a href='http://www.blogger.com/blogger.g?blogID=YOUR-BLOG-ID-HERE#ts-fab-bio-below-16747'>Bio</a></li>
<li class='ts-fab-twitter-link'><a href='http://www.blogger.com/blogger.g?blogID=YOUR-BLOG-ID-HERE#ts-fab-twitter-below-16747'>Twitter</a></li>
<li class='ts-fab-facebook-link'><a href='http://www.blogger.com/blogger.g?blogID=YOUR-BLOG-ID-HERE#ts-fab-facebook-below-16747'>Facebook</a></li>
<li class='ts-fab-googleplus-link'><a href='http://www.blogger.com/blogger.g?blogID=YOUR-BLOG-ID-HERE#ts-fab-googleplus-below-16747'>Google+</a></li>
<li class='ts-fab-latest-posts-link'><a href='http://www.blogger.com/blogger.g?blogID=YOUR-BLOG-ID-HERE#ts-fab-latest-posts-below-16747'>Latest Posts</a></li>
</ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio-below-16747'>
<div class='ts-fab-avatar'>
<img alt='ALT-TEXT' class='photo' height='80' src='LINK-TO-YOUR-PHOTO-HERE' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>YOUR-NAME</h3>
</div>
<div class='ts-fab-content'> YOUR-BIO-HERE</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below-16747'>
<div class='ts-fab-avatar'>
<img alt='ALT-TEXT' class='photo' height='80' src='LINK-TO-YOUR-PHOTO-HERE' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
<a href='http://twitter.com/YOUR-TWITTER-USERNAME'>@YOUR-TWITTER-HANDLE</a></h3>
<div class='ts-fab-description'>
CEO &amp; Editor, <a href='http://www.YOUR-SITE.com/' target='_blank' title='http://www.YOUR-SITE.com'>YOUR-SITE</a></div>
</div>
<br/>
<div class='ts-fab-follow'>
<a class='twitter-follow-button' data-lang='en_US' data-show-count='true' href='https://twitter.com/YOUR-TWITTER-USERNAME'>Follow @YOUR-TWITTER-HANDLE</a></div>
<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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
   </div>
</div>
<div class='ts-fab-tab' id='ts-fab-facebook-below-16747'>
<div class='ts-fab-avatar'>
<img alt='ALT-TEXT' class='photo' height='80' src='LINK-TO-YOUR-PHOTO-HERE' width='80'/></div>
<div class='ts-fab-text'>
<div id='fb-root'>
</div>
<script>(function(d, s, id) {
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) return;
     js = d.createElement(s); js.id = id;
     js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
     fjs.parentNode.insertBefore(js, fjs);
     }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
  
    <br/>
<div class='ts-fab-header'>
<h3>
<a href='http://www.facebook.com/YOUR-FACEBOOK-USERNAME'>YOUR-NAME</a></h3>
</div>
<div class='fb-subscribe' data-href='http://www.facebook.com/YOUR-FACEBOOK-USERNAME' data-layout='standard' data-show-faces='false' data-width='320'>
</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus-below-16747'>
<div class='ts-fab-avatar'>
<img alt='ALT-TEXT' class='photo' height='80' src='LINK-TO-YOUR-PHOTO-HERE' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
<a href='https://plus.google.com/YOUR-GOOGLEPLUS-ID?rel=author'>+YOUR-GOOGLEPLUS-USERNAME</a></h3>
</div>
<!-- /.ts-fab-header -->
    <g:plus height='69' href='https://plus.google.com/YOUR-GOOGLEPLUS-ID' width='320'/>
   </div>
</div>
<div class='ts-fab-tab' id='ts-fab-latest-posts-below-16747'>
<div class='ts-fab-avatar'>
<img alt='ALT-TEXT' class='photo' height='80' src='LINK-TO-YOUR-PHOTO-HERE' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
Latest posts by YOUR-NAME <span class='latest-see-all'>(<a href='http://www.YOUR-SITE.com/'>see all</a>)</span></h3>
</div>
<ul class='ts-fab-latest'>
<div id='hlrpsa'>
<script src='http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js'>
</script>
<script>
var numposts = 3;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;
</script>
<script src='http://YOUR-SITE.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'>
</script>
</div>
</ul>
</div>
</div>
</div>
</div>
</b:if>
<!-- Fanciest Author Box For Blogger -->

6. Replace Orange Colored phrases with your own.
After replacing the phrases, Hit Save button !
That's it, you are done, go to your blog and check your widget. I hope you would like this widget.
Have any problem? just drop your comment here, We'll try to fix it or you can also say "Thanks" in comment box :D