Fecha De Entrada Efecto Circulo.

Ir A Diseño / Edicion HTML: presiona sobre el recuadro de tu plantilla para activar el buscador.
Una ves aquí, buscamos {Ctrl + F}:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Encontraras la misma linea DOS veces. La segunda es la importante.
Cambiala {Ambas lineas por las dudas} Por:
<div class='date-circle'><data:post.dateHeader/></div>
Guardas & Buscas {Ctrl + F} ]]></b:skin>
ARRIBA Pegas Lo Siguiente:
h3 {
  padding-top:10px;
  padding-left:13px;
}
.date-circle {
  padding: 3px;
  width:80px;
  height:60px;
  font-size: 12px;
  font-family: calibri;
  color: #fff;
  background: #f22574;
  padding-top:20px;
  text-align:center;
  border: 3px double #c11b5a;
  border-radius: 100%;
  margin-left:-80px;
  margin-bottom:-80px;
  bottom: 100%;
  -moz-transition: all 0.4s ease-out;
  -webkit-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}
.date-circle:hover {
  -moz-transition: all 0.4s ease-out;
  -webkit-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
  -webkit-transform: rotate(360deg) ;
  background: #fff;
  border: 3px solid #fdce03;
  color:#f22574;

}
Por Ultimo Editas Lo Que Esta En Cursiva:
date-circle [circulo normal]
color: #fff; COLOR DE LETRA
background: #f22574; FONDO DEL CIRCULO
border: 3px double #c11b5a; BORDE DEL CIRCULO

date-circle:hover [circulo al pasar el cursor]
background: #fff; COLOR DE FONDO
border: 3px solid #fdce03; BORDE DEL CIRCULO
color:#f22574; COLOR DE LETRA

13 comentarios:

  1. LOL lo intentare para mi plantilla de navidad wiii :D

    ResponderEliminar
  2. Hola cariño :D perdona las molestia cambien el link de mi blog haora es este http://world-desu.blogspot.com perdon las molestias U.U

    ResponderEliminar
  3. era justo lo que buscaba, pero habra con otras formas???

    ResponderEliminar
  4. No me funciona >.< hice todo pero no aparece D: mi blog:

    http://yuki-miku-blog.blogspot.com.ar

    espero que me puedas ayudar n.n

    ResponderEliminar
  5. Hola! esta re lindo ese detalle en la fecha pero en mi blog no lo puedo pones xq? ayuda pliis
    mi blog es: lalocura-lafelicidad.blogspot.com

    ResponderEliminar
  6. Esta precioso! Lo puse y se que me sale, pero... detrás de la entrada :$

    Mira:
    http://enlasmalasyenlasbuenas.blogspot.com.es/

    ¿hay solución?
    BESAZOS! Feliz Navidad (:

    ResponderEliminar
  7. Estaba buscando este tutorial por todos lados! Y sirvió, lo coloqué y todo, pero aparecía solo la mitad del círculo debido al diseño de mi blog. No se podrá poner de otra forma? Algunos tienen como si fuera una etiqueta pequeña, no sé si me explico xD Responde en mi blog si podés, por favor :)

    ResponderEliminar
  8. Hola! no encontre, los códigos.
    Mi plantilla es simple.
    Besooos!

    ResponderEliminar
  9. Como se puede poner el código con la plantilla nueva?
    es un lio --'

    ResponderEliminar
  10. Seguí el tutorial y ya coloqué el efecto! Te di los créditos en la sección correspondiente!
    Saludos, muchas gracias.

    ResponderEliminar
  11. Muchas gracias por este hermoso tutorial, sin dudas tu blog es el mejor! e aprendido mucho gracias a tus tutoriales y me han servido muchisimo c:

    ResponderEliminar