Caja de co-Autor para varios autores en Blogger

sábado, 22 de junio de 2013

Enviar
print this page

Los amigos de Tutorial-Bloggers nos traen este tutorial donde veremos como agregar una Caja de co-Autor para varios autores de un blog en Blogger. Antes de comenzar veremos esta 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
    Comparte:

    0 comentarios:

    Publicar un comentario

    Deja tus dudas o recomendaciones por aquí.

    Addthis

     
    Design by Herdiansyah Hamzah | Published by Borneo Templates | Powered by Blogger.com. Traducido al español por Blogarizate
    © Copyright 2011-2013 Blogarizate Todos los derechos reservados.