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?

Ayer en clase algunas compañeras me preguntaban como había creado la nube de etiquetas, como de memoria no me se las cosas, y todo lo apunto en mi libreta XD os voy a enseñar como poner una nube de etiquetas en vuestro blog.