How To Add Multiple Author Box In Blogger ~ Mobile Apps

Previously, I have posted a tutorial about how to add an author bio widget for a single author blog. Today, I am going to show how to add an author bio widget for multi-author blog.

If you are running a blog with team of few members (i.e., multi-author blog), then you may get confused about adding an author box for each author or contributor. Displaying the author bio widget of each contributor by adding the HTML code is an usual practice followed by every blogger. But it is a pretty irritating job to add an author bio widget every time when they post the article. So, if you are looking for a solution for it, then today you are at right place. You can add an author bio widget for each contributor to your blog by adding HTML code just once in your template. Let's check out following steps to add an author bio widget for each contributor to your blog.
Step by step guide to add Multiple Author Box in Blogger

Step 1: Place the CSS code of author bio widget

First off all, you need to place the CSS code of author bio widget. So, go to Blogger dashborad>>Template>>Edit HTML and find this code - </b:skin>. If you found the code, then copy the following CSS code and paste below it.

.ts-fab-wrapper {
margin: 0 0 2em;
clear: both;
}
.ts-fab-wrapper ul
{
list-style:none outside none;
}

.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;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
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.steamfeed.com/wp-content/plugins/fanciest-author-box_10-13-12/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-custom-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: 64px;
overflow: hidden;
}

.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: 76px;
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 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 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;
}

Step 2: Find the code

As we all know, prominent place to add an author bio widget is above the article that the author had written. So, find the following HTML code (to search, click anywhere on the template HTML editor and press ctrl+f).

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

Take a look at the below image to do this more accurately,

Blogger dashboard>>Template>>Edit HML


Finding the code <div class='post-footer-line post-footer-line-1'>

Note: The HTML code that I have mentioned earlier is repeated two times in your template. So find the code (<div class='post-footer-line post-footer-line-1'>) which is seen below this HTML code - <div class='post-footer'>

Step 2: Place the author bio widget HTML code

Now you need to place the following author bio widget HTML code above the code (<divclass='post-footer-line post-footer-line-1'>) that I mentioned on the previous step.

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.author == "Author1Name"'>
<div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-10105'><ul class='ts-fab-list'><li class='ts-fab-bio-link active'><a href='#ts-fab-bio-below-10105'>About</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below-10105'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below-10105'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below-10105'>Google+</a></li></ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio-below-10105' style='display: block;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-0' src='AUTHOR 1 IMAGE URL HERE' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'><h4><a href='AUTHOR 1 WEBSITE LINK HERE'>AUTHOR 1 NAME HERE</a></h4></div> <div class='ts-fab-content'>AUTHOR 1 BIO HERE</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-1' src='AUTHOR 1 IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://twitter.com/AUTHOR 1 TWITTER PROFILE ID'>@AUTHOR 1 NAME</a></h4></div> <div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&id=twitter-widget-2&lang=en&screen_name=AUTHOR 1 TWITTER PROFILE ID&show_count=true&show_screen_name=true&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='ts-fab-tab' id='ts-fab-facebook-below-10105' style='display: none;'>
<div class='ts-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='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://www.facebook.com/AUTHOR 1 FACEBOOK ID'>AUTHOR 1 NAME</a></h4></div>
<div class='fb-follow' data-href='https://www.facebook.com/AUTHOR 1 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 1 FACEBOOK ID&layout=standard&show_faces=true&colorscheme=light&font&width=450&height=27' style='border:none; overflow:hidden; width:450px; height:27px;'/></span></div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-3' src='AUTHOR 1 IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='https://plus.google.com/AUTHOR 1 GOOGLE+ ID?rel=author'>AUTHOR 1 NAME</a></h4>
</div>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/AUTHOR 1 GOOGLE+ ID' data-rel='author'/>
</div>
</div>
</div>
</div>

<b:if cond='data:post.author == "Author2 Name"'>
<div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-10105'><ul class='ts-fab-list'><li class='ts-fab-bio-link active'><a href='#ts-fab-bio-below-10105'>About</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below-10105'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below-10105'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below-10105'>Google+</a></li></ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio-below-10105' style='display: block;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-0' src='AUTHOR 2 IMAGE URL HERE' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'><h4><a href='AUTHOR 2 WEBSITE LINK HERE'>AUTHOR 2 NAME HERE</a></h4></div> <div class='ts-fab-content'>AUTHOR 2 BIO HERE</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-1' src='AUTHOR 2 IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://twitter.com/AUTHOR 2 TWITTER PROFILE ID'>@AUTHOR 2 NAME</a></h4></div> <div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&id=twitter-widget-2&lang=en&screen_name=AUTHOR TWITTER 2 PROFILE ID&show_count=true&show_screen_name=true&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='ts-fab-tab' id='ts-fab-facebook-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-2' src='AUTHOR 2 IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://www.facebook.com/AUTHOR 2 FACEBOOK ID'>AUTHOR 2 NAME</a></h4></div>
<div class='fb-follow' data-href='https://www.facebook.com/AUTHOR 2 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 2 FACEBOOK ID&layout=standard&show_faces=true&colorscheme=light&font&width=450&height=27' style='border:none; overflow:hidden; width:450px; height:27px;'/></span></div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-3' src='AUTHOR 2 IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='https://plus.google.com/AUTHOR 2 GOOGLE+ ID?rel=author'>AUTHOR 2 NAME</a></h4>
</div>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/AUTHOR 2 GOOGLE+ ID' data-rel='author'/>
</div>
</div>
</div>
</div>
</b:if>
</b:if>
</b:if>

Customization

Once you have placed the author bio HTML code, replace the highlighted code things such as author name, author social ID's and author image url with your own or with that of the contributor. Don't forget, do this for each author or contributor.

Note: Change red highlighted codes i.e, Author1Name and Author2 Name same as the author registered account name. If minor mistake made, author bio won't appear.

To add author bio widget for more authors, place the following just after the code that I have mentioned in step 2 and do same customization that I said earlier.

<b:if cond='data:post.author == "Author3 Name"'>
<div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-10105'><ul class='ts-fab-list'><li class='ts-fab-bio-link active'><a href='#ts-fab-bio-below-10105'>About</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below-10105'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below-10105'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below-10105'>Google+</a></li></ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio-below-10105' style='display: block;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-0' src='AUTHOR 3 IMAGE URL HERE' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'><h4><a href='AUTHOR 3 WEBSITE LINK HERE'>AUTHOR 3 NAME HERE</a></h4></div> <div class='ts-fab-content'>AUTHOR 3 BIO HERE</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-1' src='AUTHOR 3 IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://twitter.com/AUTHOR 3 TWITTER PROFILE ID'>@AUTHOR 3 NAME</a></h4></div> <div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&id=twitter-widget-2&lang=en&screen_name=AUTHOR TWITTER 3 PROFILE ID&show_count=true&show_screen_name=true&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='ts-fab-tab' id='ts-fab-facebook-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-2' src='AUTHOR 3 IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://www.facebook.com/AUTHOR 3 FACEBOOK ID'>AUTHOR 3 NAME</a></h4></div>
<div class='fb-follow' data-href='https://www.facebook.com/AUTHOR 3 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 3 FACEBOOK ID&layout=standard&show_faces=true&colorscheme=light&font&width=450&height=27' style='border:none; overflow:hidden; width:450px; height:27px;'/></span></div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-3' src='AUTHOR 3 IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='https://plus.google.com/AUTHOR 3 GOOGLE+ ID?rel=author'>AUTHOR 3 NAME</a></h4>
</div>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/AUTHOR 3 GOOGLE+ ID' data-rel='author'/>
</div>
</div>
</div>
</div>
</b:if>

Step 3: Place the script

After you placed the author bio widget HTML code, now you need the script. So, in template HTML editor search for this code </head> and above it, add the following 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>

That's it, now click on "save template".

Hope you liked this complete tutorial on 'how to add multiple author bio widget'. Let me know your valuable feedbacks about this guide and also share this article with your friends. For more updates, like us on Facebook and subscribe us.

Mobile Apps

download application and software

Menu

Thursday, January 7, 2016

How To Add Multiple Author Box In Blogger

Step 1: Place the CSS code of author bio widget

Step 2: Find the code

Step 2: Place the author bio widget HTML code

Customization

Step 3: Place the script

Categories

Blog Archive