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: 

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(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;">Google +</a>
<a class="BSFacebook" href="https://www.facebook.com/TutorialesBlogger" 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;">Facebook</a>
<a class="BSTwitter" href="https://twitter.com/TutorialesBlogg" 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;">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 

    - - 3 Comentarios
    Tag

    Comentarios (3)

    1. Este comentario ha sido eliminado por un administrador del blog.

      ResponderEliminar
    2. Muy bueno! Se puede usar con más de dos autores?

      ResponderEliminar
      Respuestas
      1. Claro solo tienes que agregar el paso 5 tantas veces tengas co-autores, osea si tienes dos autores agregas 2 veces el paso 5, si tienes tres agregas 3 veces el paso 5.

        Espero que me hallas comprendido

        Eliminar
    :))
    :((
    :D
    :(
    :)
    :-)
    ;)
    =))
    :p
    =.=
    ==
    ^_^
    /=he
    :*
    /=r
    /=l
    :v
    /=ok
    /=clap
    (y)
    (yy)
    /=hi
    /=j
    /=hup
    /=hd
    /=hl
    /=hr
    /=s
    <3

    Instrucciones Para omentar

    Incertar Enlace

    Utilice el codigo <a href='LINK'> EJEMPLO </a>

    Cargar Imagen

    [img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

    Formato Word

    <b> negrita </b>
    <i> cursiva </i>
    <u> texto subrayado </u>
    <strike> texto tachado </strike>

    Insertar un Fragmento de codigo

    Primero use esta herramienta para codificar el codigo que quiera agregar.
    Luego utilice el codigo [code] CODIGO HTML [/code]

    Cerrar