Imagen del código de amazon con el scroll desagradable

Última revisión: 22 octubre 2019

Al copiar y pegar un enlace de amazon (link + imagen) a veces aparece un efecto de scroll muy desagradable. Para arreglarlo hay que seguir estos 4 sencillos pasos:

  1. Ve a tu artículo o página
  2. Localiza el código de amazon, pulsa en el bloque y elige la vista HTML
  3. Localiza la etiqueta <figure> y </figure> y elimínala.
  4. Añade el código adicional
  5. Guarda los cambios y publica.
Vista de los anuncios de amazon con un scroll que entorpece la navegabilidad en la web. Si quieres quitar scroll iframe sigue leyendo.
A esto es a lo que me refiero, es muy molesto.

Ve al artículo o página

Lo primero que hay que hacer es entrar a editar el artículo o página donde está el problema. Yo lo tengo en mi TSA/TSR todoenmodelismo. Al principio pensé que era un error del navegador, pero al verlo también en mi móvil y en otros teléfonos me di cuenta de que el problema estaría en el código HTML.

Localiza el código de amazon, pulsa en el bloque y elige la vista HTML

Entonces, una vez abierta la página o post, iremos directamente al código HTML, debería venir seleccionado por defecto, pero si no viene es tan fácil como darle al botón HTML.

Imagen del código HTML donde está el problema del scroll en los enlaces de amazon
Tendríais que verlo así

Localiza la etiqueta <figure> </figure> y elimínala

Aquí está el problema, has de editar el contenido del código HTML y eliminar el texto <figure> al principio y </figure> al final. Este texto no forma parte del anuncio, sino que lo mete wordpress de manera automática cuando pegas código sin haber seleccionado la vista HTML.

Vista del código del anuncio Amazon sin el scroll
Así debería quedar, con la etiqueta <iframe>

Añade el código extra

Hay que añadir un código adicional delante del atributo src. Este código es el que le dirá al navegador que no pinte el scroll y que el contenedor ha de tener un ancho y alto determinado.

style=”width:120px;height:240px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″

Recuerda ponerlo delante del atributo src dentro de la etiqueta <iframe> para que quede como en la figura.

Código HTML de amazon sin scroll y con los atributos correspondientes
Así debería quedar, fíjate en que el nuevo código está delante del atributo src.

Guarda los cambios y publica

Ahora solo hay que pulsar el botón azul de Actualizar y ya estaría resuelto. No olvides actualizar la página con f5 o ctrl+R para ver los cambios.

Vista final del código del anuncio de amazon sin scroll
¡El desagradable scroll ya no está!

Deja un comentario

Tu dirección de correo electrónico no será publicada.