14 abril 2013

Una original caja de autor bajo las entradas de Blogger

Anteriormente vimos como colocar una Caja de autor en las entradas de tu blog y hoy os muestro otra diferente y bastante original. Se trata de una caja que visualiza una imagen sobre el autor (personalizable) y al colocar el ratón o mousse sobre ella, se desliza y nos da paso al autor del blog, mostrándonos una descripción sobre el y sus diferentes Redes Sociales.


Si quieres colocar esta original caja de autor en tu blog, sigue estos pasos:
1.-  Plantilla - Editar HTML - buscamos (ctrl+f o F3)
<div class='post-footer-line post-footer-line-1'/> o en su lugar <div class='post-footer-line post-footer-line-2'/>

y justamente debajo pegamos lo siguiente:

<style>
.caja{
float:center;
}
.base {
position: relative;
width: 580px;
height: 150px;
margin: 10px auto;
background-color: #f7f7f7;
z-index: 1;
padding: 5px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.izquierda{
position: absolute;
background: #DBDCDE;
bottom: 0;
right: 50%;
left: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.base:hover .izquierda{
right: 100%;
left: -50%;
}
.derecha{
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.base:hover .derecha{
left: 100%;
right: -50%;
}
.portada {
overflow: hidden;
}
.portada .izquierda {
background: url(https://lh6.googleusercontent.com/-mTJGoYJqYP8/UWmSYIdwnII/AAAAAAAALLY/8d-2KSjs7_c/s300/autor.jpg)#DBDCDE;
border:1px solid #F0F0F0;
}
.portada .derecha {
background: url(https://lh3.googleusercontent.com/-c7sIYCZLEss/UWmSXyUODHI/AAAAAAAALLU/Gcjlmd4b2k0/s300/autor1.jpg)#DBDCDE;
border:1px solid #F0F0F0;
}
.base img {
margin-top: 15px;
}
.contenido {
margin-top:-130px;
margin-left:200px;
}
</style>
<div class='caja'>
<div class='base portada'>
<div class='izquierda'>
</div>
<div class='derecha'>
</div>
<img src='https://lh5.googleusercontent.com/-wEmZIe0gpbg/UQEmSl4VaxI/AAAAAAAAINU/C7F0Oq6AsYs/s128/DSC02216.png'/>
<br/>
<div class='contenido'>
<span style='font-family: arial; font-size:16px; '>
Escrito por:
</span>
<span style='font-family: arial; font-size:18px; '>
<b>
<data:post.author/>
</b>
</span>
<p>
<span style='font-family: arial; font-size:12px; '>
Una pequeña descripción sobre ti........
</span>
</p>
<span style='font-family: arial; font-size:16px; '>
Sígueme en:
</span>
<a href='URL de tu Facebook'>
<b>
Facebook
</b>
</a>
|
<a href='URL de tu Twitter'>
<b>
Twitter
</b>
</a>
|
<a href='URL de perfil de Google+'>
<b>
Google+
</b>
</a>
</div>
</div>
</div>

CONFIGURACIÓN:
Cambiar ancho 580px sustituir por su propia medida
Cambio altura  150px sustituir por su propia medida
Cambiar color del fondo # f7f7f7 con color deseado o probar el generador de colores Html

Cambio de imágenes:
Las 2 primeras URL en rojas son las que muestran la parte izquierda y derecha de la caja estando cerrada. Sus medidas son de 300px por 150px, al ser el tamaño de la caja de 580px. Si queréis cambiar el ancho de la caja por menos pixeles, deberéis disminuir el tamaño de las imágenes para que no se descentren de la caja.
La tercera URL es la imagen del autor, debe ser de 128px por 128px.
Lo que está en negrita es fácil no? Una descripción sobre ti.

Redes Sociales:
Cambiar lo azul por vuestras diferentes URL de las redes sociales.

PD: Esta caja se ha habilitado para contener al autor del blog pero es totalmente personalizable para incluir en su interior cualquier cosa, desde una caja para compartir redes sociales hasta una para subscripción por email.
! Lo dejo a vuestra imaginación !

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

9 comentarios

Eb lo que has publicado ninguna caja de autor le entra a mi plantilla :(

Revisa bien los códigos, una simple comilla puede dejar inutilizada la caja.

Saludos.

disculpa Antonio pero no funciona lo e probado y no aparece ninguna caja aun así se te agradece

Gracias amigo, funciona de lujo!!!

Este comentario ha sido eliminado por el autor.

No dejan de sorprenderme tus tutoriales, cada uno me gusta más que el anterior.

¡Muchas gracias amigo!
La mayoría de estas cajitas no me han funcionado :/
Y esta quedó perfecta en mi blog :D
Me suscribo a tu web ;)

Qutal amigo nuevamente aqui dandote problemas :D no logro poner esto en mi blog de hecho varias cosas que no puedo lograr hacer nose si me puedas ayudar quiero darle un estilo muy diferente a esta plantilla, osea no sera la ultima vez que te moleste jejeje espero no ser un cargo para ti amigo pero eres el unico que responde amis comentarios y realmente me ayudas mucho aqui te dejo el blog y espero me puedas ayudar http://computer0wnez.blogspot.mx/

Ownez, el código lo colocas tal cual está en la entrada y debajo de post-footer-line-1'/> o de post-footer-line-2'/>

Coloca las URL de las distintas redes y listo.
Ojo: Solo aparece en las entradas no en portada.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"