El código proporcionado no es exclusivo de Blogger. Con algunas pequeñas modificaciones, puedes adaptarlo para otras plataformas de blogs o sitios web. Mas abajo lo explicamos a detalle.
En Blogger, crear una alerta azul de artículos relacionados puede mejorar la experiencia del usuario y aumentar el tiempo que los visitantes pasan en tu sitio. Este artículo te guiará paso a paso en cómo agregar una alerta azul personalizada que destaque artículos relacionados dentro de tu blog de Blogger. Sigue estos sencillos pasos para mejorar la navegación y el diseño de tu blog.
Accediendo al HTML de tu Plantilla
Pasos para acceder al HTML
Para comenzar, necesitas acceder al HTML de tu plantilla de Blogger. Aquí te explicamos cómo hacerlo:
- Ve a tu blog en Blogger y selecciona "Tema" en el menú de la izquierda.
- No olvides de "Crear una copia de Seguridad". Esto te ayudará a restablecer tu sitio Web si en caso haya alguna falla en la modificación del código.
- Luego, haz clic en "Editar HTML".
Esto te permitirá modificar el código HTML y CSS de tu plantilla, lo cual es esencial para agregar la alerta de artículos relacionados.
Agregando CSS para la Alerta de Artículos relacionados
Descripción del Código CSS
El siguiente paso es agregar el código CSS que dará estilo a la alerta azul. Inserta el siguiente código CSS Justo debajo de la etiqueta <head> de tu plantilla:
<style>
.related-posts-alert {
background-color: #d1ecf1;
border: 1px solid #bee5eb;
color: #0c5460;
padding: 10px;
margin: 20px 0;
border-radius: 5px;
font-family: Arial, sans-serif;
}
.related-posts-alert h3 {
margin-top: 0;
}
</style>
Este código define el estilo visual de la alerta, dándole un fondo azul claro, bordes, y texto adecuado para resaltar los artículos relacionados. Puedes modificarlo de acuerdo a los colores de tu marca.
Tal ves quieras saber: ▷Cómo Crear una Tabla de Contenido en Blogger
Integrando el HTML para la Alerta
Colocación del Código HTML
Una vez agregado el CSS, el siguiente paso es insertar el HTML que generará la alerta azul en tu blog. Ingresa a la ENTRADA donde necesitas que se muestre la Alerta de Artículos relacionados y pega el siguiente código justo en el lugar especifico que lo necesitas, puede ser a la mitad del artículo o como también al final.
No olvides cambiar de "Vista Redacción" a "Vista HTML" para que el código funcione.
<div class="related-posts-alert">
<h3>Artículos Relacionados</h3>
<ul>
<li><a href="URL_DEL_ARTICULO_1">Título del Artículo 1</a></li>
<li><a href="URL_DEL_ARTICULO_2">Título del Artículo 2</a></li>
<li><a href="URL_DEL_ARTICULO_3">Título del Artículo 3</a></li>
</ul>
</div>
Si pegas a la mitad, lo recomendable es que vaya solo un articulo relacionado.
Reemplaza URL_DEL_ARTICULO_1, con la URL del articulo a donde quieres redirigir y Título del Artículo 1, por el nombre del articulo y así sucesivamente con los enlaces y títulos de los artículos relacionados que deseas mostrar.
Ejemplo Completo del Código
Visualización del Código Integrado
Para darte una mejor idea de cómo se ve todo el código integrado, aquí tienes un ejemplo sobre el código CSS en la plantilla principal.
<!DOCTYPE html>
<html>
<head>
<style>
.related-posts-alert {
background-color: #d1ecf1;
border: 1px solid #bee5eb;
color: #0c5460;
padding: 10px;
margin: 20px 0;
border-radius: 5px;
font-family: Arial, sans-serif;
}
.related-posts-alert h3 {
margin-top: 0;
}
</style>
</head>
Este siguiente código deberá pegarse en la entrada y se mostrará de esta manera.
<div class="related-posts-alert">
<h3>Artículos Relacionados</h3>
<ul>
<li><a href="https://ejemplo.com/articulo1">Cómo mejorar tu productividad</a></li>
<li><a href="https://ejemplo.com/articulo2">5 hábitos para el éxito</a></li>
<li><a href="https://ejemplo.com/articulo3">Guía de meditación para principiantes</a></li>
</ul>
</div>
Adaptación del Código para Otras Plataformas
El código proporcionado no es exclusivo de Blogger. Con algunas pequeñas modificaciones, puedes adaptarlo para otras plataformas de blogs o sitios web. Aquí hay algunos puntos a considerar:
- WordPress: Puedes insertar el CSS en el customizer o en un archivo CSS de tu tema, y el HTML en un widget de texto o directamente en una entrada o página.
- Wix: Usa el panel de desarrollador para agregar el CSS y un HTML embed para insertar el HTML.
- Squarespace: Inserta el CSS en el custom CSS del diseño y usa un bloque de código para el HTML.
Independientemente de la plataforma que uses, los principios básicos siguen siendo los mismos: agregar CSS para el estilo y HTML para la estructura.
Beneficios de Utilizar una Alerta de Artículos Relacionados
Implementar una alerta de artículos relacionados tiene múltiples beneficios:
- Aumenta el tiempo en el sitio: Los lectores pueden encontrar contenido relevante y quedarse más tiempo en tu blog.
- Mejora la experiencia del usuario: Facilita la navegación y hace que sea más sencillo encontrar información relacionada.
- Reduce la tasa de rebote: Al ofrecer contenido relacionado, los usuarios tienen más razones para seguir explorando tu blog.
Conclusión
Crear una alerta de artículos relacionados en Blogger es un proceso sencillo que puede tener un gran impacto en la interacción de tus lectores con tu contenido. Siguiendo los pasos descritos, puedes personalizar y estilizar estas alertas para que se ajusten al diseño de tu blog, ayudando a mantener a los visitantes interesados y comprometidos con tus publicaciones. ¡Pruébalo y observa cómo mejora la experiencia de tus usuarios!
0 Comentarios