Efecto: "Box Date" {Date post + Links sociales}

No sabia que nombre ponerle a esto o como explicarlo en el titulo de manera resumida ~

Pero básicamente es como muestra la imagen: los datos de tu entrada + un bonito icon + links sociales, TODO "flotando" o ubicado a un costado del post {al lado del titulo como se ve}.

Para poder tener este efecto, truco o como quieran llamarlo, sigue estos pasos:

ANTES DE COMENZAR!

Ve a Diseño / Entradas del blog / Editar

Allí edita como muestra la siguiente imagen:

{Lo que NO esta marcado NO  lo coloques, quedara muy largo tu "box" 

& no quedara bonito al verlo}

Ahora si! COMENCEMOS:
1er paso: Ve a Plantilla / Edición HTML / Activa el buscador de Blogger ¿Como?
2do paso: Busca la siguiente linea:
<div class='post-footer'>
Encontraras DOS lineas iguales, nos interesa la SEGUNDA.
3er paso: Una ves encontrado la linea necesaria, pega DEBAJO de ella lo siguiente:

<center>
<script type="text/javascript">
numquotes = 4;
var quotes = new Array(numquotes);
quotes[0]="<img class='icon' src='URL ICON'/>";
quotes[1]="<img class='icon' src='URL ICON'/>";
quotes[2]="<img class='icon' src='URL ICON'/>";
quotes[3]="<img class='icon' src='URL ICON'/>";
var rand = Math.floor(Math.random()*numquotes);
document.write(quotes[rand]);
</script>
  <br/>
  <a href="URL LINK"><img class='social' src='URL PIXEL'/></a>
  <a href="URL LINK"><img class='social' src='URL PIXEL'/></a>
  <a href="URL LINK"><img class='social' src='URL PIXEL'/></a>
  <a href="URL LINK"><img class='social' src='URL PIXEL'/></a>
</center>

Edita lo marcado.
URL ICON: Sera el icon que aparece primer, el tamaño debe ser de 100x100px!
URL LINK: Son los links de tus redes sociales!
URL PIXEL: Seran los iconitos sociales, puedes colocar gifs a elección!

4to paso: Busca ahora lo siguiente:

]]></b:skin>

ARRIBA pega el código CSS:

.post-footer { /* BOX FLOTANTE */
background: #FFEFE8; /* FONDO */
padding: 7px;
top: 0px;
left: -140px;
width: 100px;
border-radius: 3px 0 0 3px; /* BORDES REDONDEADOS */
border: 1px dashed #FFBDC1; /* BORDE */
border-right: 8px solid #FFBDC1; /* BORDE DERECHO */
position: absolute;
overflow: hidden;
font-size: 9px; /* TAMAÑO DE LETRA */
font-family: arial; /* TIPO DE LETRA */
text-transform: uppercase;
}
.post-footer a{
background: #A3D9C4; /* FONDO DE LINKS */
color: #FFEFE8; /* COLOR DE LINKS */
}
.post-footer a:hover{ /* LINKS {hover} */
background: #FA7FA2;
color: #FFEFE8;
}
.post-footer:hover .icon{
border: 5px double #A3D9C4; /* BORDE DEL ICON {hover} */
}
.social {opacity: 0.50;}
.social:hover {opacity: 1;}
.icon {
width: 92px;
border: 5px solid #FFBDC1; /* BORDE DEL ICON */
padding: 0px;
}

Edita lo marcado.
Presiona "vista previa"
Si esta todo en orden guarda los cambio & listo tu efecto "Box Date"!