Diseño de Widget estilo Material Design
En este nuevo tutorial de Ayudadeblogger.com, aprenderas a crear un widget estilo Material design con unos simples pasos, el código es simple, lo podras insertar en un Widget de Blogger, en una Entrada de Blogger, en una Página de Blogger, en el Sibebar de tu blog de Blogger, en fin donde lo quieras mostrar.
Para esta guia utilizaremos un código simple, y unos estilos CSS basados en Material Design
Tutorial educativo - Guia practica
HTML
<div class="posts-entradas-container"><h2 class="posts-entradas-title">Entradas Populares</h2><div class="posts-entradas-grid"><!-- Repite este bloque por cada entrada popular --><div class="posts-entradas-card"><a href="URL_DE_LA_ENTRADA" class="post-link"><div class="post-thumbnail"><img src="URL_DE_LA_IMAGEN" alt="Título de la entrada" class="post-image responsive" /></div><div class="post-content"><h3 class="post-title">Título de la entrada</h3><p class="post-snippet">Descripción breve de la entrada...</p><div class="post-meta"><span class="post-date">29 Ene 2025</span><span class="post-views">7,900 vistas</span></div></div></a></div><!-- Fin del bloque --></div></div>
CSS
<style>.posts-entradas-container {font-family: 'Roboto', sans-serif;padding: 20px;background: #ffffff;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}.posts-entradas-title {font-size: 24px;font-weight: 500;color: #202124;margin-bottom: 20px;text-align: center;}.posts-entradas-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;}.posts-entradas-card {background: #ffffff;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease, box-shadow 0.3s ease;}.posts-entradas-card:hover {transform: translateY(-5px);box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);}.post-link {text-decoration: none;color: inherit;}.post-thumbnail {width: 100%;height: auto;overflow: hidden;}.post-image {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}.responsive {width: 100%;height: auto;}.post-image:hover {transform: scale(1.05);}.post-content {padding: 16px;}.post-title {font-size: 18px;font-weight: 500;color: #202124;margin: 0 0 10px;}.post-snippet {font-size: 14px;color: #5f6368;margin: 0 0 12px;line-height: 1.5;}.post-meta {display: flex;justify-content: space-between;font-size: 12px;color: #9aa0a6;}.post-date,.post-views {margin: 0;}</style>
Características del Diseño
Responsive: Se adapta a diferentes tamaños de pantalla gracias al uso de grid-template-columns.
Efectos de Hover: Las tarjetas se elevan ligeramente al pasar el cursor, dando un efecto dinámico.
Imágenes Optimizadas: Las imágenes se ajustan al contenedor sin distorsionarse.
Tipografía Moderna: Usa la fuente Roboto, típica de Material Design.
Sombreado y Bordes Redondeados: Aportan un aspecto limpio y moderno.
¿Como insertar en el diseño de mi blog de Blogger?
Ve a la sección Tema > Editar HTML.
Busca la etiqueta </head> y pega el CSS antes de ella.
Busca un lugar adecuado en tu diseño (por ejemplo, en la barra lateral) y pega el HTML.
Recuerde reemplazar la URL_DE_LA_ENTRADA, URL_DE_LA_IMAGEN, Título de la entrada, etc., con los datos dinámicos de tus entradas .
Fácil verdad
Necesitas ayuda!
Cualquier pregunta no dude en escribir
Comentarios