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

1.- Inserta el siguiente código donde necesites mostrar este nuevo Widget y realiza los cambios correspondientes 

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



Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Related post

Comentarios