Entradas Populares de Blogger de diseño de blog tipo revista
Cómo Agregar Entradas Populares con Diseño Tipo Revista en Blogger
Un diseño modeno con estilos únicos y profesionales, con un artículo principal destacado y una lista de entradas populares al lado? Este estilo no solo es visualmente sorprendente, sino que también es excelente para engagement, ya que destaca tu contenido más importante y ofrece a los lectores más opciones para explorar.
En este tutorial para blogs de Blogger, te guiaré paso a paso para implementar un gadget de "Entradas Populares" con un diseño moderno en tu blog de Blogger. Es completamente responsive, por lo que se verá perfecto tanto en computadoras como en dispositivos móviles.
¿Qué es un Diseño de Blog Tipo Revista?
El diseño que vamos a implementar se caracteriza por:
- Un artículo principal grande: Ubicado a la izquierda, capta de inmediato la atención del usuario hacia tu post más importante o reciente.
- Una lista de artículos secundarios: Ubicada a la derecha, muestra una selección de otras entradas populares o recientes, facilitando la navegación.
- Organización visual clara: Este formato "asimétrico" es ideal para blogs con mucho contenido, ya que lo presenta de una manera limpia, estructurada y atractiva, muy similar a una revista tradicional.
Nota Importante
Este tutorial está actualizado a la fecha actual año 2025, no tendrá ningún inconveniente al momento de su instalación.
Garantizado y completamente funcionalA continuación puede ver su demostración en el siguiente blog
Antes de Empezar: ¡Haz una Copia de Seguridad!
⚠️ Importante: Antes de realizar cualquier cambio en el código de tu plantilla, SIEMPRE haz una copia de seguridad. Es tu red de seguridad por si algo sale mal.
- Ve a Tema en el menú de tu panel de Blogger.
- Haz clic en Crear copia de seguridad (ubicado en la esquina superior derecha).
- Guarda el archivo .xml en tu computadora.
Ayudadeblogger.com no se responsabiliza, si usted no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:
Ahora sí, ¡comencemos!
Paso a Paso: Implementar el Gadget de Entradas Populares
Sigue estas instrucciones cuidadosamente. No es necesario modificar el código proporcionado, solo copiarlo y pegarlo en el lugar correcto.
1 Acceder al Editor HTML de la Plantilla
En tu panel de Blogger, dirígete a Tema.
Haz clic en Editar HTML. Verás una ventana con todo el código de tu plantilla.
2 Ubicar el lugar correcto para pegar el código
Necesitamos encontrar la etiqueta <body> para pegar nuestro código justo después de ella. Por lo general veras el código de tu plantilla, busca un lugar donde quieras ubicar tu nuevo Gadget de Entradas populares.
- Dentro del editor de HTML, presiona las teclas
Ctrl + F(oCmd + Fen Mac) para abrir la barra de búsqueda. - Escribe
<bodyy presiona Enter. El editor te llevará a la línea donde comienza la etiqueta<body>. - Justo debajo de la línea que dice
<body>o<body expr:class=...>, notaras que existe código de tu plantilla, busca un lugar en la estructura de tu plantilla para insertar el código que se encuentra en el siguiente archivo de Google Drive y agrega el código exactamente como está:
💡 Nota: Este código crea una nueva sección en tu blog donde vivirá nuestro gadget de entradas populares.
3 Guardar los Cambios
¡No realices ningún otro cambio en el código!
Haz clic en el botón Guardar (ubicado en la parte superior del editor).
4 Verificar el Resultado
Dirígete a la página principal de tu blog y actualízala (presiona F5).
¡Deberías ver tu nuevo gadget de "Entradas Populares" con el diseño de revista funcionando correctamente!
Preguntas Frecuentes (FAQ)
¿Por qué no veo el gadget o se ve mal?
- Verifica que hayas pegado el código en el lugar correcto, justo después de la etiqueta
<body>. - Asegúrate de haber guardado los cambios correctamente.
- Si el problema persiste, restaura la copia de seguridad que hiciste y vuelve a intentarlo.
¿Puedo personalizar el estilo (colores, fuentes, tamaño)?
Este tutorial se centra en implementar la funcionalidad básica. La personalización avanzada requiere modificar CSS, lo cual podría ser tema para un futuro tutorial.
¿Es compatible con móviles?
¡Sí! El gadget está diseñado para ser completamente responsive y se adaptará automáticamente a cualquier tamaño de pantalla.
Conclusión
¡Y eso es todo! Ahora tu blog tiene un aspecto más profesional y moderno con este diseño tipo revista para tus entradas populares.
Si tienes cualquier duda o problema durante la instalación, no dudes en dejarme un comentario aquí mismo. ¡Estaré encantado de ayudarte!
¡Feliz blogging! 🚀
Interesante, lo voy a poner en practica.
ResponderEliminarHola Carolina, recuerda que cualquier parte que no puedas realizar, solo me dejas un comentario y de inmediato te espondere.
ResponderEliminarSaludos...
Este comentario ha sido eliminado por el autor.
ResponderEliminarno se que pasa pero no funciona... agradecería su ayuda.
ResponderEliminarHola Gitler, el truco es muy facil talvez algo estas haciendo mal, si necesitas mi ayuda directamente, a continuacion te dejo la direccion de mi correo electronico para ayudarte en vivo desde el chat de gmail: ayudadeblogger@gmail.com
ResponderEliminarSaludos.
a mi me paso igual, el efecto no es de 3d, sino que es el de acordeon, podrias corregirlo? lo nesecito urgente
ResponderEliminarHola Carlos, no entiendo muy bien tu comentario, el post es para entradas populares de blogger y su funcionamiento es muy facil de realizarlo. Explicame bien lo que quieres realizar en tu blog y con mucho gusto te ayudare.
ResponderEliminarSaludos.
se ve una lista horizontal con flechitas a los lados, pero no el cubo con efecto 3D, es mas esta lista de fotos de las entradas populares sobresale del area asignada, creo que el codigo que pusiste no es el correcto, trata de conseguirlo, por favor!
ResponderEliminarahora resolvi el problema, habia un codigo para modificar algunos widgets que interferian con tu codigo, ahora si se muestra un cuadro, pero surge otro problema, el efecto del cubo solo aparece a cada tanto, la mayoria de las veces las imagenes se concatenan una detras de otra, pero sin el efecto 3d, igual gracias.
ResponderEliminarSencillamente genial. Es un efecto muy visual que llama la atención en el blog.
ResponderEliminarUn millón de gracias!!
www.laseternaspalabras.blogspot.com.es
Buenas noches..he realizado uno a uno los pasos y no me sale igual que el DEMO es más solo poniéndo entradas populares no me aparecen las miniaturas....que puedo hacer...gracias!!!!
ResponderEliminarHola, enviame la direccion de tu blog.
EliminarSaludos,.
no he podido hacer q funcione alguno saludos
ResponderEliminar