We need to design our Blogger blog. Every blogger wants that the look of his blog should be good. If you also want to improve the design of your blog, then in this post we will tell you how to put an author box in the blog.
Read More: How to add Custom Featured Images or Thumbnails in Blogger
You must keep a good rapport with your visitors if you are a blogger. Your visitors should have good information about you so that you will have a good relationship with your visitors and they will never forget your blog.
Why add an author box to the blog, your readers are eager to know about you. Your readers need to have complete knowledge about you, who you are, and where you are from, if your readers know this information then you will develop a relationship with them. And this will help in increasing the traffic of your blog.
How to add an author box?
Now I am telling you about setting up a nice and fancy author box. You follow the steps with me and you can easily install this widget in your blog.
Step 1: First log in to Blogger and go to Blog Dashboard.
Step 2: Copy this code.
<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>
Step 3: Now go to Layout>>HTML/Javascript and paste the copied code and save it.
Step 4: Now go to template>>Edit HTML and search for <div class=”post-footer”> by pressing ctrl+f.
Step 5: <div class="post-footer"> Now paste the code given below
<b:if cond='data:blog.pageType == "item"'>
<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=' #ts-fab-bio-below-16747'>Bio</a></li>
<li class='ts-fab-twitter-link'><a href='http://www.blogger.com/blogger.g?blogID=Apna blog id likhe yaha #ts-fab-twitter-below-16747'>Twitter</a></li>
<li class='ts-fab-facebook-link'><a href='http://www.blogger.com/blogger.g?blogID=Apna blog id likhe yaha #ts-fab-facebook-below-16747'>Facebook</a></li>
<li class='ts-fab-googleplus-link'><a href='http://www.blogger.com/blogger.g?blogID=Apna blog ID likhe yaha #ts-fab-googleplus-below-16747'>Google+</a></li>
<li class='ts-fab-latest-posts-link'><a href='http://www.blogger.com/blogger.g?blogID=Apna blog id likhe yaha #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='Image alt text yaha likhe' class='photo' height='80' src='Apna image link likhe' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3> _ _
</div>
<div class='ts-fab-content'>
Write your own here </div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below-16747'>
<div class='ts-fab-avatar'>
<img alt=' write image alt text ' class='photo' height='80' src=' edit your photo link ' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
<a href='http://twitter link yaha likhe'>Twitter user name likhe</a></h3>
<div class='ts-fab-description'>
CEO & Editor, <a href='http:// write your website url / ' target='_blank' title=' http:// write your site's url '> write your site title </a></div>
</div>
<br/>
<div class='ts-fab-follow'>
<a class='twitter-follow-button' data-lang="en_US data-show-count=’true’ href="Twitter link'>Follow @Twitter user name</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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-facebook-below-16747'>
<div class='ts-fab-avatar'>
<img alt='Image alt text' class='photo' height='80' src='Image link' 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 = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> <br/>
<div class='ts-fab-header'>
<h3>
<a href='http://Facebook link'>
Apka nam</a></h3>
</div>
<div class='fb-subscribe' data-href='http://Facebook link' 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='Image alrt text' class='photo' height='80' src='Image link' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
<a href='https://Google plus limk?rel=author">Apka nam</a></h3>
</div>
<!-- /.ts-fab-header -->
<g:plus height='69' href='https://Google plus link' width='320'/>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-latest-posts-below-16747'>
<div class='ts-fab-avatar'>
<img alt='image alt text' class='photo' height='80' src='image link ' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
Latest posts by Apka nam <span class='latest-see-all'>(<a href='http://apka website url'>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 defaultstyling = true;
</script>
<script src='http://www.yoursite.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'>
</script>
</div>
</ul>
</div>
</div>
</div>
</div>
</b:if>
Now, setup wherever there is red color, and after that save the template.