16/6/15

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!
 

2 comentarios:

~No seas ofensivo
~No utilices malas palabras
~Déjame una sonrisa