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.
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 deimá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.
Fuente
Importantes en trucos Pc :
DISEÑAR BLOG ES FACIL " HACER BLOG"
Cambiar el encabezado en el blog
¿Con qué frecuencia tengo que actualizar mi blog?
34 comentarios:
amigos copie todo el codigo y no me funciona que hago
Hola, después de pegar el código, hiciste bien todos los cambios?
Saludos
Hola...A mi tampoco me funciona...
Hola, os pido perdón ya podéis copiar el código este si funciona.
Gracias y saludos
Hay un límite de imágenes para esta marquesina o puedo poner todas las que quiera ??? Por que si pongo mas de diez ya no anda...
Te recomiendo que uses Pictobrowser http://www.db798.com/pictobrowser/
para muchas imágenes esta genial, gracias por usar este blog y saludos
ola muy buenas
he copiado el codigo y lo he hecho tal y como lo pusiste
pero al cargar el blog primero me carga el blog y luego se sale y se me va. Se queda todo en blanco solamente con el recuadro de la galeria
¿sabes xk puede ser?
Hola Camichan tiene que ser dentro de un gadget, y no en una entrada creo que puede ser eso ¿cual es el blog?
Saludos
Hola Amigo
la verdad es que funciona muy bien, lo tengo trabajando
con 12 imágenes, sin problemas.
Crees que sería posible hacer que no corra permanentemente? Es decir un botón de play y uno de stop.
Como no sé nada de programación acaso estoy pidiendo algo imposible o demasiado complejo.
Es que imagino que el gadget corriendo siempre consume recursos además de distraer.
Saludos cordiales
Hola Tekenika, intentaré decirte algo, y gracias
exelente lo probe buenisimo gracias
hola hice todos los pasos pero no me funciono pero sin embargo en otro blogger que tengo si me funciono me podrias ayudar ? si tienes alguna respuesta por favor te dejo mi email totalsecurity.s.a@msn.com
Dime cual es tu pagina.
Saludos
Lo copie tal cual y no anda, sale el espacio en negro
Sucede que al copiar el código tal cual, es como si las imágenes salieran en orden vertical, y sólo la primera imagen es la que va hacia la izquierda, ej:
Imag1 --> sólo ésta se ve andando a la izq.
Imag2
Imag3
Imag4
me sale error cuando copeo ala plantilla
si vale bro no sabes como puedo ponerle bordes o algun fondo...!! XD Gracias
Saludo y muchas gracias, las imágenes no me salen.
ufff que crack!!! mira como quedo jeje
ganadineroconvisitasreales.blogspot.com
loco esta muy bueno esto.gracias solo tengo un pequeño problema
como le doy un margin top?gracias
¿no se podria hacer correr para los dos lados?
hombre muy buen truco le debo varias... gracias totales
Muy bueno, quedo de maravilla, gracias, buscaba esto como 10 meses y tu me auxiliaste
Thank you, that was just an awesome post!!!.....
Thank you, that was just an awesome post!!!.....
Thanks for sharing that. It was fun reading it. :-)
That was a VERY interesting one! Seriously interesting.
Very good, I am very happy, thank you
Thanks for sharing that
Greetings and thank you very much
excellent, try it good, thank you
loco esta muy bueno esto.gracias solo tengo un pequeño problema
como le doy un margin top?gracias
gracias solo tengo un pequeño problema como le doy un margin top?gracias
Thanks for sharing that. It was fun reading it. :-)
Publicar un comentario