0 How to Add Co-author info box for multiple authors’ blog

Many popular blog site has multiple author which is a best way to improve the blog. Because multiple author can write continuously and they make posts constantly as a result that blog get good rank in search engine. Many blog accept guest post and some guest blogger become permanent in posting for this reason blogger wants to turn guest blogger into co-author. Google also accept multiple author or co-author for blog.

Generally a Blog author add author info box below of every blog posts but when it comes to in the matter of multiple author then blogger face some trouble. So I have designed an awesome Co-author info box which can be set at the end of the blog posts. This author box can be used if you want to turn your guest author to co-author.

I have designed this Co-author box with ease-in-out effect which will change the background and border color on mouse over. And also added social networking icons below co-author name to connect author’s social networking sites. Hope this widget will solve your multiple author’s problem.

Live Demo

CSS PART FOR THE Co-AUTHOR BOX

Step 1 Log in to your blogger account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  ►

Step 3 Now find ]]></b:skin> by Pressing  Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> and save your template

<style>
/* Co-author Box By www.bloggerspice.com */
.BlogggerSpiceauthorbox {
    position: relative;
    margin: 20px auto;
   border-radius: 8px;
    border: 8px solid #0484AE;
    padding: 5px;
    min-height: 115px;
    max-width: 650px;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.BlogggerSpiceauthorbox:hover {
background: #04BDFA;
    border: 8px solid #333333;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.BlogggerSpiceauthoravatar {
    background: #FEFEFE;
    border: 3px solid #7B7B7B;
    float: left;
    height: 140px;
    padding: 2px;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 4px 0 #d9d9d9;
    -moz-box-shadow: 0 0 4px 0 #d9d9d9;
    box-shadow: 0 0 4px 0 #d9d9d9;
    width: 100px;
}
.BlogggerSpiceauthoravatar img {
    height: 140px;
    width: 100px;
}
.BlogggerSpiceauthorlabel {
    font-family: 'lucida sans unicode', 'lucida grande', sans-serif;
    background: #333333;
    color: #fff;
    display: block;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    height: 20px;
    margin-left: -43px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    text-align: center;
    width: 86px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.BlogggerSpiceauthorcontent {
    margin-left:120px;
}
.BlogggerSpiceauthorhead {
    border-bottom: 1px solid #BFC4FE;
    margin-bottom: 12px;
    padding: 0 50px 3px 0;
    position: relative;
}
.BlogggerSpiceauthorbox h3 {
    font-family: georgia, serif;
    color: #302E29;
    font-size: 26px;
    font-weight: normal;
    line-height: 30px;
    margin: 0;
    border: none;
    text-transform: none;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.BlogggerSpiceauthorbox h3:hover {
    color: #E65002;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.BlogggerSpiceauthorbox h3 a {
    color: #21201D !important;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.BlogggerSpiceauthorbox h3 a:hover {
    color: #24006B !important;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
 .BlogggerSpiceauthorbox p.bsbio {
    font-family: 'lucida sans unicode', 'lucida grande', sans-serif;
    font-size: 12px;
    line-height: 18px;
}
.BlogggerSpiceauthorbox p a {
    color: #B1B1B1;
}
/* Co-author Box By www.bloggerspice.com */
</style>

HTML PART FOR THE Co-AUTHOR BOX

Step 1 Now Click on Template ->Edit HTML

Step 2 Now click on Edit HTML-> Unfold code  ►

Step 3 Now find <data:post.body/> by pressing Ctrl + F 

Note: You will find 3/4 time this code go for second one. 

Step 4 Now Copy the below code and Paste it after /below <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Co-AuthorName&quot;'>
<div class="BlogggerSpiceauthorbox">
  <div class="BlogggerSpiceauthoravatar">
    <img alt="Mohammad Fazle Rabbi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0YIQ8qIqMjoQ0dCxcRj03BuYIk2sZF-VrsBEO2IoZ86J436AC5P4gdODXoIKEuyUXQFSDsEsu5HrU8SDEbRx09DxThXCugauSmD1ALpP_8titoddhEBdQOrrdlxGb9nQbTgZC5zqVCJ0/s320/Rabbi+(1).jpg"/>
    <span class="BlogggerSpiceauthorlabel">co-author</span>
  </div>
  <div class="BlogggerSpiceauthorcontent">
    <div class="BlogggerSpiceauthorhead">
<h3><a href="https://plus.google.com/102331886274459115104/">Mohammad Fazle Rabbi</a></h3>
<p>
<a class="BSGoogle+" href="https://plus.google.com/102331886274459115104" rel="author" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikv4Cgad_uJ2wwHUqs_C9mPxywVX2v0y_l1I9K_JDKwpqVpbzxwZjnMSV0ieuLoTkjLLFXTBAwJ6L2SYagyF8dNKWXCaBv0QxmcRYuvYgH4OfUmVPrqOPO_QIqwmElOetJgEcIjQ-N3fbp/s1600/BS+Author+G+.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">Add To Circle</a>
<a class="BSFacebook" href="http://www.facebook.com/BloggerSpice" rel="nofollow" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ26NTMt6nguCP-BOXLkkGdNkueUjTS7GMxTwfy_zxBq8iIlafDB-yX3WFYpDEh2dvveR-uJg-kAoeVwWet0kU_O93zwx5uu3KQUT68EMV85XiGymdFt0rdB2pEGBSRbZVS_3oogkBInx3/s1600/BS+Author+facebook.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">Like Us</a>
<a class="BSTwitter" href="http://twitter.com/BloggerSpice" rel="nofollow" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lhHDXKySNmtFPHhyemS55AUAtU0aVFMBtaou-zQ_w601g51MVYarSLPeGp2Fon6yr-wH9M3hKV8JvGxz0_5tHFEoAwIyHFNo0D2o0pqmUoBk-uOHi8z-K7vGOlmdcRNKuf8biCeEOTV0/s1600/BS+Author+twitter.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">Tweet Us</a></p>
    </div>
    <p class="bsbio">Mohammad Fazle Rabbi is the owner and founder of BloggerSpice.com. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share technical hacking/security tips with you.</p>
  </div>
</div>
</b:if>
</b:if>

Customization

• Change Co-AuthorName with author name
• Replace Mohammad Fazle Rabbi with Co-author name
• Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0YIQ8qIqMjoQ0dCxcRj03BuYIk2sZF-VrsBEO2IoZ86J436AC5P4gdODXoIKEuyUXQFSDsEsu5HrU8SDEbRx09DxThXCugauSmD1ALpP_8titoddhEBdQOrrdlxGb9nQbTgZC5zqVCJ0/s320/Rabbi+(1).jpg with your image link
• Replace 102331886274459115104 with your Google Plus Id
• Alter BloggerSpice with your Facebook and Twitter id
• Changed Red Marked line with your own description.

How to Add Co-Author name?

You can get the Co-author name from the Blog Authors section.

• Click On Setting 
• Under Permission You will get +Add Author 

If you face any problem just leave a comments below or email me through contact form I will reply you as soon as possible.