Seccion de Productos para Blogger Y WordPress Plantilla HTML + CSS Gratis

PorAquí esta el código -julio 13, 2022

0

Esta plantilla de seccion para tu sitio web es ideal para mostrar productos o servicios que estemos vendiendo, es muy util para mantener organizado y bien presentado nuestro sitio y productos o servicios, es ideal para que tus productos se vean mas atractivos visualmente ademas que puedes personalizarlos a tu gusto

Instalacion De estilos

Paso 1: Primero instalaremos los estilos para que se vean los botones en nuestra plantilla Blogger. Y para eso debes dirigirte a Tema > Editar Html > Luego CTRL + F y busca: ]]></b:skin> y arriba de esa línea pegas lo siguiente:

.compras{
   width: 100%;
   height: auto;
   margin: 0 auto;
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
}
.contenido{
    width: 24%;
    text-align: center;
    background-color: #DCDCDC;
    margin-bottom: 10px;
    border-radius: 10px;
}
.contenido img{
  max-width: 100%;
  height: auto;
  margin-top: 5px;
}
.contenido a{
    text-decoration: none;
}

.precio{
    display:inline-block;
    margin: 5px;
    padding: 10px;   
    background-color: red;
    color: #DCDCDC;
    border-radius: 20px;
}

.comprar{
    background-color: red;
    color: white;
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
}
.contenido .comprar{
    color:white;
    
    }
.comprar:hover{
    background-color: rgb(165, 0, 0);
    color: white;
}
.contenido h2{
    color: black;
}

.contenido:hover{
    box-shadow: 0 0 1px 1px black;
    filter: drop-shadow(2px 2px 5px black);
}

@media (max-width:1012px){
    .contenido{
        width: 30%;
    }
    .precio{
        font-size: 20px;
        padding: 5px;
    }
}
@media (max-width:898px){
    .contenido{
        width: 32%;
    }
    .precio{
        font-size: 18px;
        padding: 4px;
    }
}
@media (max-width:416px){
    .contenido{
        width: 49%;
    }
    .comprar{
        margin: 10px;
    }
}
@media (max-width:300px){
    .contenido{
        width: 100%;
    }
}

@media (max-width:871){
    .ads-here img{
       max-width: 100%;
       height: auto;
    }
}

Colocar Html

Paso 3:Ahora debemos copiar de Div a Div el siguiente codigo en nuestras entradas, para que funcionen nuestros botones

<div class="compras">
        <div class="contenido">
          <a href="LINK-PRODUCTO" target="_blank" >
         <img src="LINK-IMAGEN" alt=""/>
         <h2>Nombre Producto</h2>
         <p class="precio">50 usd</p>
         <p class="precio">-20%</p>
         <h3 class="comprar">Comprar</h3>
         </a>
        </div>
        <div class="contenido">
          <a href="LINK-PRODUCTO"  target="_blank" >
         <img src="LINK-IMAGEN" alt=""/>
         <h2>Nombre Producto</h2>
         <p class="precio">50 usd</p>
         <p class="precio">-20%</p>
         <h3 class="comprar">Comprar</h3>
         </a>
        </div>
        <div class="contenido" >
          <a href="LINK-PRODUCTO"  target="_blank">
         <img src="LINK-IMAGEN" alt=""/>
         <h2>Nombre Producto</h2>
         <p class="precio">50 usd</p>
         <p class="precio">-20%</p>
         <h3 class="comprar">Comprar</h3>
         </a>
        </div>
        <div class="contenido">
          <a href="LINK-PRODUCTO"  target="_blank">
         <img src="LINK-IMAGEN" alt=""/>
         <h2>Nombre Producto</h2>
         <p class="precio">50 usd</p>
         <p class="precio">-20%</p>
         <h3 class="comprar">Comprar</h3>
         </a>
        </div>
        <div class="contenido">
          <a href="LINK-PRODUCTO"  target="_blank">
         <img src="LINK-IMAGEN" alt=""/>
         <h2>Nombre Producto</h2>
         <p class="precio">50 usd</p>
         <p class="precio">-20%</p>
         <h3 class="comprar">Comprar</h3>
         </a>
        </div>
        <div class="contenido"  target="_blank">
          <a href="LINK-PRODUCTO">
         <img src="LINK-IMAGEN" alt=""/>
         <h2>Nombre Producto</h2>
         <p class="precio">50 usd</p>
         <p class="precio">-20%</p>
         <h3 class="comprar">Comprar</h3>
         </a>
        </div>
        <div class="contenido">
          <a href="LINK-PRODUCTO" target="_blank">
         <img src="LINK-IMAGEN" alt=""/>
         <h2>Nombre Producto</h2>
         <p class="precio">50 usd</p>
         <p class="precio">-20%</p>
         <h3 class="comprar">Comprar</h3>
         </a>
        </div>
        <div class="contenido">
          <a href="LINK-PRODUCTO" target="_blank">
         <img src="LINK-IMAGEN" alt=""/>
         <h2>Nombre Producto</h2>
         <p class="precio">50 usd</p>
         <p class="precio">-20%</p>
         <h3 class="comprar">Comprar</h3>
         </a>
        </div>  
 </div>