El post que buscas se encuentra eliminado, pero este también te puede interesar

Galeria de imagenes para tu Blog (slide)

Anuncios

Galeria de imagenes para tu Blog (slide)


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='<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 deberás pegar el y así sucesivamente:
leftrightslide='<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.


[url=http://cinemupp.blogspot.com/]Si quieres verlo en movimiento clica aquí.[/url]

http://cinemupp.blogspot.com/

Anuncios

9 comentarios - Galeria de imagenes para tu Blog (slide)

@cerebroypinky
amigo no logro que me aparezca ni en mi blogger ni en mi pagina web que puede ser??
@Morley
Necesito uno para una entrada no para la pagina principal.
@TheBadBoys
saca las caras man ja y te dejo 10
@punkshadow11
podrias darme un pequeño tutorial de que debo quitar esque por ninguna forma me da
@alvaroj23
Bro como consigo una platilla como esa?
@IArobotica
Gracias amigo, me salvaste +10