Catálogo de Productos de Amazon adaptados para Blogger
{getToc} $title={Tabla de Contenido}
Si cuentas con un blog monetizado con Amazon afiliados, de seguro has intentado colocar productos de Amazon tal como trabaja el Plugin de Wordpress: AAWP. El AAWP es un plugin que trabaja con productos de Amazon basado en una API diseñada exclusivamente para quienes monetizan como afiliados de Amazon.
En alguna ocasión has tratado de adaptar los productos que tienen buen diseño cuando se visualizan en una PC o incluso desde un dispositivo móvil o tablet. Bueno, tengo buenas noticias para ti, en este sección voy a desvelarte como poner un catalogo de productos de Amazon adaptados a cualquier pantalla e incluso si usas Blogger.
Si eres afiliado de Amazon, entonces, esto va encantarte cuando lo pongas en unas de tus entradas para reseñas. He extraído el código CSS del plugin AAWP para darle forma nuestro catálogo de productos en HTML/Blogger.
Video Explicativo: Cómo Crear un Catálogo de Productos de Amazon para Blogger
Código CSS
Para darle forma al Producto que quieres insertar, se debe llamar la función de la hoja de estilo(css), en mi caso, vi donde tienen en uso el Plugin y lo copie.
Debes copiar el LINK entre los tag <head> </head> de la plantilla. Luego que copias, guarda la plantilla para que pueda tomar efecto.
<link href='https://barbacoas.online/wp-content/plugins/aawp/assets/dist/css/main.css?ver=3.15.2' id='aawp-css' media='all' rel='stylesheet' type='text/css'/>
DIV para llamar la función
Crea una entrada nueva, coloca en Vista HTML. Copia y pega el div para llamar la función del CSS.
<div class="aawp">
<div class="aawp-grid aawp-grid--col-2">
<div class="aawp-grid__item">
<div class="aawp-product aawp-product--vertical aawp-product--ribbon aawp-product--sale aawp-product--bestseller" >
<span class="aawp-product__ribbon aawp-product__ribbon--sale">Rebajas</span>
<a class="aawp-product__image--link aawp-product__image" href="ID-Afiliado-AMZN" title=" " rel="nofollow" target="_blank">
<img class="aawp-product__image" src="imagen-de-amazon.jpg" alt=" ">
</a>
<div class="aawp-product__content">
<a class="aawp-product__title" href="ID-Afiliado-AMZN" title=" " rel="nofollow" target="_blank">
Texto Titulo del Producto
</a>
<div class="aawp-product__meta">
<a class="aawp-check-prime" href="ID_AFILIADO_AMAZN" title="Amazon Prime" rel="nofollow" target="_blank"></a>
</div>
</div>
<div class="aawp-product__footer">
<div class="aawp-product__pricing">
<span class="aawp-product__price aawp-product__price--old">55,99 EUR</span>
<span class="aawp-product__price aawp-product__price--current">$1,299.00</span>
</div>
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="https://amzn.to/3xl3eBQ" title="Comprar en Amazon" target="_blank" rel="nofollow">Comprar en Amazon
</a>
</div>
</div>
</div>
<div class="aawp-grid__item">
<div class="aawp-product aawp-product--vertical aawp-product--ribbon aawp-product--sale aawp-product--bestseller">
<span class="aawp-product__ribbon aawp-product__ribbon--sale">Rebajas</span>
<a class="aawp-product__image--link aawp-product__image" href="ID-Afiliado-AMZN" rel="nofollow" target="_blank">
<img class="aawp-product__image" src="URL-DE-LA-IMAGEN.jpg" alt=" ">
</a>
<div class="aawp-product__content">
<a class="aawp-product__title" href="ID-Afiliado-AMZN" title=" " rel="nofollow" target="_blank">
Titulo del producto
</a>
<div class="aawp-product__meta">
<a class="aawp-check-prime" href="ID_AFILIADO_AMAZN" title="Amazon Prime" rel="nofollow" target="_blank"></a>
</div>
</div>
<div class="aawp-product__footer">
<div class="aawp-product__pricing">
<span class="aawp-product__price aawp-product__price--old">55,99 EUR</span>
<span class="aawp-product__price aawp-product__price--current">49,99 EUR</span>
</div>
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="ID-Afiliado-AMZN" title="Comprar en Amazon" target="_blank" rel="nofollow">Comprar en Amazon</a>
</div>
</div>
</div>
</div>
</div>
<div class="aawp">
<div class="aawp-product aawp-product--horizontal aawp-product--ribbon aawp-product--sale" >
<span class="aawp-product__ribbon aawp-product__ribbon--sale">Rebajas</span>
<div class="aawp-product__thumb">
<a class="aawp-product__image-link" href="ID-Afiliado-AMZN" title=" " rel="nofollow" target="_blank">
<img class="aawp-product__image" src="URL-DE-LA-IMAGEN.jpg" alt="Barbacoa Kamado Joe">
</a>
</div>
<div class="aawp-product__content">
<a class="aawp-product__title" href="ID-Afiliado-AMZN" title=" " rel="nofollow" target="_blank">
Titulo del Producto
</a>
<div class="aawp-product__description">
<ul>
<li>Control de la Temperatura en la parte superior</li>
<li>Amplia parrilla de 18" para la cocción</li>
</ul>
</div>
</div>
<div class="aawp-product__footer">
<div class="aawp-product__pricing">
<span class="aawp-product__price aawp-product__price--old">$1,449,99</span>
<span class="aawp-product__price aawp-product__price--current">$1,299.00</span>
<a class="aawp-check-prime" href="ID-Afiliado-AMZN" title="Amazon Prime" rel="nofollow" target="_blank">
</a>
</div>
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="ID-Afiliado-AMZN" title="Comprar en Amazon" target="_blank" rel="nofollow">Comprar en Amazon
</a>
</div>
</div>
</div>
Si quieres los archivos de la hoja de cascada junto con las imágenes, lo puedes alojar en donde desees.
https://mega.nz/file/DhgWUDzT#wl29Y5WcCXrMhOUC95HBpGDMWs2K2aOD9L--gY-fCkU
PROs y CONs
Puedes adaptar esta función del plugin aawp para blogger/html sin conocimiento previo de Html. Solo debes reemplazar por tus ID de afiliado de Amazon y la URL de la imagen del producto que vayas agregando. Puedes poner tantos productos quieras.
La parte no favorable es que debes agregar manualmente tus ID de afiliado y colocar una imagen a cada producto. Esto puede tomar algo de tiempo y no trabaja automáticamente como el plugin aawp, con este plugin solo necesitas el ASIN para extraer automáticamente la información desde Amazon.
actualiza el precio automaticamente?
ResponderEliminarQue tal Daniel, en este caso no se actualiza automáticamente porque no es un plugin. Para estos casos te recomiendo quitar el precio y poner comprar Amazon o ver producto.
EliminarMuy buenn post, te consulto, hay alguna manera de aplicarle el fondo transpartente, porque en mi blogg el fondo es negro y letras blancas y no se ve nada
ResponderEliminarHola, en mi vista previa no salen las imagenes, sera porque pegue el mismo que tienes en el video-? yo lo hice asi mientras buscaba los mios, pero deberia verse no?
ResponderEliminarHola, necesitas reemplazar las URL de las imágenes. Yo no las tengo apuntando a una imagen, por eso que sale en blanco. Saludos!
Eliminar