BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

Fancy Author Box Widget For Blogger

17 comments

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.
Fancy Author Box Widget on TechEthix

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

17 comments :

  1. Brother it is really different and fancy widget for blogger users. Thanks for sharing with us

    Regards
    Gagan Masoun
    www.BlogsDaddy.com

    ReplyDelete
    Replies
    1. Bro, thanks for being here, actually I have converted it from wordpress widegt. You can also get more widgets like this just don't forget to subscribe via email ;-)

      Delete
  2. This post has the concept & codes plagiarised from www.crackroach.com/2013/05/stylish-fanciest-author-box-widget-for-blogger.html with no credit.
    Kindly be genuine at your work by giving the necessary credits.

    ReplyDelete
    Replies
    1. Ramki Krishnan, sorry friend, just another blog author had removed your blog's link, I added it back. I hope it will be fine :)

      Delete
  3. Thanks for your stylish author box widget for blogger! Its really helpful post for newbie.
    website design

    ReplyDelete
    Replies
    1. Thanks for being here mate, I hope you would have liked above widget :)
      Stay Connected :)

      Delete
  4. I always adore your work, this author box looks good, but I always avoid heavy coding inside my template. Thanks for sharing this, I will try once and share my thoughts over it.

    ReplyDelete
  5. nice bro.. ThanQ for the post.

    ReplyDelete
  6. I need a author list widget to display my site's author list with post counter in sidebar.

    If you have please share it.

    please see my site as a demo author widget. I made it manually with label. I need this widget dynamically.

    http://www.1stwebsuite.com

    ReplyDelete
  7. I am a big fucktard,who steal articles from other blogs.I am a son of bitch,my mom is a prostitute,Dad is the biggest asshole of Amravati.I am a gay who love to fuck midget men daily.

    ReplyDelete
  8. very necessary widget for blogger.thanks for it

    ReplyDelete
  9. Its Not working on my blog..
    I need help!!

    http:www.cplushub.blogspot.com

    ReplyDelete

Powered by Blogger.