Hosting en inglés

alojamiento web con Webhostinghub
Hosting SSD con Raiola

Rotación aleatoria de banners en cada carga de página para Blogger

Hoy vamos a enseñar como agregar rotación aleatoria de banners en blogs de Blogger. Esto es útil especialmente para aquellos que están monetizando su blog con varios anunciantes y buscan una manera de rotar y mostrar distintos banners en los mismos espacios publicitarios cada vez que se carga una página. La secuencia de comandos que se muestra en este tutorial rotará un grupo de imágenes o banners en los widgets del blog o incluso en el blog mismo. El código toma un bloque de imágenes creadas anteriormente, las muestra en un formato de columnas y cambia al azar las imágenes con cada carga de página. Cada imagen también estará vinculada a un enlace designado por el dueño del blog. El código está escrito en javascript, por lo que debería funcionar con cualquier blog o plataforma web.

Cuando se utiliza este código, se presentan imágenes de banners de forma aleatoria en cada carga de página y esto es aplicable para blogs Blogger. Así que, si usted es uno de los usuarios de la plataforma Blogger, puede hacer uso de este recurso.

Los pasos para implementar este truco son los siguientes:

Paso 1. Inicie sesión en su cuenta de Blogger utilizando su cuenta de Google. Vaya al Blogger Dashboard y, a continuación, haga clic en la pestaña de Diseño del panel izquierdo y haga clic en el enlace Añadir un gadget.

Dashboard de Blogger

 

Interfaz para agregar nuevos gadgets en Blogger

Paso 2. Después de hacer clic en el enlace Añadir un gadget, se abrirá un cuadro emergente con muchas listas de gadgets. Elija HTML / JavaScript de las opciones del gadget haciendo clic en el signo más azul en la parte superior izquierda del gadget.

Gadget para agregar código HTML/Javascript

Paso 3. Seleccione ‘HTML / Javascript’ y luego coloque el banner de imagen aleatorio rotativo modificado que hizo.

El código que se utiliza para mostrar los banners rotatorios es el siguiente:

<div align=”center”>
<table bgcolor=”#ffffff” border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width: 900px;”>
<tbody>
<tr>
<td><center>

<!– BANNER#1 –>
<script language=”JavaScript”>
images = new Array(2);
images[0] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[1] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[2] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[3] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’Image Tag’></a>”;
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center>
</td>
<td><center>

</script>
</center>
</td>
</tr>
</tbody></table>
</div>

El código a continuación es para uno de los banners que van a ser rotados en cada página cargada. Debe modificar los elementos destacados de los códigos;

images[0] = “<a href = ‘#‘ target=’_blank’ rel=’nofollow‘ ><img src=’image link‘ border=’0′ height=’60‘ width=’120‘ alt=‘Image Tag‘></a>”;

Personalización del código:

  • images [0]: Esta será la disposición de las imágenes, el primer código debe comenzar en 0, el 1 para la siguiente imagen y así sucesivamente.
  • #: Reemplazar esto con el enlace/sitio web hacia donde desea redirigir a sus visitantes si hacen clic en la imagen del banner.
  • nofollow: Si quiere hacer que el enlace cuente con el atributo dofollow simplemente reemplázalo por dofollow
  • image link: Sustituya el enlace de imagen que desea mostrar en enlaces específicos
  • 60: Permite modificar la altura de la imagen en píxeles tal como prefiera el usuario.
  • 120: Permite modificar la anchura de la imagen en píxeles tal como prefiera el usuario.
  • Image Tag: Sustituya con el nombre del enlace, este texto se mostrará al pasar el ratón sobre la imagen del banner.
  • <! – BANNER # 1 -> Esto será su guía si planea agregar más de un banner en una línea.

Si desea agregar más de una imagen en una fila sólo tiene que agregar un nuevo conjunto de banner de forma similar a como se muestra en el conjunto de códigos a continuación (3 juegos de banners en una fila):

<div align=”center”>
<table bgcolor=”#ffffff” border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width: 900px;”>
<tbody>
<tr>
<td><center>

<!– BANNER#1 –>
<script language=”JavaScript”>
images = new Array(2);
images[0] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[1] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[2] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[3] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’Image Tag’></a>”;
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center>
</td>
<td><center>

<!– BANNER#2 –>
<script language=”JavaScript”>
images = new Array(2);
images[0] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[1] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[2] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[3] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’Image Tag’></a>”;
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center>
</td>
<td><center>

<!– BANNER#3 –>
<script language=”JavaScript”>
images = new Array(2);
images[0] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[1] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[2] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’banner exchange partner’></a>”;
images[3] = “<a href = ‘#’ target=’_blank’ rel=’nofollow’ ><img src=’image link’ border=’0′ height=’60’ width=’120′ alt=’Image Tag’></a>”;
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center>
</td>
<td><center>
</script>
</center>
</td>
</tr>
</tbody></table>
</div>

 


 

SUSCRÍBETE SIN COSTO ALGUNO A NUESTRO BOLETÍN

Escribe tú correo electrónico:

Recibe contenido de este sitio sin costo alguno en tu e-mail. Solamente enviaremos los últimos artículos de Internetrcc, sin ningún tipo de spam

Acelera tu sitio

CDN para WordPress

Leave a Reply