Search

May 28, 2013

Stylish Fanciest Author Box Widget For Blogger

Posted by Unknown on 8:04 PM | No comments

Many of you might have seen wordpress powered sites having this awesome author box plugin 'Fanciest Author Box'. This is available just for wordpress & costs $10 but it is totally worth it. If your site is on blogger platform & wish to have this in your site, here is the 'Fanciest Author Box Widget for Blogger'  from Crackroach at absolutely free of cost.
To view a demo see the bottom of this post.



Fanciest Author Box Widget For Blogger

This is one of the most elegant plugin a blog could have. Crackroach is the first to offer this author box widget for blogger. With this widget installed in your blog, you get a neat & cool finish to your posts.

Features

  • Simple & Sleek design.
  • Easy navigation tabs.
  • Bio section to let the readers know about the author.
  • Latest Posts tab with 3 recent posts of the author.
  • Automatically gets placed at the end of each post.

How To Add Fanciest Author Box In Blogger

  • Choose the blog in which you need to use this widget.
  • Go to Layout section.
  • Click on Add a Gadget.
  • Choose HTML/JavaScript.
  • Copy the below code & paste it in the widget.
<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>
  • Leaving the Title empty, hit Save.
  • Now go to Template section & hit Edit HTML.
  • Hit Ctrl+F & search for 
<div class="post-footer">
  • Now copy & paste the below code before that.
<!-- Fanciest Author Box For Blogger From Ramki www.crackroach.com -->
<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 From Ramki www.crackroach.com -->
  • Replace the RED colored phrases accordingly.
  • Now hit Save Template & that's it. You will like this widget for sure.
Hope this would be very much useful for many people and don't forget this is Crackroach Certified.
To amaze your friends on facebook, see this post Largest Collection of Facebook Chat codes for Latest Smileys & Emoticons.

Feel free to comment below & let me know your doubts if any. Keep enjoying the updates & keep sharing Crackroach.


Ramki

Ramki

Ramakrishnan aka Ramki is the founder and CEO of Crackroach, one of the best sites with interesting & unique articles. He is a young blogger with fair knowledge on SEO, Internet Marketing & Softwares. Ramki also helps his clients maintain an edge in search engines and the online social networks. Ramki's expertise has established Crackroach as one of the most highly reputed sites on the internet within few months.
Ramki

@magicramki

CEO & Editor, Crackroach

Ramki

Ramki

Ramki

Latest posts by Ramki (see all)