¿Quieres personalizar el módulo de Entradas Relacionadas en tu plantilla para Blogger? Muchas plantillas modernas, como la tuya, usan un script JSON para cargar contenido de forma rápida y eficiente, sin recargar la página.
En este tutorial aprenderás a:
- Modificar el número de entradas relacionadas que se muestran (de 4 a 3, por ejemplo).
- Cambiar el diseño de la cuadrícula para que se vea perfecto con el nuevo número.
- (Opcional) Filtrar las entradas por una etiqueta específica.
📝 Pasos para la Personalización
1. Accede a la sección de código de tu plantilla
- Ve a Blogger → Tema → Editar HTML.
- Haz clic en cualquier parte del código y presiona Ctrl + F (o Cmd + F en Mac) para abrir la búsqueda.
2. Localiza el script de Entradas Relacionadas
Busca un bloque de código similar a este (puede estar dentro de un widget HTML o al final del tema):
// Código de Entradas Relacionadas (Related Posts)
const apiUrl = `https://plantillasblogger2026.blogspot.com/feeds/posts/default/-/Tutorial?alt=json-in-script&max-results=4`; // <-- .then="" apiurl="" clave="" const="" container="document.getElementById(" fetch="" l="" related-posts-container="" response=""> response.text())
.then(data => {
// Procesamiento del JSON y renderizado
})
.catch(error => console.error('Error:', error));
💡 Nota: Tu URL puede usar tu dominio real, usa el que corresponda.
3. Modifica el número de entradas
En la línea de apiUrl, cambia el valor de max-results:
| Parámetro | Valor Original | Nuevo Valor (Ejemplo) | Efecto |
|---|---|---|---|
max-results= |
4 | 3 | Mostrará solo 3 posts relacionados |
Ejemplo modificado:
const apiUrl = `https://plantillasblogger.com/feeds/posts/default/-/Gratis?alt=json-in-script&max-results=3`;4. (Opcional) Filtrar por una etiqueta específica
Si quieres que siempre muestre entradas con la etiqueta “Plantilla”, asegúrate de que la URL incluya esa etiqueta:
- URL original (usa la etiqueta actual del post):
.../feeds/posts/default?alt=json-in-script... - URL filtrada por “Plantilla”:
.../feeds/posts/default/-/Plantilla?alt=json-in-script...
⚠️ Si tu plantilla ya detecta la etiqueta del post actual (lo más común), no necesitas cambiar esta parte. Solo modifica
max-results.
5. Cambiar el diseño a 3 columnas (CSS)
Para que el diseño se vea bien con 3 entradas, ajusta la cuadrícula en el CSS.
Busca en el código (dentro de #related-posts-container o similar.
Reemplaza su regla grid-template-columns:
/* Estilo para el contenedor de posts relacionados */
#related-posts-container {
display: grid;
/* Original: repeat(4, 1fr) para 4 columnas */
/* Modificado: repeat(3, 1fr) para 3 columnas */
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}🎨 Consejo: Si usas modo oscuro, asegúrate de que los estilos también se apliquen en
.dark #related-posts-container.
6. Guarda y verifica
- Haz clic en Guardar tema.
- Visita una entrada de tu blog y verifica que:
- Se muestren 3 entradas relacionadas (o el número que hayas elegido).
- El diseño se vea alineado y equilibrado.
¡Listo! Ahora tienes un módulo de entradas relacionadas personalizado, rápido y compatible con AdSense.
¿Tienes dudas o necesitas ayuda con otro ajuste? ¡Déjanos un comentario!
