Tutoriales Sobre Blogger: Caja de co-Autor para varios autores del Blog

En este tutorial veremos como agregar una Caja de co-Autor para varios autores de un blog. En un comentario en una entrada Caja de autor con botones de suscribirse a tu Redes Sociales un bloggers me pregunto ¿si para aquellos que tienen mas
de un autor?. Por eso esta entrada va dedicada para La Pasión Verde que me hizo esta pregunta.
Antes de comenzar veremos una demostración: 

Demostración

Comencemos:

• Paso 1: Vamos a Blogger>> Plantilla>>Editar HTML.
• Paso 2: Buscamos la siguiente linea (Control +F) 

]]></b:skin>

"Recordamos que ]]></b:skin> se encuentra entre las siguiente lineas ►<b:skin></b:skin>  despegable"

• Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente codigo CSS.

<style>
/* Caja de Co-author por www.tutoriales-blogger.info */
.TutorialesBloggerauthorbox {
    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;
}
.TutorialesBloggerauthorbox: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;
}
.TutorialesBloggerauthoravatar {
    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;
}
.TutorialesBloggerauthoravatar img {
    height: 140px;
    width: 100px;
}
.TutorialesBloggerauthorlabel {
    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;
}
.TutorialesBloggerauthorcontent {
    margin-left:120px;
}
.TutorialesBloggerauthorhead {
    border-bottom: 1px solid #BFC4FE;
    margin-bottom: 12px;
    padding: 0 50px 3px 0;
    position: relative;
}
.TutorialesBloggerauthorbox 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;
}
.TutorialesBloggerauthorbox 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;
}
.TutorialesBloggerauthorbox 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;
}
.TutorialesBloggerauthorbox 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;
}
 .TutorialesBloggerauthorbox p.bsbio {
    font-family: 'lucida sans unicode', 'lucida grande', sans-serif;
    font-size: 12px;
    line-height: 18px;
}
.TutorialesBloggerauthorbox p a {
    color: #B1B1B1;
}
/* Caja de Co-author por www.tutoriales-blogger.info */
</style> 

• Paso 4: Ahora buscamos la siguiente linea  

<data:post.body/>

• Paso 5: Justo por debajo de <data:post.body/> pegamos el siguiente código HTML 

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Co-Author Nombree&quot;'>
<div class="TutorialesBloggerauthorbox">
  <div class="TutorialesBloggerauthoravatar">
    <img alt="Nombre del Co-Autor" src="http://lh6.googleusercontent.com/-Gv6QdRn02z4/AAAAAAAAAAI/AAAAAAAAA-s/LfOIAj5Fa7A/s512-c/photo.jpg"/>
    <span class="TutorialesBloggerauthorlabel">co-autor</span>
  </div>
  <div class="TutorialesBloggerauthorcontent">
    <div class="TutorialesBloggerauthorhead">
<h3><a href="https://plus.google.com/u/0/102309934171768207604/">Nombre del Co-Autor</a></h3>
<p>
<a class="BSGoogle+" href="https://plus.google.com/u/0/102309934171768207604/" rel="author" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEwQ7tsfBt5OlywE9HB7_Ylwfj19YM-DWjFzrduMxIisiKs0KSNwzBHxuObosPd2LW_4qIEs4Aj9g55-0t0GL4Cf_ED7BFKZBC6rUo1_ZZtef7lBdaMKMrMXYg03iRqTGdNP9IIzZVp0Hq/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;">Google +</a>
<a class="BSFacebook" href="https://www.facebook.com/TutorialesBlogger" rel="nofollow" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeN42v2eTLRnW5msJK_p0VnmN1gWxITMPAfg4DWOv33GDWYodu-45iwY7JuBE-M6r13KuKuNFUeex62PHDCMMz24kGgtIHlZ5qq36SoypJp4UjN2EDMsrKBZqo2bjNnCdwU99l5X7TUnEc/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;">Facebook</a>
<a class="BSTwitter" href="https://twitter.com/TutorialesBlogg" rel="nofollow" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHA9xofF8Q8vwf7JKM5YprPEpXstwGhKnZlJjAt5_kybhTgqESyz5ORTFMgJosWri794B2t2B9wwP53j344yiLuK7kfgeM40DDp8f7R7ii6AxeXLGv41vgEyaHpHHbp3XKcTUj0KX932B/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;">Twitter</a></p>
    </div>
    <p class="bsbio">Una breve descripcion sobre el Co-Autor o de los varios autores del Blog.</p>
  </div>
</div>
</b:if>
</b:if>

Nota:- 
Nombre completo como esta registrado en Blogger (Debe de ser exacto o no aparecerá el cuadro de co-autor)
Cambia lo que esta en rojo por las de tus Redes Sociales 
Cambia lo que esta en Azul por el nombre del Co-Autor
Cambia lo que esta en OJO por una breve descripcion del Co-Autor

• Paso 6: Guarda los cambios realizados en la Plantilla

Como agregar un Co-Autor en tu blogger.

• Paso 1: Vamos a Blogger>> Configuración >> Lo Básico>> Añadir autor
• Paso 2:  Agregamos el email del autor a invitar (Recuerda que el co-autor debe de tener cuenta de google para poder ser co-autor del Blog)

Recuerda; Nosotros recomendamos únicamente invitar como co-autor, No como administrador