Café largo de ideas Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

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 {
¿ Qué te ha parecido el post de hoy ?, ¿ te inclinas por estas líneas o por las vistas en este otro post ?Quizás también te interese :
Qué es y cómo mejorar en Alexa
Iniciativa para bloggers con redes sociales
Cómo agregar una línea separadora entre los posts y los gadgets en Blogger

Fuente: este post proviene de Café largo de ideas, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas: niñoscsstutoriales

Recomendamos

Relacionado

niños código html tutoriales

Cómo añadir una línea o separador en tus posts de Blogger

Cómo puedes ver en el blog a mi me encantan las líneas rectas, más bien finitas... así que hoy me toca hablar de cómo hacer unas cuantas en los posts ! ; ) A mi me parecen muy útiles para separar o resaltar palabras, párrafos, o incluso el título del post (si sitúas el código justo debajo), además le dan un toque muy personal y elegante que sin duda mejorarán el diseño de tus posts ¿ no crees ? B ...

niños blogger tutoriales

Cómo acortar tus posts en Blogger

No sé si estarás de acuerdo conmigo o no... pero si los posts son muy largos queda bastante mal ponerlos así en la página de inicio del blog, además resulta muy poco operativo pues obliga al lector a desplazarse bastante antes de llevar a ver el título del post siguiente.. con lo cual, puede acabar "exhausto" antes e irse sin llegar a ver nada más.Bien, hoy quiero mostrarte la manera de ...

niños blogger css ...

Cómo poner un color de fondo a los títulos de los posts en Blogger

Hace tiempo escribí este post para enmarcar el título de los posts y mejorar así su diseño... pues bien, hoy quiero ofrecerte otra opción que quizás te encaje mejor, o simplemente te guste más, se trata de poner un color de fondo a los títulos de los posts en Blogger. Para comenzar, te voy a dar el código necesario:.post-title { background-color: #e7e7e2; } Comentarte además que el valor situado ...

niños tips tutoriales

Razones y alternativas para no cambiar el título de tu blog

Quizás alguna vez se te ha pasado por la cabeza cambiar el nombre de tu blog, ¿me equivoco?... y es que a lo mejor has ido ampliando o modificando la temática de los posts que publicas y tal vez el nombre del blog no refleje muy bien estos nuevos contenidos... lo confieso, ¡a mi me ha pasado! Bien, hoy quiero darte mi punto de vista al respecto; cambiar el nombre del blog puede acarrear un montón ...

niños código html tutoriales

Cómo navegar por otra web sin salirte de la tuya

A la hora de hacer tutoriales,de mostrar páginas webs que nos gustan,.... los pantallazos se suelen convertir en nuestros grandes aliados... ¿ o no?. Bien, hoy quiero ir un paso más allá y mostrarte otra forma de presentación, muchos más dinámina, que podrás usar en algunos casos (especialmente en aquellos en los que en el pantallazo no te entre toda la información visual que desees recoger), sien ...

general recursos creatividad ...

Decora el árbol de Navidad con tus hijos: DIY

Decorar el árbol de Navidad con tus hijos es el motivo que necesitabas en estas fechas para disfrutar de los tuyos y de la magia que te ofrecen estos días tan señalados. Seguramente, tus hijos ya están contando los días para la llegada de Papa Noel y que mejor que hacer la espera más amena comenzando a decorar nuestros hogares. El árbol de Navidad es una de las cosas que más ilusiona a los más peq ...

general 3 a 6 años vida práctica ...

Vida Práctica: Pulir metal – Practical Life: Metal polishing

(scroll down for English) Pulir metal es una actividad Montessori de Vida Práctica que requiere poca preparación y que trabaja habilidades como la capacidad de concentración, la coordinación ojo-mano y la motricidad fina. En principio la actividad se realizaría con algún objeto de plata, si tenéis cubiertos o alguna bandejita o tetera de plata el efecto al pulir es más evidente y el algodón se que ...

alimentación aprendizaje bebés ...

La media hora sagrada antes de ir a dormir

¿Cómo se duermen cada noche tus hijos? ¿Les acompañas antes? ¿Tenéis algún ritual o hábito establecido? ¿Es un momento especial de conexión y de presencia? ¿Es un momento relajado o de estrés y prisas? Cómo un niño se va a la cama por la noche tiene una repercusión directa en la calidad del sueño y en cómo afrontará el día siguiente. Hace unos días en una de las reuniones pedagógicas con los maest ...

bizcocho de camisa dia de los padres bizcocho para hombre ...

Decoración de bizcocho para el día de los padres

El día de los padres está a la vuelta de la esquina. En lo personal tengo que ser agradecida de que pude contar y cuento con el cuidado, modelaje y apoyo incondicional que siempre mí padre ha tenido para mi y mi familia. Ha estado presente en cada una de mis etapas de la vida. Inspirada en este día que está próximo a celebrarse, te voy a mostrar cómo hacer un bizcocho en pasta laminada o fondant a ...