Cómo enmarcar el título de tus posts automáticamente

Bien, la otra semana escribí este post en el que te contaba cómo añadir una línea o separador en tus posts de Blogger, hubo gente que me preguntaba en los comentarios del mismo si era posible incluirla de forma automática en cada post, para no tener que andar haciéndole manualmente cada vez que escribieran una nueva noticia !, pero no era posible, aunque si esta otra forma que te cuento en este post.




Vamos a trabajar en esta ocasión con CSS, no te preocupes, será más sencillo aún que con HTML... Para simplificar el proceso al máximo y no tener que andar tocando la plantilla en HTML (que sé que a muchas os da miedo) vamos a hacerlo de este otro modo :

[ 1 ] Vete a "Plantilla", "Personalizar"


[ 2 ] "Avanzado", "Añadir CSS"



[ 3 ] Y ahora en el cajetín blanco de debajo de "Añadir CSS", únicamente deberás añadir el siguiente código :

h3.post-title, hr {
border-right: 3 px solid #b5a294;
border left: 3 px solid  #b5a294;
border-top: 3 px solid #b5a294;
border-bottom: 3px solid #b5a294;
}

Bien ahora voy a explicarte un poco el código :

  • Con la "primera línea" lo que hacemos es aplicar automáticamente este estilo tanto a todos los posts que publiquemos a partir de ahora como a los que hayamos publicado hasta este momento.
  • El término "border" sería para indicar dónde queremos un borde o línea, resultando :
    • border-right : border dcho.
    • border-left : borde izdo.
    • border-top : borde superior
    • border-bottom : borde inferior
  • El valor "número seguido de px," sería el grosor del borde o línea en píxeles, obviamente a más valor mayor grosor y a menor valor menor grosor.
  • El término "solid" corresponde al estilo de borde o línea, en este caso sería una línea sin más, pero puedes aplicar estos otros estilos por ejemplo :
    • Dotted - Sería una línea compuesta por puntos
    • Dashed - Sería una línea de rayas discontinuas
    • Double - Con líneas dobles
  • El valor situado tras # sería el código correspondiente al color que desees, hay un montón de páginas dónde podrás inspirarte y buscar dicho código, yo te recomiendo esta.

Te muestro a continuación algunos ejemplos con su código correspondiente :

Ejemplo 1 :

h3.post-title, hr {
border-top: 3px dotted #d5e3ad;
border-bottom: 3px dotted #d5e3ad;

}


Ejemplo 2 :

h3.post-title, hr {
border-right: 2px dashed #d5e3ad;
border-left: 2px dashed #d5e3ad;
border-top: 2px dashed #d5e3ad;
border-bottom: 2px dashed #d5e3ad;

}





Ejemplo 3 :

h3.post-title, hr {
border-bottom: 6px double #d5e3ad;
}



Como puedes ves es muy sencillo jugar con las diferentes opciones y lograr resultados muy resultones !!

Y ya, como truco final, comentarte que si te interesea también puedes aplicar estos estilos de borde o línea al título de los gadgets o widgets, para ello, sólo tendrás que sustituir la primera línea ( es decir, la de h3.post-title, hr { ), por .sidebar h2, hr { )

Por cierto, si te interesa el tema del diseño de blogs, te aconsejo visitar Tritrazos, un sitio web de diseño gráfico en el que podrás acceder a llamativos diseños para tu blog por muy poquito dinero.

¿ Qué te ha parecido el post de hoy ?, ¿ te inclinas por estas líneas o por las vistas en este otro post ?

¡Muchas gracias por compartir el post!

Sobre la autora

¡Muchas gracias por tu visita!, si te ha gustado el post no te olvides de comentarlo ni de compartirlo en tus redes sociales ; )

8 comentarios:

  1. ¡Ainch que torpeee soooy! Me tengo que sentar a mirarlo con más calma, quiero hacer cambios pero me hago un lío. Pienso que antes debería decidir que cambios quiero...gracias por los consejos. ¡Un besazo guapa!

    ResponderEliminar
    Respuestas
    1. Hola ! No es nada complicado, en serio.. pero la más mínima duda ya sabes dónde estoy, pregunta sin problemas... ¿ vale ?

      Un beso también para ti

      Eliminar
  2. Buala...!! hola Nerea , vengo de cabeza desde la Red... acabo de conocerte y me ha encantado este post , está superbien explicado y además lo encuentro muy , pero que muy chulo... a ver si aprendo algo contigo porque tengo ganas de renovar algo en mi blog y no sé exactamente que es lo que quiero , pero tomo nota de todo...
    gracias por compartir la currá que te has pegao..jaja
    un abrazo , con tu permiso me quedo por aquí para
    seguir aprendiendo..
    un beso

    ResponderEliminar
    Respuestas
    1. Muchas gracias a ti por pasarte ! Me alegro mucho que te sirva mi post, y sobre todo que lo entiendas, a veces me da la impresión de que puedo liar a la gente con tanto código y tanta explicación !!!

      Supongo que lo habrás visto, pero por si acaso, todos los tutos para bloggers los tienes tanto en la pestaña como en la etiqueta de "tutoriales"... y cualquier duda, ya sabes dónde estoy !

      Besos

      Eliminar
  3. Hola :) aplique este tutorial a mi blog y el cambio salta a la vista ! lo que no logre entender es como obtener el código de color de la página que nos sugieres. ( creo estoy oxidada je je ) gracias por responder

    ResponderEliminar
    Respuestas
    1. Hola !

      Luego me paso y le hecho un vistazo al cambio en tu blog....

      En la web sugerida para el tema de los colores, si pasas el ratón por encima de los colores que están situados en el lado dcho., bajo "see similar colors", verás los códigos correspondientes.

      De nada, y espero haberte ayudado.. cualquier otra cosa, ya sabes dónde estoy !

      Saludos

      Eliminar
    2. Gracias por responder :) mira que poco observadora soy ja,ja ,
      ya he visto lo de los códigos . ¡ Feliz fin de semana !

      Eliminar
    3. De nada, faltaría más !

      No te preocupes, despistes tenemos todos.

      Besos y felizfinde también para ti !!

      Eliminar

Follow my blog with Bloglovin