¡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:
Recuerda que puedes cambiar el 2 por otro valor, más grande o más pequeño; es a tu gusto :)
Puedes cambiar el color remplazando el fff por el código del color que tu prefieras.
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:hoverIMPORTANTE: 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 {3. Ahora lo que van a hacer es agregar antes del corchete final } (el que cierra, eh!) es lo siguiente:
Aquí en medio agregas las líneas
de los efectos que tu quieras.
*Borra esto que esta en cursiva, claro*
}
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:
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.
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.
¡Buenas! ¿Quieres participar en el sorteo de un libro? Entra en: http://jedentag15.blogspot.com.es/2012/12/sorteo-de-un-libro.html
ResponderEliminary 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
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.
ResponderEliminarMe 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
Vale, hay un pequeñisimo error {o por eso no me funcionaba}
ResponderEliminarEl 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?
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!
EliminarAhi 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:
ResponderEliminarsegunda:
.mobile h3.post-title {
margin: 0;
}
tercera:
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
¿cual cojo?
arg no sale,es uno en donde pone group
ResponderEliminarY que parte pongo para poner el code?¿
EliminarEs 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?????
EliminarAy la verdad no te entiendo, qué es lo que no encontras??? Escribi bien por favorrr, porque sino no puedo ayudarte!
EliminarDICE: 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
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 :)
EliminarCata pero dí los efectos,que yo no me lo sé :( Graacias guuapa , siento la molestia U.U
ResponderEliminarEH? Como que diga los efectos, a qué te refieres?
Eliminar