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

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

Comments: 2
data:blog.title
multiple author

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="http://3.bp.blogspot.com/-Viwg6lbo7ak/UTXjRiFKJDI/AAAAAAAAB7k/2hF1sXJbjDk/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(http://2.bp.blogspot.com/-nlx2NQOrdmg/UZS4LgWEgcI/AAAAAAAAC7w/rlh1tV9eoMI/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(http://2.bp.blogspot.com/-DHsUvOVIeRg/UZS4Lrf4AxI/AAAAAAAAC7s/fGMCoScWrxk/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(http://3.bp.blogspot.com/-A1maUsEgTOo/UZS4MOOk4xI/AAAAAAAAC74/acIYjBukNkc/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 http://3.bp.blogspot.com/-Viwg6lbo7ak/UTXjRiFKJDI/AAAAAAAAB7k/2hF1sXJbjDk/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 

invite 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. 

Speak Your Mind

cool dude.
loved it.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *