Tutorial: {Edita la fecha de la entrada: Efecto cinta decorativa}

Hola!, hoy les traigo un tutorial de una seguidora, que me preguntó como se hace esa hermosa cinta decorativa en la fecha del post, pues, amiga aquí esta la respuesta:
PD:  Es mejor agregar este efecto de cinta en la fecha si tienes tus gadgets a la derecha, ya que si no te saldrá igual que a mi y se vera tapando algún gadget.

1. Vamos a Plantilla > Editar HTML
2. Buscamos (con Ctrl + F) <b:skin> y le damos clic a los puntos suspensivos de la derecha
3. Colocamos antes de <b:skin>: (siempre pongo esto porque a muchas personas se les olvida y despues dicen que no les sirve porque no hacen este paso importante)
4. En ese texto vas a tener que buscar (con ctrl+f claro) esta linea:

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

• Vas a tener que cambiar esa linea por esta:

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

• Luego acabado esto, busca: 

]]></b:skin>

• Arriva de ese codigo colocas este: 

.date-cinta {
position: absolute;
padding: 3px 0px 3px 10px;
width: 66px;
font-size: 12px;
font-family: calibri;
color: #eee; /* COLOR DEL TEXTO 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;
}

 Y editas los colores a tu gusto. 

• PERO, no hemos terminado aun, tienes que agregar estas configuraciones (esto es esencial para que el texto de la fecha que este dentro de la cinta se vea bien y no salga fuera de ella):

1. Vas a Diseño, luego Editar entradas del blog  y después Opciones de la página de entrada
2. Por ultimo vas a Configuración, luego Idioma y formato y después Formato de cabecera de fecha:

Ahora solo te queda guardar y ver como queda la cinta, recuerda que si vas a utilizar este tutorial para publicarlo en otro lado, por favor da créditos. 

Sigo recordando a los ganadores del concurso para que me envíen un e-mail de lo que quieren de fondos, si no, no podre hacérselos. 

PD: Solo 1 ganadora me escribió sobre que quería del fondo, mas tarde te lo entregare pero estoy algo ocupada por el momento.

Espero que les haya servido este post, y como verán es sencillo y no tiene muchas complicaciones. Los veo en otro post que subiré pronto, hasta luego bye!