Debo seguir optimizando mi blog así que voy a personalizar el título de las entradas del blog.
Revisando todas mis entradas con el fin de incluir los enlaces internos que faciliten su lectura, detecté un nuevo problema porque los títulos de los temas de los que trata cada entrada no quedan lo suficientemente resaltados. Creo que al lector del blog le va a suponer un esfuerzo localizar con rapidez las palabras clave y saber de qué trata cada entrada.
¿Qué consecuencia puede provocar esto? que nuestro visitante abandone el blog porque nada le llama la atención en pocos segundos y como no hay razón para continuar la visita, se marcha.
¡Me ha pasado a mí que soy la autora, no quiero imaginar la reacción en el resto de posibles visitantes!
Según la información que he recopilado, el título de cada entrada es fundamental para la optimización de un blog, por lo tanto como parece que no es una manía por mi parte voy a revisar con detalle cómo mejorar el aspecto y diseño de los títulos de las entradas.
Se aconseja que,
- Los títulos de las entradas no superen los 70 caracteres porque se mostrará en los resultados de un buscador. Cuanto más conciso y concreto sea más atraerá a la gente.
- Además Google muestra tras el título los primeros 156 caracteres del primer párrafo.
- Por último es importante que el título, la descripción o la URL de la entrada contenga alguna palabra clave.
Me dejo pendiente esta tarea porque me temo que no cumplo con estas recomendaciones en la mayoría de mis entradas publicadas.
Mejorar el aspecto y formato de los títulos de todas las entradas del blog
Por el momento me centro en esta tarea. Como quiero modificar todas las entradas, debo editar su plantilla añadiendo código CSS para modificar el diseño. Si quisiera personalizar el título concreto de una entrada iría a editar el código HTML de la entrada.
Voy al menú del blog y selecciono Plantilla-Personalizar.
Ahora selecciono Avanzado-Añadir CSS.
Se abre una ventana que tengo por el momento en blanco y añado el siguiente código CSS,
h3.post-title a {
color: white;
font-style: normal;
font-variant: normal;
font-weight: normal;
}
h3.post-title {
text-align:center;
border-top: 5px solid #191970;
border-right: 4px solid #191970;
border-bottom: 3px solid #000000;
border-left: 4px solid #191970;
background: radial-gradient(circle, blue 20%,rgba(10,49,97,.8),navy);
margin:1.75em 0em 2em;
padding:10px 10px 10px;
font-family: 'Century Gothic', sans-serif;
font-size: 180%;
line-height: 3em;
}
Descripción de las líneas de código
- h3.post-title_Es como designa Blogger al título de la entrada en un blog. Debería ser un encabezado h1 para conseguir un mejor posicionamiento SEO pero por el momento dejo este asunto como pendiente para tratarlo más adelante en una nueva entrada.
- color_Se refiere al color del texto del título de la entrada.
- font-style_Esta propiedad establece el estilo del tipo de letra. Hay tres estilos,
- Normal ( normal )
- Itálico ( italic )
- Olicuo ( oblique )
- font-variant_Con esta propiedad podemos elegir la variante con la que se muestra el tipo de letra. Existen dos tipos de variantes,
- Normal ( normal )
- Small-caps (versalita)_Las letras en mayúscula se mostrarán del tamaño aproximado de las minúsculas.
- font-weight_Especifica el grueso de la letra con la que se muestra el texto. Se establece su valor mediante,
- Palabras clave, que son cuatro:
- normal_equivale al valor numérico 400
- bold_equivale al valor númerico 700
- bolder_equivale al valor numérico superior a 700
- lighter_equivale al valor numérico inferior a 400
- Valor numérico predefinido_ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
- text-align_Regula la alineación del texto. Tiene seis valores principales,
- center_Centra el texto dentro de la caja.
- left_Alinea el texto hacia el lado izquierdo de la caja.
- right_Alinea el texto hacia el lado derecho de la caja.
- start_Es igual que "left" si la dirección es izquierda-derecha y es igual que "right" si la dirección es derecha-izquierda.
- end_Es igual que "left" si la dirección es derecha-izquierda y es igual que "right" si la dirección es izquierda-derecha.
- justify_El texto queda justificado dentro de la caja.
- border-top | border-right | border-bottom | border-left_Ver "valores para border" de la entrada Margin, padding y border.
- background_Ver entrada Personalizar el fondo del menú horizontal
- margin | padding_ Ver entrada Margin, padding y border.
- font-family_Define una lista de fuentes o familias de fuentes. Si el nombre de la fuente tiene un espacio intermedio en blanco, debe escribirse su nombre entre comas (',') para indicar que son valores alternativos. Como es posible que la fuente no esté disponible para todos los usuarios, se deben incluir fuentes alternativas separadas por comas. Los navegadores intentarán mostrar la primera fuente, si no es posible pasarán a la segunda y así sucesivamente. CSS permite incluir fuentes genéricas que no hacen referencia a fuentes en concreto pero determinan el aspecto con el que se mostrará el texto.
Las fuentes genéricas son,
- serif_Aconsejada para papel.
- sans-serif_Aconsejada para monitores y pantallas.
- cursive
- fantasy
- monospace
- font-size_Esta propiedad establece el tamaño de la letra del texto. Utiliza unidades de medida absolutas y relativas. Ver "Unidades de medida en CSS" de la entrada Margin, padding y border.
- line-height_Con esta última propiedad de altura de línea podemos establecer la altura del recuadro o caja que rodea al texto. No se permiten valores negativos. Puede tener tres valores,
- Número_Multiplica el número por el valor del tamaño de la fuente.
- Longitud_Pueden ser absolutas o relativas. Ver "Unidades de medida en CSS" de la entrada Margin, padding y border.
- Porcentaje_Será relativo al tamaño de la fuente.
Resultado de personalizar el título de la entrada del blog
