How To Add Fancier Author Box For Blogger/Blog

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.

[button link=”http://all-tech-tip.blogspot.com/2013/05/covert-and-compact-filming-with-spy.html” type=”big” newwindow=”yes”] LIVE DEMO[/button]

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(&#39;https://lh5.googleusercontent.com/-wNxlU6osVBU/Ua7C9OqjKpI/AAAAAAAAJss/VP-frBamj60/w300-h216-no/tab_icons.png&#39;)}.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://lh6.googleusercontent.com/-VZnWmAAkFm0/Ua7C9Ozmk0I/AAAAAAAAJsw/QAX4W23nhwM/s16-no/twitter.png’ width=’18’/></a><a href=’http://facebook.com/bloggerhero’ title=’Facebook’><img alt=’My Facebook profile’ height=’18’ src=’https://lh4.googleusercontent.com/-lTFOIW-Fuy0/Ua7C8u7coRI/AAAAAAAAJsU/g7m2ZQMv8KU/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://lh6.googleusercontent.com/-f0f8zN98tB4/Ua7C8iiKcvI/AAAAAAAAJsk/WBTZVEShfUI/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://lh3.googleusercontent.com/-IrmKyhBWAz8/Ua7C8p5Ty_I/AAAAAAAAJsY/i6VrywziQpY/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 &amp; CEO</span> at <a href=”http://www.bloggerheroe.com”><span>Blogger Heroe</span></a></div></div><!– /.bheroe-fab-header –> <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://lh6.googleusercontent.com/-VZnWmAAkFm0/Ua7C9Ozmk0I/AAAAAAAAJsw/QAX4W23nhwM/s16-no/twitter.png’ width=’18’/></a><a href=’http://facebook.com/bloggerhero’ title=’Facebook’><img height=’18’ src=’https://lh4.googleusercontent.com/-lTFOIW-Fuy0/Ua7C8u7coRI/AAAAAAAAJsU/g7m2ZQMv8KU/s16-no/facebook.png’ width=’18’/></a><a href=’https://plus.google.com/106957260261276964704/posts’ title=’Google+’><img height=’18’ src=’https://lh6.googleusercontent.com/-f0f8zN98tB4/Ua7C8iiKcvI/AAAAAAAAJsk/WBTZVEShfUI/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://lh3.googleusercontent.com/-IrmKyhBWAz8/Ua7C8p5Ty_I/AAAAAAAAJsY/i6VrywziQpY/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=&quot;bheroe-fab-latest&quot;> <script style=&quot;text/javascript&quot; src=&quot;https://dl.dropboxusercontent.com/u/81212926/recent-post.js&quot;></script> <script style=&quot;text/javascript&quot;>var numposts = 4;var showpostdate = true;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script> <script src=&quot;/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&quot;></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.

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!

Comments

  1. Jatin Singh says:

    Nice tutorial i llike it

    http://cyberhax.blogspot.com/

  2. Victor Noah says:

    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

  3. Deep Sinha says:

    This comment has been removed by the author.

Speak Your Mind

*


*