Cómo poner anuncios rotativos (Con JQuery)

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Hace ya bastante tiempo vimos cómo poner un rotador de banners en el cual es posible agregar sólo imágenes que rotarán una seguida de la otra en forma secuencial.

Con jQuery y el script InnerFade podemos crear anuncios no sólo con imágenes sino también con textos y además podemos elegir si aparecen de forma secuencial o aleatoria. En cualquiera de los casos es posible mostrarlos con un efecto de desvanecimiento entre cada uno de ellos.

En el caso de los anuncios de texto quedan perfecto para resaltar entradas que quizá están un poco olvidadas o que simplemente queremos destacar.

Y en el de las imágenes podemos usarlo también para mostrar entradas destacadas, para publicitar alguna otra cosa más, o simplemente para mostrar las imágenes que te gustan.

En ambos casos la instalción es muy sencilla. Primero hay que descargar este archivo, descomprimirlo y subir el script a un alojamiento.

Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
< script src='URL del archivo jquery.innerfade.js' type='text/javascript'/>
< script type='text/javascript'>
$(document).ready(
function(){
$(&#39;#news&#39;).innerfade({
animationtype: &#39;slide&#39;,
speed: 850,
timeout: 3000,
type: &#39;random&#39;,
});

$(&#39;ul#portfolio&#39;).innerfade({
animationtype: &#39;fade&#39;,
speed: 1000,
timeout: 4000,
type: &#39;sequence&#39;,
});
});
< /script>

Agrega donde se indica en color verde la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin> pega esto:

#news-div {
height:50px; /* Altura del contenedor de los anuncios de texto */
background:#FFFEB8; /* Color de fondo de los anuncios de texto */
border:1px solid #ccc;
}
#news li {list-style-type:none;}
#portfolio li {list-style-type:none;}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega uno de estos códigos:

Para los anuncios de texto

<div id='news-div'>
< ul id='news'>
< li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
< li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
< li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
< li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
< li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
< /ul>
< /div>

Agrega donde se indica la URL del enlace que tendrá el anuncio así como el texto correspondiente.

Para los anuncios de imágenes

<ul id='portfolio'>
< li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
< li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
< li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
< li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
< li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
< /ul>

De igual modo agrega las URL de los enlaces así como las URL de las imágenes.

Dentro del primer código hay unas opciones que podemos personalizar y son las que están en color azul.
animationtype Es el efecto, con slide aparecerá como diapositiva y con fade con desvanecimiento.
speed es la velocidad en milisegundos.
timeout es el tiempo en milisegundos que se muestra cada anuncio.
type define en qué orden se muestran, random es aleatorio y sequence es consecutivo.