Archive Pages Design$type=blogging

How To Add Fanciest Author Box Below Posts In Blogger

Fancy author box for blogger, Fancy author box blogger,fancier author box by thematosoup,all in one author box blogger,fancy author box blogger,blogspot gadgets


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'>

how-to-find-code-in-blogger-template

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="https://101helper.blogspot.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>


how-to-add-fancy-author-box-in-blogger

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.



how-to-save-template-in-blogger

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.

Beginner to blogging Bing webmaster tools tutorials blogger adsense Blogger menus Blogger Seo(Search Engine Optimization Blogger templates Blogger templates / themes Blogger Tips And Tricks Blogger Widgets And Gadgets Domains / Blogger earn money blogging Facebook widgets in blogger Google rich snippets blogger Google Webmaster Tools tutorials Mobile Blogging Related posts widget blogger social buttons blogger Yandex webmaster tools tutorials
false
ltr
item
101Helper - Blogger tips,tricks,widgets,menus,seo,earn money: How To Add Fanciest Author Box Below Posts In Blogger
How To Add Fanciest Author Box Below Posts In Blogger
Fancy author box for blogger, Fancy author box blogger,fancier author box by thematosoup,all in one author box blogger,fancy author box blogger,blogspot gadgets
https://4.bp.blogspot.com/-chCAZikDMmw/V-6n__y_fDI/AAAAAAAAGGY/TA7XfUUVSI0mlQlhazuZdmxkVLkACbMPQCLcB/s400/How%2Bto%2Badd%2Bfanciest%2Bauthor%2Bbox%2Bbelow%2Bposts%2Bin%2Bblogger.png
https://4.bp.blogspot.com/-chCAZikDMmw/V-6n__y_fDI/AAAAAAAAGGY/TA7XfUUVSI0mlQlhazuZdmxkVLkACbMPQCLcB/s72-c/How%2Bto%2Badd%2Bfanciest%2Bauthor%2Bbox%2Bbelow%2Bposts%2Bin%2Bblogger.png
101Helper - Blogger tips,tricks,widgets,menus,seo,earn money
https://101helper.blogspot.com/2015/06/how-to-add-fanciest-author-box-below-post-blogger.html
https://101helper.blogspot.com/
https://101helper.blogspot.com/
https://101helper.blogspot.com/2015/06/how-to-add-fanciest-author-box-below-post-blogger.html
true
3767912102518445221
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago