Tabbed Author Box Widget For Blogger

Author box widgets are usually used in multi-author blogs to let the visitors know about the author. In single author blogs, an about the author widget is placed in the sidebar for the same...

However, things seems changed now, using an author box widget has become a matter of style. They are now being used in both muti-author and single-author blogs.

The tabbed author box widget that we are giving you away is a clone of the fanciest author box widget for WordPress. If you're a WP user then you can buy it right from CodeCanyon for $10. Even though we said its a clone, adding and managing the widget is not that easy as this is not for WordPress. So, you have to do all things manually...

Adding the Tabbed Author Box Widget Below Every Posts

Step 1: Back up your blogger template [IMPORTANT]

Step 2: Go to your blogger dashboard > Template Edit HTML:

Step 3: Using Ctrl+F, search for </head> and copy-paste the below code above it.

<script type='text/javascript'>
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>

Step 4: Now, search for  ]]></b:skin> and paste the below code above it.

.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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_qovkkhncixq6l_pL7L58EnLUoEBeHjPrIbaLK9yTADTYm9Bkn2foAb6HTjuTZgRtSgtmd57mbjh9gljUE0cgj4aDnPCBRrM0RZx7QBayA6iGbMtLup53-9-TKPfhYBikUMmwbiOYr6S/s320/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-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-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-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:64px}.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:76px;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-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}

Step 5: Next search for <data:post.body/> and post the following code below it.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.ts-fab-avatar {  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVTBIOeMo-cJDa2Aivg9fz6-0c8VJOd-Mh0W0JmmnBj8oWtbQD5PNf5t8DMxsBiXHKgw2fSInBQ1IZAXK4OhuJG4i_nnS29dkMCffdzYvK7UXM_P21aYlQoLs0QRqrGkMHRmkAnm2GXAjX/s1600/Mathew+Stephen.jpg) no-repeat; height=&#39;64&#39; width=&#39;64&#39; }
</style>
<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>
</ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio-below'>
<div class='ts-fab-avatar'>
</div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4>
<a href='http://www.bloggergarage.com/'>AUTHOR NAME</a></h4>
<div class='ts-fab-description'>
</div>
</div>
<!-- /.ts-fab-header -->
<div class='ts-fab-content'>
AUTHOR BIO</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below'>
<div class='ts-fab-avatar'>
</div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4>
<a href='http://twitter.com/bloggergarage'>AUTHOR NAME</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/bloggergarage'>Follow @bloggergarage</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'>
</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>
   
 <div class='ts-fab-header'>
<h4>
<a href='http://www.facebook.com/mattstephenktm'>AUTHOR NAME</a></h4>
</div>
<div class='fb-subscribe' data-href='http://www.facebook.com/mattstephenktm' data-layout='standard' data-show-faces='false' data-width='320'>
</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus-below'>
<div class='ts-fab-avatar'>
</div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4>
<a href='https://plus.google.com/107815365251270865200?rel=author'>+AUTHOR NAME</a></h4>
</div>
<!-- /.ts-fab-header -->
    <g:plus height='69' href='https://plus.google.com/107815365251270865200' width='320'/>
   </div>
</div>
</div>
</div>
</b:if>

Step 6: Now click the orange save button.

Coustomization:

• Replace  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVTBIOeMo-cJDa2Aivg9fz6-0c8VJOd-Mh0W0JmmnBj8oWtbQD5PNf5t8DMxsBiXHKgw2fSInBQ1IZAXK4OhuJG4i_nnS29dkMCffdzYvK7UXM_P21aYlQoLs0QRqrGkMHRmkAnm2GXAjX/s1600/Mathew+Stephen.jpg with URL of your own image of size 64*64.
• Replace http://twitter.com/bloggergarage with your own twitter profile link, http://www.facebook.com/mattstephenktm with your Facebook profile link and https://plus.google.com/107815365251270865200 with your Google+ profile link.
• Replace AUTHOR NAME with your name and AUTHOR BIO with your short bio.

That's it! Even though installing this widget in your blogger blog is a mess, you will be happier at the end seeing the widget in your blog. If anything goes wrong in the middle, restore the blogger template and try it again. If you still face any difficulty installing the widget on your blog, drop a comment below and we will be happy to help you out.