√ 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.

VER DEMO

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYpsGaOXpfXTKGHFoWxGvTHxbE-VxNz8ivl2VE33mz424n9oHnht1p8nBYz-iqN6qjC6QZprCfHwF7aLDRMUritBdTv3_ZZgEqs_turO1VksCUA0KdM2OSaT0c-SRqX4OtZQGVxI9ZeRLi/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 !