Como Crear una Rejilla de Ventas y Productos en Blogger

En la actualidad los mejores ingreso que uno puede obtener en internet  es vendiendo productos en línea, ya se productos propios o productos de afiliación, por esta razón hoy le traemos una rejilla de ventas para productos que podemos implementar en nuestro sitio web creados en blogger. Rejilla de ventas que sirve para publicar diferentes productos en venta totalmente moderno, responsive, adaptable para ordenadores y móvil.

Como crear una rejilla de ventas y productos personalizado por tutoriales gratis de internet, seguir los pasos a continuacion para su implementacion correctamente en las entradas o paginas creadas en blogger.

1º  Ingresar a Blogger buscar en Tema / Editar HTML aquí debemos buscar el codigo de cierre ]]></b:skin>  encontrado el código debemos agregar el siguiente código CSS en la parte de arriba y guardar los cambios. 

.rejilla * {box-sizing: border-box; /* para que los padding y border no se sumen al width */}
.rejilla {text-align: center; /* todo centradico */}
.rejilla > .producto {display: inline-block;width: 100%;margin: -3px; /* esto es para solventar la posibilidad de que no entren las columnas diseñadas */vertical-align: top; /* alinear cada producto arriba */}
@media (min-width: 425px) { /* para esta resolución mínima */
.rejilla > .producto {width: 50%; /* 2 columnas a partir de la resolución indicada */}}
@media (min-width: 768px) { /* para esta resolución mínima */
.rejilla > .producto {width: 33.33333333%; /* 3 columnas a partir de la resolución indicada */}}@media (min-width: 992px) { /* para esta resolución mínima */
.rejilla > .producto {width: 25%; /* 4 columnas a partir de la resolución indicada */}}
.rejilla a {display: block; /* para que el enlace abarque toda la "celda" del producto */padding: 15px;}
.rejilla a:hover {box-shadow: 0 0 0 2px #ccc; /* efecto para remarcar productos al pasar el cursor por encima */}
.rejilla img { /* para que las imágenes se autoajusten si la rejilla es más pequeña */max-width: 100%;height: auto;}

Dato Extra: Para modificar o agrandar las imágenes de los productos pueden cambiar la medida en esta opción del código en la seccion  .producto {width: 25%  modifiquen el 25% por la medida que gusten con cuidado de no eliminar partes del codigo CSS. 

2º Para implementar la rejilla de ventas y productos en las entradas o paginas del blog donde deseamos mostrar nuestros producto debemos utilizar el siguiente código html en la opcion Vista HTML.

<div class="rejilla">
  
<div class="producto">
    <a href="ENLACE DEL PRODUCTO" rel="nofollow" target="_blank">
    <img src="URL DE LA IMAGEN" width="200" height="200" alt="NOMBRE DEL PRODUCTO" />
    <h3>NOMBRE DEL PRODUCTO</h3>
    <p>PRECIO DEL PRODUCTO</p>
    </a>
  </div>

<div class="producto">
    <a href="ENLACE DEL PRODUCTO" rel="nofollow" target="_blank">
    <img src="URL DE LA IMAGEN" width="200" height="200" alt="NOMBRE DEL PRODUCTO" />
    <h3>NOMBRE DEL PRODUCTO</h3>
    <p>PRECIO DEL PRODUCTO</p>
    </a>
</div>

</div>

Debemos reemplazar cada parte de la siguiente manera:

ENLACE DEL PRODUCTO: Aqui colocar el enlace url de nuestro producto que tenemos en venta.

URL DE LA IMAGEN: Aqui colocar el enlace url de la imagen de nuestro producto en venta.

NOMBRE DEL PRODUCTO: Aqui colocar el nombre del producto que tenemos en venta (se recomienda usar una descripcion breve).

PRECIO DEL PRODUCTO: Aqui colocar el precio del producto que esta en venta.

* Viene por defecto para colocar 2 productos pero podemos copiar y pegar el codigo encerrado en <div> asi aumentar mas producto, los codigos de ventas se encuentran ordenados de una manera intiutiva para modificarlo y adaptarlo mejor a nuestro blogger.

100 Diamantes

S/ 4.00

310 Diamantes

S/ 11.00

520 Diamantes

S/ 17.00

1060 Diamantes

S/ 34.00

2180 Diamantes

S/ 67.00

5600 Diamantes

S/ 160.00

Tarjeta Semanal

S/ 7.50

Tarjeta Mensual

S/ 33.00