Voy a tratar de explicar lo mejor posible
cómo poner un slide de imágenes que rotan en vuestro
blog. Pero, ¿
qué es un slide? pues básicamente un slide es una
galaría de imágenes que van pasando una tras otra y que puedes parar que roten si mantienes el cursor de tu ratón sobre una de las ímagenes. Además, si clicas en una de las imágenes aparecerás en la entrada de tu blog que le hayas asignado a esa imagen.
Si quieres verlo en movimiento clica aquí.
Llegamos al punto fuerte, ¿
cómo instalar esta galería de imágenes en tu blogspot? Pues debemos seguir los siguientes pasos:
1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript. En él pega el siguiente código:
<script type="text/javascript">
//Ancho (en pixeles)
var sliderwidth="
650px"
//Alto
var sliderheight="
150px"
//Velocidad 1-10
var slidespeed=
2
//Color de fondo:
slidebgcolor="
#000000"
//Vínculos y enlaces de las imágenes
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://www.
ENLACEdelaENTRADA.blogspot.com" target="blank" title="
Aquí el título"><img border="0" src="http://
ENLACEdelaIMAGEN.jpg" height="
Xpx"></a>'
leftrightslide[1]='<a href="http://www.
ENLACEdelaENTRADA.blogspot.com" target="blank" title="
Aquí el título"><img border="0" src="http://
ENLACEdelaIMAGEN.jpg" height="
Xpx"></a>'
leftrightslide[2]='<a href="http://www.
ENLACEdelaENTRADA.blogspot.com" target="blank" title="
Aquí el título"><img border="0" src="http://
ENLACEdelaIMAGEN.jpg" height="
Xpx"></a>'
leftrightslide[3]='<a href="http://www.
ENLACEdelaENTRADA.blogspot.com" target="blank" title="
Aquí el título"><img border="0" src="http://
ENLACEdelaIMAGEN.jpg" height="
Xpx"></a>'
leftrightslide[4]='<a href="http://www.
ENLACEdelaENTRADA.blogspot.com" target="blank" title="
Aquí el título"><img border="0" src="http://
ENLACEdelaIMAGEN.jpg" height="
Xpx"></a>'
var imagegap=""
var slideshowgap=5
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width="+sliderwidth+" height="+sliderheight+" name="ns_slidemenu" bgcolor="+slidebgcolor+">')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu2"></layer>')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu3"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
Cosas que debes modificar a tu gusto:
var sliderwidth="
650px" -> Este es el ancho total que tendrá la galería de imágenes.
var sliderheight="
150px" -> Este es el alto total que tendrá la galería de imágenes.
var slidespeed=
2 -> El 2 es la velocidad que tendrá el movimiento de las imágenes. Puedes emplear una escala del 1 (menos velocidad) al 10 (más velocidad).
height="
Xpx" -> Sustituye la X por el tamaño que le pusiste al ancho total que tendrá la galería de imágenes, es decir, var sliderheight="
150px", de esta forma conseguirmos que las imágenes tengan una altura máxima.
Enlaces de la página a enlazar y enlaces de las imágenes
http://www.
ENLACEdelaENTRADA.blogspot.com -> Aquí debes poner el enlace al que quieras que se acceda cuando se clique sobre la imagen.
http://
ENLACEdelaIMAGEN.jpg -> Aquí debes poner el elace de la imagen.
title="
Aquí el título" -> Aquí pon el nombre que quieres que aparezca cuando pasas el cursor del ratón sobre la imagen.
¿Cómo añadir más imágenes? Pues bien fácil, después del [4] deberás pegar el [5] y así sucesivamente:
leftrightslide[
5]='<a href="http://www.
ENLACEdelaENTRADA.blogspot.com" target="blank" title="
Aquí el título"><img border="0" src="http://
ENLACEdelaIMAGEN.jpg" height="
Xpx"></a>'
IMPORTANTE
1) Todas las imágenes deben tener el mismo tamaño (ancho y alto) para que la galería de imágenes no quede mal. Si te salen descuadradas ves adaptándolas a tu gusto.
2) Este gadget sólo funciona como gadget, no funciona en una entrada.
Si quieres centrar este gadget recuerda conmigo
como centrar gadgets en tu blog.
Código extraído de
webjcp. Gracias a
jose_3 por su ayuda.
