WP - Fanciest Author Box converted for Blogger Blog

Today, We will provide you an awesome Author Box widget for blogger. This widget converted from Wordpress to Blogger.

Fanciest Author Box

[ Demo | Source Code ]

Fanciest Author Box : Fanciest Author Box is a popular author box plugin for WordPress. Now  We convert this widget from wp to blogger. it's fully functioned in Blogger and integrated through Gplus Profile So no more customisation required. It's also use Multi Authors in Blogger. In this widget , We use CSS , XML and Jquery code.

Features:

• Multi Tabbed function
• Gplus Profile Integration
• Also include twitter , facebook social profiles
• Related Author blog feeds post for blogger
• Give identity to your blog
• Make connections & enable reader engagement
• Highlight articles in search result pages by showing authors
• Increase conversions and click-through rates
• Fully Customisable
• For Multi Author's
• With Fanciest Author Box you automatically get Google Authorship verification. Just enable the Google+ widget.

If  add you add this then first you need to read first this article for GPLUS Profile Customsation-  Google Plus Profile - Author Box Widget and gplus profile xml code

HOW TO ADD THIS WIDGET IN BLOGGER

• Go To Blogger Dashboard >Template >Edit HTML.
• Now Search the following code: <div class='post-footer'> or <div class='post-footer-line post-footer-line-'/>
• copy and paste the below code , after <div class='post-footer'> or <div class='post-footer-line post-footer-line-'/> tag :

Author Widget Code [in XML]

<!-- Fanciest Author Box - www.digitalhubinc.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<!-- Fanciest Author Box v1.6 --><div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below'><ul class='ts-fab-list'><li class='ts-fab-bio-link'><a href='#ts-fab-bio-below'>Bio</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below'>Google+</a></li><li class='ts-fab-latest-posts-link'><a href='#ts-fab-latest-posts-below'>Latest Posts</a></li></ul><div class='ts-fab-tabs'>
 <div class='ts-fab-tab' id='ts-fab-bio-below'>
  <div class='ts-fab-avatar'><img class='avatar avatar-70 photo' expr:src='data:post.authorPhoto.url' height='70px' itemprop='image' width='70px'/></div>
  <div class='ts-fab-text'>
   <div class='ts-fab-header'><h4>Written by <a expr:href='data:post.authorProfileUrl' rel='author' title='Posts by admin'><data:post.author/></a></h4><div class='ts-fab-description'><span>Author</span> at <a expr:href='data:blog.homepageUrl' rel='nofollow'><span><data:blog.title/></span></a></div></div><!-- /.ts-fab-header --><div class='ts-fab-content'><p class='description' itemprop='description'><data:post.authorAboutMe/></p></div>
  </div>
 </div>
  <div class='ts-fab-tab' id='ts-fab-twitter-below'>
   <div class='ts-fab-avatar'><img class='avatar avatar-70 photo' expr:src='data:post.authorPhoto.url' height='70px' itemprop='image' width='70px'/></div>
   <div class='ts-fab-text'>
    <div class='ts-fab-header'>
     <h4><a href='http://twitter.com/digitalhubinc'>@digitalhubinc</a></h4></div><!-- /.ts-fab-header --><div class='ts-fab-content'><!-- Couldn't fetch latest tweet --></div><div class='ts-fab-follow'><a class='twitter-follow-button' data-lang='en_US' data-show-count='true' href='https://twitter.com/digitalhubinc'>Follow @digitalhubinc</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'>
   <div class='ts-fab-avatar'><img class='avatar avatar-70 photo' expr:src='data:post.authorPhoto.url' height='70px' itemprop='image' width='70px'/></div>
   <div class='ts-fab-text'>
     <div id='fb-root'/>
     <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>
    
    <div class='fb-like' data-href='http://www.facebook.com/digitalhubinc' data-layout='standard' data-send='false' data-show-faces='false'/>
    </div>
  </div>
  <div class='ts-fab-tab' id='ts-fab-googleplus-below'>
   <div class='ts-fab-avatar'><img class='avatar avatar-70 photo' expr:src='data:post.authorPhoto.url' height='70px' itemprop='image' width='70px'/></div>
   <div class='ts-fab-text'>
    <div class='ts-fab-header'>
     <h4><a expr:href='data:post.authorProfileUrl' rel='author' title='Posts by admin'><data:post.author/></a></h4>
    </div><!-- /.ts-fab-header -->
    <g:plus data-layout='landscape' data-showcoverphoto='false' data-width='320' expr:href='data:post.authorProfileUrl' rel='author'/>
   </div>
  </div>
 <div class='ts-fab-tab' id='ts-fab-latest-posts-below'>
  <div class='ts-fab-avatar'><img class='avatar avatar-70 photo' expr:src='data:post.authorPhoto.url' height='70px' itemprop='image' width='70px'/></div>
  <div class='ts-fab-text'>
   <div class='ts-fab-header'>
    <h4>Latest posts by <data:post.author/> <span class='latest-see-all'>(<a href='http://www.digitalhubinc.com/'>see all</a>)</span></h4>
   </div>
   <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://www.digitalhubinc.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'>
</script></div>
 </div>
  </div>
 </div>           

</b:if>
<!-- Fanciest Author Box www.digitalhubinc.com -->

• Now Find the </body> tag and paste the below code before </body> tag.

JQuery Code

<div dir='ltr' style='text-align: left;' trbidi='on'><script>jQuery(document).ready(function(a){a(&quot;.ts-fab-tabs &gt; div&quot;).hide();a(&quot;.ts-fab-tabs &gt; div:first-child&quot;).show();a(&quot;.ts-fab-list li:first-child&quot;).addClass(&quot;active&quot;);a(&quot;.ts-fab-list li a&quot;).click(function(){a(this).closest(&quot;.ts-fab-wrapper&quot;).find(&quot;li&quot;).removeClass(&quot;active&quot;);a(this).parent().addClass(&quot;active&quot;);var b=a(this).attr(&quot;href&quot;);if(b.indexOf(&quot;#&quot;)!=-1){currentTabExp=b.split(&quot;#&quot;);b=&quot;#&quot;+currentTabExp[1]}a(this).closest(&quot;.ts-fab-wrapper&quot;).find(&quot;.ts-fab-tabs &gt; div&quot;).hide();a(b).show();return false})});</script>

• After adding javascript code and now search for </head> tag.
• Add below CSS code before </head> tag.

CSS Code

<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 20px 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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXKP4UBKtoZ0Wbcz-c1UQvvGG7ri696nLBTrQ3gTzSs3JnrbyaqUHNjQQJ3EwE4y158olW8vPrussct5SlYsGmPIY0d6xmpKd9293zReY7X9nZXSWZ7OQ-opiK0CReuvRCADR9bv-Omc/s1600/fab_tab_icons.png&#39;)}.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:&#39;&#39;;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&gt;span,.fb_iframe_widget&gt;span iframe{min-height:64px!important}
</style>

Save All.

All Work Done.

How To Customise This Author Box Widget for Blogger

First you read this post : Google Plus Profile - Author Box Widget and gplus profile xml code
Second change the twitter id - @digitalhubinc , facebook page id - digitalhubinc and blogs feed url with your blog url - digitalhubinc.com
None other customisation required because this widget full data fetched by Google Plus profile.

Note: This widget Converted from Wp Plugin to Blogger Widget [Plugin Source]. It's Premium Wordpress Plugin and We providing for free for blogger User. If you're Wordpress User , Please Purchase form Codecanyon. If  Plugin owner claim for this then we removed this widget from here.