How To Add Fanciest Author Box Below Posts In Blogger

Author box is among the trending widgets now a days because people who have blogs or websites want to get more followers and stay in touch with their fans. My recent post was also about "Author boxes with different styles for blogger" and once again I am about to share a new author box which will be added below every post in your blog. It is called fancy author box. It is designed with javascript and css and doesn't effect your blog's load time.

If you liked this gadget and want to add it in your blog below every post then follow below mentioned steps:

Step 1: Go to blogger dashboard and navigate to template.

Step 2: Click inside the code and search for below code by using Ctrl+F on your keyboard:

<div class='post-footer'>

Step 3: You will find the above code two times if you are using simple template but if you are using a custom or other template then you will find it many times. Now copy the below code and paste it after the second code in simple template and in other template paste it after third code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://rawgit.com/FortAwesome/Font-Awesome/master/css/font-awesome.css">
<link rel="stylesheet" href="https://rawgit.com/101Helper/docs/master/fanciest.css">
<div id="tabs">
<ul>
<li><a href='#fragment-1'><i class="fa fa-user" aria-hidden="true"></i> Bio</a></li>
<li><a href='#fragment-2'><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook</a></li>
<li><a href='#fragment-3'><i class="fa fa-twitter-square" aria-hidden="true"></i> Twitter</a></li>
<li><a href='#fragment-4'><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a></li>
<li><a href='#fragment-5'><i class="fa fa-google-plus-square" aria-hidden="true"></i> Google+</a></li>
</ul>
  <div id="fragment-1">
<img src='https://lh3.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s120-c/photo.jpg' style='width: 90px;'/>
<h4>Fahim Raza</h4>
<p>I am fahim Raza and this fancy author box is designed by me. Its free for blogger. Do not Remove copyright tag. </p>
<a id="bout" href="http://www.the101helper.com/2015/06/how-to-add-fanciest-author-box-below-post-blogger.html">101Helper</a>
  </div>
  <div id="fragment-2">
<iframe src="https://www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2F101helperblogspot&width=64&height=65&layout=box_count&size=small&show_faces=false&appId" width="64" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>
  <div id="fragment-3">
<a href="https://twitter.com/the101helper" class="twitter-follow-button" data-show-count="false">Follow @the101helper</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
  <div id="fragment-4">
<span class="ig-follow" data-id="5479dee" data-handle="USERNAME" data-count="true" data-size="medium" data-username="false"></span>
<script>(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src="//rawgit.com/101Helper/docs/master/instagram.js";s.parentNode.insertBefore(g,s);}(document,"script"));</script>
  </div>
  <div id="fragment-5">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-annotation="vertical-bubble" data-height="20" data-href="//plus.google.com/u/0/109303537659462705427" data-rel="publisher"></div>
  </div>
</div>
<script>
$( "#tabs" ).tabs();
</script>
</b:if>

Step 4: Make changes in the above code according to your choices. I have highlighted my name and links all you have to do is to replace them with your name and social profile links.

Step 5: Click on save template and you are done.

Replace links and usernames with your own usernames. 

Note: Don't remove the 101Helper tag from widget, it will be our copyright violation and you will be reported to Google if tag removed widget was found on your site.

I hope you like this gadget and its working in your blog, if not please let me know by leaving a comment below. 

Try more blogger gadgets and widgets here.

Follow and subscribe below to get latest blogger gadgets news.

Share this post with other bloggers around you!

Search tags: How To Add Fanciest Author Box Below Posts In Blogger, Fancy author box for blogger, Fancy author box blogger, Author boxes for blogger with different styles, all in one author box blogger,101Helper gadgets for blogger.

Tweet