Tutoriales Blogger: Personalizar Títulos de Entradas

20 de septiembre de 2015

Hola, Hola mis queridos lectores, hace días no hacía otro tutorial por lo que aquí les traigo un nuevo tutorial bastante fácil como los que hemos visto hasta ahora. Espero les sea de mucha ayuda, así que empecemos.

Tutorial: customizar el título de la entrada

Aprenderemos varias cosas, cómo hacer que el título cambie de color, como centrarlo y como subrayarlo o ponerlo entre dos líneas.

Para esto haremos lo siguiente, vamos a Plantilla → Personalizar → Añadir CSS y pegamos el siguiente código:

h3.post-title a, h3{
color: #000000; /**Título de un sólo color (aquí puesto en negro)**/
border-top: 3px solid #000000; /**Línea superior (aquí puesto en negro)**/
border-bottom: 3px solid #000000; /**Línea inferior (aquí puesto en negro)**/
text-align: center; /**Título centrado**/
}

Al añadir este código el título nos quedará así:


CAMBIOS:

Color del Título: Lo cambiamos por el que queremos cambiando los valores hexadecimales que están en verde.
Línea superior/Inferior: Aquí también podemos hacer varios cambios:
     * cambia el color de las líneas sustituyendo lo que está en verde 
     * cambia el ancho de la línea sustituyendo lo que esta en rojo (si quieres que alguna línea no aparezca cambia el valor 3px por 0px. 
    * Cambia el tipo de línea (cambiando la palabra solid por alguna de las que te dejaré más abajo).
Título centrado: Si no quieres el título centrado, sólo tienes que eliminar esta línea.

Tipos de Lineas:



Opcional:

Si quieres cambiar el color de visitado o el color del Título al pasar el ratón por encima solo tienes que agregar debajo estos dos códigos y cambiar lo que esta en Azul por los valores que quieras:

Color del Título Visitado:

h3.post-title, h3 a:visited{
  color: #666666;/*Color del enlace del título visitado*/
  text-decoration: none;}/*Sin decoración, para que sea igual que el título a secas*/


Color al pasar el ratón por encima:

h3.post-title, h3 a:hover{
  color: #ffcc66;/*Color del enlace del título al pasar el ratón por encima*/
  text-decoration: none;}/*Sin decoración, para que sea igual que el título a secas*/

Y así Habremos personalizado los títulos de nuestras entradas. 
Si te gustó la entrada no dudes en compartirla, gracias por tu visita, Feliz Dia!! ^^

Ross 

8 comentarios:

  1. Hola!
    Muy chulo y útil el tutorial, gracias por compartirlo.
    Besos

    ResponderEliminar
  2. Hola!! Gracias por el tutorial... me viene muy muy bien jajaja soy muy patosa con el diseño del blog
    Un besote!

    ResponderEliminar
  3. Hola!!!! me encanto tu blog. Me quedo por aquí. besos

    ResponderEliminar
  4. ¡Hola! Me encanta tu blog y me sirvió muchísimo el tutorial, así que gracias! Ya te sigo <3
    Te espero en mi blog
    http://fuckthemundanes.blogspot.com.ar/
    Besos

    ResponderEliminar
  5. ¡Hola! muy bueno el tutorial ^^
    un beso.

    ResponderEliminar
  6. ¡Qué práctico! me ha parecido fabuloso

    Un beso

    ResponderEliminar
  7. Hola, guapa
    ¿Y como hacemos si solo lo queremos centrar?

    ResponderEliminar
    Respuestas
    1. Hola linda. Si sólo lo quieres centrar aplica el siguiente código y listo:

      h3.post-title a, h3{
      text-align: center; /**Título centrado**/
      }

      Eliminar