lunes, 30 de agosto de 2010

SLIDE (GALERÍA DE IMÁGENES) PARA TU BLOG

Aquí os dejo un menú que en realidad es una presentación se fotos e imágenes todas con sus enlaces, es un diseño bastante simple pero muy útil para un blog de  blogger .

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?

23 comentarios:

diego8110 dijo...

amigos copie todo el codigo y no me funciona que hago

Julian dijo...

Hola, después de pegar el código, hiciste bien todos los cambios?
Saludos

Anónimo dijo...

Hola...A mi tampoco me funciona...

De todo para los blogger dijo...

Hola, os pido perdón ya podéis copiar el código este si funciona.
Gracias y saludos

Anónimo dijo...

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...

Mercedes España dijo...

Te recomiendo que uses Pictobrowser http://www.db798.com/pictobrowser/

para muchas imágenes esta genial, gracias por usar este blog y saludos

Camichan dijo...

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?

De todo para los blogger dijo...

Hola Camichan tiene que ser dentro de un gadget, y no en una entrada creo que puede ser eso ¿cual es el blog?
Saludos

Tekenika dijo...

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

De todo para los blogger dijo...

Hola Tekenika, intentaré decirte algo, y gracias

GHOST62 dijo...

exelente lo probe buenisimo gracias

Anónimo dijo...

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

blogger dijo...

Dime cual es tu pagina.
Saludos

Manual Manejo SAS dijo...

Lo copie tal cual y no anda, sale el espacio en negro

hwoarangdo dijo...

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

tvdepor2 dijo...

me sale error cuando copeo ala plantilla

JoNaThAn FaJaRdO dijo...

si vale bro no sabes como puedo ponerle bordes o algun fondo...!! XD Gracias

Anónimo dijo...

Saludo y muchas gracias, las imágenes no me salen.

Anónimo dijo...

ufff que crack!!! mira como quedo jeje
ganadineroconvisitasreales.blogspot.com

R.Dario gonzalez dijo...

loco esta muy bueno esto.gracias solo tengo un pequeño problema
como le doy un margin top?gracias

Anónimo dijo...

¿no se podria hacer correr para los dos lados?

Oscar Lopez dijo...

hombre muy buen truco le debo varias... gracias totales

Mundo Futuro dijo...

Muy bueno, quedo de maravilla, gracias, buscaba esto como 10 meses y tu me auxiliaste

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones