Add About Author Box Below Post

Adding beautiful widget into your blog helps a lot to improve blog design as well as attract visitor.Adding an about author box widget below blog post make your blog look more professional and attractive.So here today we're going to share such an awesome widget which is adopted from wordpress.It have author bio box along with social follower counter.You can see the live demo of the box just below.

Live Demo

 Must Read : Customized About Author Widget for Blogger

Add Author Box on Blogger

• Lgo onto Blogger dashboard >> Template >> Edit HTML 
• Now find below HTML code (to find code, just click anywhere on the HTML editor and press ctrl+f).

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

You may found it twice inside your template html editor,you should went for the second one

<div class='tth-fab-wrapper tth-fab-icons-text' id='tth-fab-below-10105'><ul class='tth-fab-list'><li class='tth-fab-bio-link active'><a href='#tth-fab-bio-below-10105'>About</a></li><li class='tth-fab-twitter-link'><a href='#tth-fab-twitter-below-10105'>Twitter</a></li><li class='tth-fab-facebook-link'><a href='#tth-fab-facebook-below-10105'>Facebook</a></li><li class='tth-fab-googleplus-link'><a href='#tth-fab-googleplus-below-10105'>Google+</a></li></ul> <div class='tth-fab-tabs'> <div class='tth-fab-tab' id='tth-fab-bio-below-10105' style='display: block;'> <div class='tth-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-0' src='AUTHOR IMAGE URL HERE' width='64'/></div> <div class='tth-fab-text'> <div class='tth-fab-header'><h4><a href='AUTHOR WEBSITE LINK HERE'>AUTHOR NAME HERE</a></h4></div> <div class='tth-fab-content'>AUTHOR BIO HERE</div> </div> </div> <div class='tth-fab-tab' id='tth-fab-twitter-below-10105' style='display: none;'> <div class='tth-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-1' src='AUTHOR IMAGE URL' style='' width='64'/></div> <div class='tth-fab-text'> <div class='tth-fab-header'> <h4><a href='http://twitter.com/AUTHOR TWITTER PROFILE ID'>@AUTHOR NAME</a></h4></div> <div class='tth-fab-content'> </div><div class='tth-fab-follow'><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgetth/follow_button.1374787011.html#_=1375013320942&amp;id=twitter-widget-2&amp;lang=en&amp;screen_name=AUTHOR TWITTER PROFILE ID&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 243px; height: 20px;"></iframe></div> </div> </div> <div class='tth-fab-tab' id='tth-fab-facebook-below-10105' style='display: none;'> <div class='tth-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-2' src='AUTHOR IMAGE URL' style='' width='64'/></div> <div class='tth-fab-text'> <div class='tth-fab-header'> <h4><a href='http://www.facebook.com/AUTHOR FACEBOOK ID'>AUTHOR NAME</a></h4></div> <div class='fb-follow' data-href='https://www.facebook.com/AUTHOR FACEBOOK ID' data-show-faces='true' data-width='450'><span style='height: 35px; width: 450px;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2FAUTHOR FACEBOOK ID&amp;layout=standard&amp;show_faces=true&amp;colorscheme=light&amp;font&amp;width=450&amp;height=27' style='border:none; overflow:hidden; width:450px; height:27px;'/></span></div> </div> </div> <div class='tth-fab-tab' id='tth-fab-googleplus-below-10105' style='display: none;'> <div class='tth-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-3' src='AUTHOR IMAGE URL' style='' width='64'/></div> <div class='tth-fab-text'> <div class='tth-fab-header'> <h4><a href='https://plus.google.com/AUTHOR GOOGLE+ ID?rel=author'>AUTHOR NAME</a></h4> </div> <div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/AUTHOR GOOGLE+ ID' data-rel='author'/> </div> </div> </div> </div> <style> .tth-fab-wrapper { margin: 0 0 2em; clear: both; } .tth-fab-wrapper ul { list-style:none outthide none; } .tth-fab-wrapper a { text-decoration: none !important; } .tth-fab-wrapper img { border: none !important; } .tth-fab-list { overflow: hidden; padding: 0 0 0 5px !important; margin: 0 !important; } .tth-fab-list li { display: block; float: left; list-style: none; margin: 0 5px 0 0 !important; } .tth-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; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .tth-fab-list li a:hover { color: #333; } .tth-fab-list li.active a { background-color: #333; color: #fff; border-color: #333; } .tth-fab-list li a { background-image: url('http://www.steamfeed.com/wp-content/plugins/fanciest-author-box_10-13-12/images/fab_tab_icons.png'); } .tth-fab-list li.tth-fab-bio-link a { background-position: 8px 8px; background-repeat: no-repeat; padding-left: 27px; } .tth-fab-list li.tth-fab-bio-link.active a { background-position: -280px 8px; background-repeat: no-repeat; padding-left: 27px; } .tth-fab-list li.tth-fab-twitter-link a { background-position: 8px -42px; background-repeat: no-repeat; padding-left: 35px; } .tth-fab-list li.tth-fab-twitter-link.active a { background-position: -270px -42px; background-repeat: no-repeat; padding-left: 35px; } .tth-fab-list li.tth-fab-facebook-link a { background-position: 8px -92px; background-repeat: no-repeat; padding-left: 23px; } .tth-fab-list li.tth-fab-facebook-link.active a { background-position: -284px -92px; background-repeat: no-repeat; padding-left: 23px; } .tth-fab-list li.tth-fab-googleplus-link a { background-position: 8px -142px; background-repeat: no-repeat; padding-left: 30px; } .tth-fab-list li.tth-fab-googleplus-link.active a { background-position: -276px -142px; background-repeat: no-repeat; padding-left: 30px; } .tth-fab-list li.tth-fab-linkedin-link a { background-position: 8px -242px; background-repeat: no-repeat; padding-left: 30px; } .tth-fab-list li.tth-fab-linkedin-link.active a { background-position: -276px -242px; background-repeat: no-repeat; padding-left: 30px; } .tth-fab-custom-link a { background-image: none !important; } .tth-fab-widget .tth-fab-list li a, .tth-fab-icons-only .tth-fab-list li a { text-indent: -9999em; padding: 8px 12px !important; } .tth-fab-widget .tth-fab-list li.tth-fab-bio-link a, .tth-fab-icons-only .tth-fab-list li.tth-fab-bio-link a { width: 4px; } .tth-fab-widget .tth-fab-list li.tth-fab-twitter-link a, .tth-fab-icons-only .tth-fab-list li.tth-fab-twitter-link a { width: 12px; } .tth-fab-widget .tth-fab-list li.tth-fab-googleplus-link a, .tth-fab-icons-only .tth-fab-list li.tth-fab-googleplus-link a { width: 8px; } .tth-fab-widget .tth-fab-list li.tth-fab-linkedin-link a, .tth-fab-icons-only .tth-fab-list li.tth-fab-linkedin-link a { width: 8px; } .tth-fab-widget .tth-fab-list li.tth-fab-facebook-link a, .tth-fab-icons-only .tth-fab-list li.tth-fab-facebook-link a { width: 0; } .tth-fab-widget .tth-fab-list li.tth-fab-latest-postth-link a, .tth-fab-icons-only .tth-fab-list li.tth-fab-latest-postth-link a { width: 4px; } .tth-fab-widget .tth-fab-list li.tth-fab-custom-link a, .tth-fab-icons-only .tth-fab-list li.tth-fab-custom-link a { text-indent: 0 !important; } .tth-fab-tab { display: none; border: 2px solid #333; padding: 12px; background: #fff; min-height: 64px; overflow: hidden; } .tth-fab-tab:first-child { display: block; } .tth-fab-widget .tth-fab-tab { padding: 8px; } .tth-fab-avatar { display: block; float: left; width: 64px; height: 64px; } .tth-fab-no-float .tth-fab-avatar { float: none; margin: 0 0 12px; } .tth-fab-avatar img { display: block; border: none !important; } .tth-fab-text { margin-left: 76px; line-height: 1.5; } .tth-fab-no-float .tth-fab-text { margin-left: 0; } .tth-fab-header { margin-bottom: 10px; } .tth-fab-text h4 { clear: none; font-size: 18px; line-height: 1 !important; font-weight: bold; margin: 0 0 0.2em !important; line-height: 1; padding: 0; } .tth-fab-description { font-size: 12px } .tth-fab-follow { margin-top: 10px; } .tth-fab-latest { margin: 0 !important; padding: 0 !important; } .tth-fab-latest li { list-style: none !important; line-height: 1.1; margin: 0 0 0.6em !important } .tth-fab-latest li span, .tth-fab-twitter-time { font-size: 12px; } .latest-see-all { font-weight: normal; } .tth-fab-wrapper iframe { margin-bottom: 0 !important; } body.rtl .tth-fab-avatar { float: right; } body.rtl .tth-fab-text { margin-left: 0; margin-right: 76px; } body.rtl .tth-fab-list { padding: 0 5px 0 0 !important; } body.rtl .tth-fab-list li { float: right; margin: 0 0 0 5px !important; } </style>

• Now search for </head> and above it paste the below code

<script type="text/javascript"> /*<![CDATA[*/ 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> <script type="text/javascript"> /*<![CDATA[*/ // Twitter (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs"); // Google + (plus) (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); /*]]>*/ </script>

• Now save the template and you're done.

Customization

change those coloured text as per instruction in the above code.

 Must Read : How to Change Blogger Favicon

That's it,you just made a beautiful about author box widget for your blog.Take a look on it and see how's it working.If you're facing any problem ask for help through your comment.

Articles You May Like