Fecha del post estilo "Cinta decorativa"

La idea de este tutorial, se basa en el tutorial ya publicado anteriormente: Fecha del post "Circle Efect". Lo único que hice fue modificar el formato del circulo, quitándole el efecto de "border-radius" & agregando el detalle en las puntas, dándole un estilo de "cinta decorativa".

EMPECEMOS!

Para colocar este estilo, nos dirigimos a Plantilla / Edición HTML / & buscamos con CRTL + F, la siguiente linea:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Encontraras la misma linea DOS veces. La segunda es la importante.

Una vez encontramos esto, lo reemplazamos por lo siguiente:

<div class='date-cinta'><data:post.dateHeader/></div>

Por ultimo, volvemos a buscar en nuestra plantilla:

]]></b:skin>

& ARRIBA de ello, pegamos el codigo CSS de nuestro efecto:

.date-cinta {
  position: absolute;
  padding: 3px 0px 3px 10px;
  width: 66px;
  font-size: 12px;
  font-family: calibri;
  color: #eee; /* COLOR DE LA FECHA */
  background: #00c2c2; /* FONDO DE LA FECHA */
  text-align: left;
  margin-left: -93px;
  margin-bottom: -80px;
  z-index: 1;
  -moz-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.date-cinta:hover {
  -moz-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  width: 76px;
  margin-left: -103px;
}
.date-cinta:before {
border-color: #00c2c2 transparent #00c2c2 transparent; /* COLOR DE LAS PUNTAS */
border-style: solid;
border-width: 11px;
content: "";
position: absolute;
left: -11px;
top: 0px;
}

Editamos lo marcado.

Una vez todo editado, debemos asegurarnos del formato de las fechas que tenemos seleccionado para los post. Para esto podemos ir tanto a Diseño como a Configuraciones:

• Diseño / Editar entradas del blog / Opciones de la página de entrada.
• Configuración / Idioma y formato / Formato de cabecera de fecha.

Llegando de la forma que mejor nos parezca, debemos tener  o seleccionar, alguno de los formatos resumidos, por ejemplo, alguno de los siguientes:

Como modificar el efecto hover ¿?

Si observamos el código CSS, vemos dos lineas en negrita:

  width: 76px;
  margin-left: -103px;

Estas mismas son las que generan el efecto de "estiramiento" de la cinta al colocar el cursor sobre tal. Para reducir o aumentar la longitud {el largo que se estirara}, debemos aumentar cada valor que allí vemos, simultáneamente.

Es decir, si yo aumento el primer valor (76px) a 86px {le sume 10 unidades} al segundo valor (-103px) lo tendré que aumentar en 10 unidades, es decir me quedaría en -113px.

& así podremos darle un efecto mas largo o mas corto, según deseamos.

saludos mágicos! 

ヾ（*⌒ヮ⌒*）ゞ

~