How To Add Fancier Author Box For Blogger/Blog ~ BLOGGER HEROE

In this post I am gonna show you how to add Fanciest Author Box below post for blogger. A blog author must give the visitors an opportunity to know about him, about his skills and qualifications, contact him if necessary. So for all of this to happen, the job is given to the author box. If you make your every post stand out and attract your readers' eyes. Connect with your audience on all levels and make sure people always read your author's bio and engage you on social networks like Twitter, Facebook, Google+ and LinkedIn. And you can view your latest post.

LIVE DEMO

Adding Fancier Author Box For Blogger/Blog

Go to Blogger > Template > Click Edit HTML.
Search CTRL + F for this piece of code: <body>
Copy and paste the below code just after <body>

<script src='https://dl.dropboxusercontent.com/u/81212926/bheroe-athor.js' type='text/javascript'/>

Now Search for below code once again

<div class='post-footer-line post-footer-line-1'>

And paste below code just after it.

<style>
.bheroe-fab-wrapper{margin:0 0 2em;clear:both}.bheroe-fab-wrapper a{text-decoration:none!important}.bheroe-fab-wrapper img{border:none!important}.bheroe-fab-list{overflow:hidden;margin:0!important;padding:0 0 0 5px}.bheroe-fab-list li{display:block;float:left;list-style:none!important;margin:0 5px 0 0 !important}.bheroe-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;border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0}.bheroe-fab-list li a:hover{color:#333}.bheroe-fab-list li.active a{background-color:#333;color:#fff;border-color:#333}.bheroe-fab-list li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmO9Da_HjJwA1zTSmPmKrFoDSId9xOIWvtuwWcg4R3GWZ4NGtq-epYzpug-fQDCxW1lfM781sSLAQNGyB3dS__Z3MNUKGGjJGWuWa02tgCKAzYRoEXqwCRcAyAzcFqkBS8-nnrwgzBVXg/w300-h216-no/tab_icons.png')}.bheroe-fab-list li.bheroe-fab-bio-link a{background-position:8px 8px;background-repeat:no-repeat;padding-left:27px}.bheroe-fab-list li.bheroe-fab-bio-link.active a{background-position:-279px 8px;background-repeat:no-repeat;padding-left:27px}.bheroe-fab-list li.bheroe-fab-twitter-link a{background-position:8px -42px;background-repeat:no-repeat;padding-left:35px}.bheroe-fab-list li.bheroe-fab-twitter-link.active a{background-position:-270px -42px;background-repeat:no-repeat;padding-left:35px}.bheroe-fab-list li.bheroe-fab-facebook-link a{background-position:8px -92px;background-repeat:no-repeat;padding-left:23px}.bheroe-fab-list li.bheroe-fab-facebook-link.active a{background-position:-284px -92px;background-repeat:no-repeat;padding-left:23px}.bheroe-fab-list li.bheroe-fab-googleplus-link a{background-position:8px -142px;background-repeat:no-repeat;padding-left:30px}.bheroe-fab-list li.bheroe-fab-googleplus-link.active a{background-position:-276px -142px;background-repeat:no-repeat;padding-left:30px}.bheroe-fab-list li.bheroe-fab-latest-posts-link a{background-position:8px -192px;background-repeat:no-repeat;padding-left:27px}.bheroe-fab-list li.bheroe-fab-latest-posts-link.active a{background-position:-280px -192px;background-repeat:no-repeat;padding-left:27px}.bheroe-fab-widget .bheroe-fab-list li a{text-indent:-9999em;padding:8px 12px!important}.bheroe-fab-widget .bheroe-fab-list li.bheroe-fab-bio-link a{width:4px}.bheroe-fab-widget .bheroe-fab-list li.bheroe-fab-twitter-link a{width:12px}.bheroe-fab-widget .bheroe-fab-list li.bheroe-fab-googleplus-link a{width:8px}.bheroe-fab-widget .bheroe-fab-list li.bheroe-fab-facebook-link a{width:0}.bheroe-fab-widget .bheroe-fab-list li.bheroe-fab-latest-posts-link a{width:4px}.bheroe-fab-tab{display:none;border:2px solid #333;padding:12px;background:#fff;min-height:80px;overflow:hidden}.bheroe-tab:first-child{display:block}.bheroe-fab-widget .bheroe-fab-tab{padding:8px}.bheroe-fab-avatar{display:block;float:left}.bheroe-fab-no-float .bheroe-fab-avatar{float:none;margin:0 0 12px}.bheroe-fab-text{margin-left:96px;line-height:1.5}.bheroe-fab-no-float .bheroe-fab-text{margin-left:0}.bheroe-fab-avatar>img{width:80px;max-width:100%!important}.bheroe-fab-header{margin-bottom:10px}.bheroe-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}.bheroe-fab-description{font-size:12px}.bheroe-fab-follow{margin-top:10px}.bheroe-fab-social-links{margin:.1em 0 0;text-align:center}.bheroe-fab-social-links a{display:inline-block;margin:0 1px;opacity:.5;transition:opacity .2s;-moz-transition:opacity .2s;-webkit-transition:opacity .2s;-o-transition:opacity .2s}.bheroe-fab-social-links a:hover{opacity:1}.bheroe-fab-latest{margin:0!important;padding:0!important}.bheroe-fab-latest li{list-style:none!important;line-height:1.2;margin:0 0 .6em}.bheroe-fab-latest li span,.bheroe-fab-twitter-time{font-size:12px}.latest-see-all{font-weight:normal}</style>

<div class='bheroe-fab-wrapper' id='bheroe-fab-below'><ul class='bheroe-fab-list'><li class='bheroe-fab-bio-link'><a href='#bheroe-fab-bio-below'>Bio</a></li><li class='bheroe-fab-latest-posts-link'><a href='#bheroe-fab-latest-posts-below'>Latest Posts</a></li></ul><div class='bheroe-fab-tabs'>
<div class='bheroe-fab-tab' id='bheroe-fab-bio-below'>
<div class='bheroe-fab-avatar'><img alt='' class='avatar avatar-80 photo' height='80' src='IMAGE LINK' width='80'/><div class='bheroe-fab-social-links'><a href='http://twitter.com/bloggerheroe' title='Twitter'><img alt='My Twitter profile' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1N_SfBRCE241akV8XMJsfeZdJCJg6rzmWk4VIiazJNMqKWUEH-KCkxY3IRx-ExAasf4hwt8nC8MYkikYKTSccgmmH6XO49rZnU_MAudD-pohbljsuzxB8Amyl5cfjRUN8QYkOjjPr-T4/s16-no/twitter.png' width='18'/></a><a href='http://facebook.com/bloggerhero' title='Facebook'><img alt='My Facebook profile' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQODTsbSbiJN1XE2gZbC0iWuKysqf8XAdEgGZNNfQ22vGWBDizscNDauJ4Q4eWyYzsATkcIOSlXyWTqTikI86wLLdsSNwADZ_WyH07EcCkQxcu6X_z6Bs2n3CIxZENgh_HJTcS_Av_ggc/s16-no/facebook.png' width='18'/></a><a href='https://plus.google.com/106957260261276964704/posts' title='Google+'><img alt='My Google+ profile' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7pOTlQIDCqAtCCKnTNbAT6mCX2oPcWEvGxw5_URjds1JN1haCLgYPv7QBZTWI2FwSYt87-o9pdYkL-wDmI8nF5j4sx2LU6eegYtU4NSQfMfhIErYKkkHn2QwqW77AX8-jZRS8H8kS9eQ/s16-no/googleplus.png' width='18'/></a><a href='http://www.linkedin.com/in/jaa09' title='LinkedIn'><img alt='My LinkedIn profile' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPE8YNA4Xcaj1iQmof-qUv5tJ51oqmpgZ-fBSom9yCNGJJo95Iqo1Ej3ywDPNaEh8IjyBm-A4aBUxz0OyxZ_xS2O8afOmWXVr7GAixoOoPbQcSvaKQ_pen_Ym5B5tvKAODfLam5xbpXSA/s16-no/linkedin.png' width='18'/></a></div>
</div>

<div class='bheroe-fab-text'>

<div class='bheroe-fab-header'><h4><a href='http://bloggerheroe.com'>Adrian Lucernas</a></h4><div class="bheroe-fab-description"><span>Founder & CEO</span> at <a href="http://www.bloggerheroe.com"><span>Blogger Heroe</span></a></div></div>
<div class='bheroe-fab-content'>AUTHOR DESCRIPTION</div>
</div>
</div>
<div class='bheroe-fab-tab' id='bheroe-fab-latest-posts-below'>
<div class='bheroe-fab-avatar'><img alt='' class='avatar avatar-80 photo' height='80' src='IMAGE LINK' width='80'/><div class='bheroe-fab-social-links'><a href='http://twitter.com/bloggerheroe' title='Twitter'><img height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1N_SfBRCE241akV8XMJsfeZdJCJg6rzmWk4VIiazJNMqKWUEH-KCkxY3IRx-ExAasf4hwt8nC8MYkikYKTSccgmmH6XO49rZnU_MAudD-pohbljsuzxB8Amyl5cfjRUN8QYkOjjPr-T4/s16-no/twitter.png' width='18'/></a><a href='http://facebook.com/bloggerhero' title='Facebook'><img height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQODTsbSbiJN1XE2gZbC0iWuKysqf8XAdEgGZNNfQ22vGWBDizscNDauJ4Q4eWyYzsATkcIOSlXyWTqTikI86wLLdsSNwADZ_WyH07EcCkQxcu6X_z6Bs2n3CIxZENgh_HJTcS_Av_ggc/s16-no/facebook.png' width='18'/></a><a href='https://plus.google.com/106957260261276964704/posts' title='Google+'><img height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7pOTlQIDCqAtCCKnTNbAT6mCX2oPcWEvGxw5_URjds1JN1haCLgYPv7QBZTWI2FwSYt87-o9pdYkL-wDmI8nF5j4sx2LU6eegYtU4NSQfMfhIErYKkkHn2QwqW77AX8-jZRS8H8kS9eQ/s16-no/googleplus.png' width='18'/></a><a href='http://www.linkedin.com/in/jaa09' title='LinkedIn'><img alt='My LinkedIn profile' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPE8YNA4Xcaj1iQmof-qUv5tJ51oqmpgZ-fBSom9yCNGJJo95Iqo1Ej3ywDPNaEh8IjyBm-A4aBUxz0OyxZ_xS2O8afOmWXVr7GAixoOoPbQcSvaKQ_pen_Ym5B5tvKAODfLam5xbpXSA/s16-no/linkedin.png' width='18'/></a></div>
</div>
<div class='bheroe-fab-text'>
<div class='bheroe-fab-header'>
<h4>Latest posts by Adrian Lucernas <span class='latest-see-all'>(<a href='/'>see all</a>)</span></h4>
<div class='bheroe-fab-latest'>
<div id="bheroe-fab-latest">
<script style="text/javascript" src="https://dl.dropboxusercontent.com/u/81212926/recent-post.js"></script>
<script style="text/javascript">var numposts = 4;var showpostdate = true;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
</div></div></div></div></div></div>

Make This Changes

Replace Adrian Lucernas with your Author name.
Replace jaa09 with your linkedin I.D.
Replace 106957260261276964704 with your Google plus I.D.
Replace bloggerhero with your facebook I.D.
Replace bloggerheroe with your twitter I.D.
Replace IMAGE LINK with your author picture link.
Replace AUTHOR DISCRIPTION with your description
Replace http://www.bloggerheroe.com with your blog link.

And your done!
If you have got any problem regarding this tutorial, don't hesitate to comment it below.

Share it Please

4 comments:

UnknownJune 6, 2013 at 10:23 AM
Nice tutorial i llike it

http://cyberhax.blogspot.com/
AnonymousJune 7, 2013 at 5:16 AM
These is lovely! This tricks is very important to all bloggers, because your readers must like to know who you are. So there's need implementing these. Thanks for sharing bro Adrian.
Blogger Tips And Tricks
Deep SinhaJune 7, 2013 at 8:34 PM
This comment has been removed by the author.
BloggerJuly 29, 2013 at 4:07 AM
This comment has been removed by a blog administrator.

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML code in comments then please use our HTML Encoder
2. For perfect customization of our tutorials, use our HTML Editor
3. Please do not spam, Spam comments will be deleted immediately upon our review.

Regards,
Adrian Lucernas