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

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

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. 
How to Add Co-author info box for multiple authors’ blog
4 Stars stars - "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 mu...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *