• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Rotador de banners para Blogger
#1
Hola hermanos, como están?

Bueno, como digo en cada post, a mi me gusta mucho navegar por la web e investigar y buscar y todo eso, y siempre me encuentro cosas interesantes que compartirles, en esta ocasión es algo simple, pero si sabes usarlo puede ser util también.

Es un rotador de banners para blogger o banners cambiantes, es fácil de poner y de editar.

Para colocarlo entra a Plantilla | Edición de HTML y pega antes de </head> lo siguiente:

Code:
<script>
//<![CDATA[
/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com
Please leave this notice intact.
*****/

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000); }
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return; }
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>

Ahora pega antes de ]]></b:skin> lo siguiente:

Code:
/* BANNER CAMBIANTE
----------------------------------------------- */
#rotator {
border: 1px solid #000000;
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 430px;
height: 60px;
}
#rotator img {
width: 430px;
height: 60px;
border: 0;
margin: 0;
padding: 0;
}

Las medidas las puedes cambiar de acuerdo al espacio de tu blog, para ajustar el ancho cambia donde dice width y para cambiar el alto en height.

Por último entra a Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega lo siguiente:

Code:
<div id="rotator">
<a href="http://foroinner.com/"><img alt="ForoInner" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
</div>
Cambia los datos de la URL del enlace e imagen y listo.
en setTimeout(so_xfade se indica el tiempo en milisegundos que tarda en cambiar cada banner, se puede modificar por otro valor.
  Reply
#2
¡Gracias!  Smile
  Reply
#3
Gracias por este tutoríal
  Reply
#4
Buenísimo, gracias!
  Reply
#5
Gracias por compartir el código, es muy útil tenerlo e implementarlo por supuesto, saludos.
  Reply
#6
Gracias Smile
  Reply
#7
Que tal gracias por tu aporte, pero tengo un problema no encuentro ]]></bConfusedkin> y si ya lo busque con F3 no aparece por ningún lado en el html, y las imágenes me salen una sobre otra o sea verticalmente Sad alguna idea?

saludos.
  Reply
#8
Tengo una pregunta, como hago para que el rotador aparezca en cada entrada de mi blog.
Gracias.
  Reply
#9
(07-25-2016, 10:40 PM)miguelrey Wrote: Tengo una pregunta, como hago para que el rotador aparezca en cada entrada de mi blog.
Gracias.

Podrías colocarlo en un widgets en la parte donde quieras, osea en la parte superior, izquierda, derecha, abajo, donde quieras que aparezca.
Gracias.
  Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  Livinia Responsive Blogger Template Premium djkevin 0 411 12-17-2016, 02:20 PM
Last Post: djkevin
  Plantilla de blogger para blog xxx Many01 1 1,349 03-02-2016, 10:50 PM
Last Post: Pablo Torres

Forum Jump:


Users browsing this thread: 1 Guest(s)