FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Efectos en el título de las entradas

19 dic 2012

¡Hola linduras! Hoy les traigo unos efectos para los títulos de las entradas de vuestros blogs al pasar el cursor por encima. Les enseñaré un par de cositas, entre ellas los 2 efectos que ahora se ven en mi blog: como separar los caracteres y como ponerles una sombrita. 

Espero que les guste mucho y que les sirva :) Cualquier duda que tengan me pueden dejar un comentario, vale?

Ok, comencemos.


El efecto es el que les muestro en esta fotito y se ve cuando pasamos con el cursor por encima del título.


1. Como siempre, vamos al editor HTML de nuestra plantilla.
2. Abrimos el buscador (CTRL+F) y buscamos esto:
h3.post-title a:hover
IMPORTANTE: Si no te sale el h3.post-title a: hover copia lo que sigue y agregalo debajo de h3.post-title (después del corchete que cierra })

 h3.post-title a: hover {
Aquí en medio agregas las líneas
de los efectos que tu quieras.
*Borra esto que esta en cursiva, claro*
}
 3. Ahora lo que van a hacer es agregar antes del corchete final } (el que cierra, eh!) es lo siguiente:
letter-spacing: 2px;
Si quieres que las letritas sólo se separen.
Recuerda que puedes cambiar el 2 por otro valor, más grande o más pequeño; es a tu gusto :)
  text-shadow: 1px 2px 0px #fff;
 Si quieres que tus letritas también lleven sombrita.
Puedes cambiar el color remplazando el fff por el código del color que tu prefieras.
Si quieres ver los 2 efectos al mismo tiempo, pues simplemente agregas las dos líneas:
letter-spacing: 2px;
text-shadow: 1px 2px 0px #fff;
Si también quieres cambiar el color del texto sólo tienes que agregar lo que sigue:
color: #ffffff;
Y reemplazar el ffffff por el código del color que tu quieras ponerle. Para ver los códigos de los colores puedes hacer clic aqui.

Y listo; le dan a "Guardar plantilla" y podrán ver los cambios en vuestros maravillosos blogs :) Espero que se haya entendido, como dije más arriba si tienen alguna duda no duden en dejar un comentario! Un beso.

12 comentarios :

  1. ¡Buenas! ¿Quieres participar en el sorteo de un libro? Entra en: http://jedentag15.blogspot.com.es/2012/12/sorteo-de-un-libro.html
    y mira las bases para poder inscribirte.
    ¡Anímate y participa! Mucha suerte ^^

    PD: Me gusta mucho los diseños que haces, son muy bonitos y tu blog está de maravilla :D

    ResponderEliminar
  2. Hooola, una duda. No seria que cuando pasas el cursor encima del titulo "se activa" el efecto? porque a mi me aparece directamente estatico las letras separadas.
    Me podrias explicar comentando en mi blog, porque soy despistada :$
    quiero que me quede como hay en tus enlaces, que paso el cursor y se separan las letras porfaaaa

    ResponderEliminar
  3. Vale, hay un pequeñisimo error {o por eso no me funcionaba}

    El codigo h3.post-title a: hover {
    lo puse, y no andaba xDD

    Bueno, y se me ocurrio borrarle el espacio de : hover
    h3.post-title a:hover {

    Y ahi si me funciono xD

    Ahora mi pregunta es... ¿coomo puedo poner una font que no sea de blogger en el titulo de las entradas? Está el tuto en el blog?

    ResponderEliminar
    Respuestas
    1. No, es un poco liado hacer eso, requiere de una página que entiendo poco ya que la descubrí hace poquito. Haré el tutorial en cuanto pueda!

      Eliminar
  4. Ahi un problema que tengo,no me sale el h3.post-title a:hover y puse la otrea opcion pero me salen 3 y utilizo la plantilla sencillo,las opciones son:





    segunda:

    .mobile h3.post-title {
    margin: 0;
    }

    tercera:

    h3.post-title, .comments h4 {
    font: $(post.title.font);
    margin: .75em 0 0;
    }

    ¿cual cojo?

    ResponderEliminar
  5. arg no sale,es uno en donde pone group

    ResponderEliminar
    Respuestas
    1. Y que parte pongo para poner el code?¿

      Eliminar
    2. Es que no me eterono me sale...lo he puesto en las partes cortas ero tampoco sale,porfavor,explicame y ya lo he mirado ylo he puesto pero en cual e las tres lo oogo?????

      Eliminar
    3. Ay la verdad no te entiendo, qué es lo que no encontras??? Escribi bien por favorrr, porque sino no puedo ayudarte!

      DICE: Si no te sale el:

      h3.post-title a:hover QUE ES LO QUE ENTIENDO QUE NO ENCUENTRAS (y que es normal que no venga)

      copias esto: h3.post-title a: hover y lo agregas debajo de:

      h3.post-title

      Eliminar
    4. Pero no se si es eso lo que no te sale o que, escribe más claro por favor... al hacerlo presta atención, lee bien que te tiene que salir porque funciona en todas las plantillas de Blogger :)

      Eliminar
  6. Cata pero dí los efectos,que yo no me lo sé :( Graacias guuapa , siento la molestia U.U

    ResponderEliminar