Tutorial:Personalizar fecha 1 ♥




Hoy les traigo otro tutorial ,personalizar la fecha , hay diversas formas de efectos,bueno este efecto cambia de color y de borde ¡aqui una imagen de como queda :



Bueno aora si el tutorial,si les gusta sigue los pasitos siguientes :
 Plantilla Basica: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Pegar el siguiente codigo antes de ]]></b:skin>
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )

.main-inner h2.date-header {
margin-right: -75px;
float: right;
font: Tahoma;
color: #fff;
text-shadow:0 1px #FFBADD;
background: #f9b2c3;
font-size: 12px;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
-webkit-border-radius: 2px;
-webkit-border-bottom-right-radius: 2;
-moz-border-radius: 2px;
-moz-border-radius-bottomright: 2;
border-radius: 4px;
border-bottom-right-radius: 2;
box-shadow: inset 0 0 30px #FDA7C6, 0 0 2px #FDA7C6;
-webkit-transition-duration: .50s;
}
.main-inner h2.date-header:hover {
text-shadow:0 1px #F9BAFF;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
background: #E7BCFD;
box-shadow: inset 0 0 30px #E0AEFB, 0 0 2px #E0AEFB;
-webkit-border-radius: 0px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 0px;
-moz-border-radius-bottomright: 0;
border-radius: 0px;
border-bottom-right-radius: 0;
-webkit-transition-duration: .50s;
}
#fff:Color de la letra
#f9b2c3:color del fondo
#FDA7C6:color del fondo las esquinas
#E7BCFD:color del fondo al pasar el cursor
#E0AEFB:color del fondo de las esquinas 

Y pones guardar  ¡
Notita:Este tutorial no recuerdo si la publique,en mis entradas guardadas taba en borrador.

NOTAS RESPONDIENDO DUDAS:
Para Jochi Cat : Bueno es diferente cada codigo en una plantilla por ejemplo en la plantilla Travel esta asi el codigo :
.main-inner h2.date-header {
En tu plantilla esta asi :
.main-inner .widget h2.date-header {
Entonces busca ese codigo .main-inner .widget h2.date-header { y abajo colocas el codigo que esta debajo
.main-inner h2.date-header {
Mas rato vuelvo a esplicarlo mejor ,estoy con el tiempo >w<
Notita para Violeta Dreamer :
Ya que no pudiste entonces al codigo que pegaste main-inner h2.date-header { debajo le aumentaremos el siguiente codigo !important asi se vera :

main-inner h2.date-header {
margin-right: -75px !important;
float: right !important;
font: Tahoma !important;
color: #fff !important;
text-shadow:0 1px #FFBADD !important;
background: #f9b2c3 !important;
font-size: 12px !important;
padding-bottom: 5px !important;
padding-top: 5px !important;
padding-left: 5px !important;
padding-right: 5px !important;
-webkit-border-radius: 2px !important;
-webkit-border-bottom-right-radius: 2;
-moz-border-radius: 2px !important ;
-moz-border-radius-bottomright: 2;
border-radius: 4px !important;
border-bottom-right-radius: 2;
box-shadow: inset 0 0 30px #FDA7C6, 0 0 2px #FDA7C6 !important;
-webkit-transition-duration: .50s !important;
}

y listo ahora te dire por que puse este codigo !important
!important  :Cualquier código que vaya acompañada de un !important tendrá mayor importancia que cualquier otro código que tengas.

20 comentarios :

  1. muchas gracias lo voy a usar ahora mismo

    ResponderEliminar
    Respuestas
    1. owo¡ok,yo habia echo un tutorial como le tengo yo mas antes,pero se me borro u.u¡ Pero bueno lo are cuando pueda *-*,por mientras hay este modelo :3

      Eliminar
  2. AWWWWWWW Luna-chan *0* a los tiempos *-* regresé y veo tu blog ...y está tan bello como siempre! Ey buen tutorial...ya me preguntaba como le hacian pa la fecha XD no me salía le codigo ;w; THANK!

    ResponderEliminar
  3. muy buen tutorial, gracias por el ^^

    ResponderEliminar
  4. Esta muy kawaiii!!! :DDD

    Muchos besos y se me cuida!!

    ResponderEliminar
  5. Asdf*^* tendre en cuenta este tuto^ ^ Ah, y puse un botoncito de creditos que lleva directo a este blog, por cierto, os afilio, vale?
    Me encanta este blog ><!! Besos!!

    ResponderEliminar
    Respuestas
    1. OwO ¡ gracias por los creditos :3 ,io tambien te afiliare *w*

      Eliminar
  6. waaa que hermoso que esta! espero hacer una remodelacion del blog, aunque de verdad se me da pesimo u.u

    ResponderEliminar
  7. Oye, ya te afilié, este es mi blog, lo acabo de crear y tiene poquito contenido, pero ya te di créditos, arigatou n.n http://solodescarganime.blogspot.com/

    ResponderEliminar
  8. Oye, podrías hacer un tutorial de como poner la música en el blog como la tuya??? Porfavor

    ResponderEliminar
  9. que buen tuto!!!! >u<
    queda realmente increíble y lindo ^v^

    besos!!! ^-^

    ResponderEliminar
  10. Que hermoso blog y que estupendo tutorial. Podrias hacer uno para la plantilla Fantástico S.A?^^

    ResponderEliminar
    Respuestas
    1. Hola este modelo de fecha tambien funciona en esa plantilla solo hay una diferencia de codigo nada mas :3 pondre una notita al final de la entrada sobre lo que tienes que hacer n.n¡

      Eliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥