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 == "item"'>
<b:if cond='data:post.author == "Co-Author Nombree"'>
<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/AVvXsEjVgNYiLcUjlEMWA2oFvaU1EmBQLaN8estPPEQv5ImimNBG70HkHNzXSQyDM_7oQG3L8jIJsBJzHkU3FZrNSUzbs44vAMrc-z1xg791hW9wd9oV-gRpXlRwup3zxKPttLExo07QCXAnlNiZ/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/AVvXsEjqA93JmJHM9l-A06HJcahyopsIgOVxwc-H9H2VD-sC94wn_FvxaK5-ZQz5mS_Ul8b7LEx4iAHX9xtmtECiJzjA-ApmVw7EQGZLeZ-JPUUVvmByuy3sQMMy9ySWovcy7y4EUwh0WYb6vGDL/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/AVvXsEgdwCJBd_Icuczb5SWz2pnBrxKIfC3QwkAH416aM6kEseF6V2DBjomLmO3U4H5aw3y3_VfCdwW73knNpNi4S5dKwMW4JAwsy1R5nm8srv2-D0sG8PdzkNfvPsHiE3DjyjtJKmG_nGkfNYam/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>
- 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
Fuente: Tutoriales-Blogger
0 comentarios:
Publicar un comentario