Galeria de imagenes para blogger




<script type="text/javascript">
//Ancho (en pixeles)
var sliderwidth="1080px"
//Alto
var sliderheight="200px"
//Velocidad 1-10
var slidespeed=1
//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>'


var imagegap=""
var slideshowgap=3


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> 




Puedes modificar:

var sliderwidth="1080px" -> Este es el ancho total que tendrá la galería de imágenes.
var sliderheight="200px" -> Este es el alto total que tendrá la galería de imágenes.
var slidespeed=1 -> El 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 alto total que tendrá la galería de imágenes, es decir, var sliderheight="200px", 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 enlace 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.


Para añadir más imagenes teneis que copiar este código (cambiando despues el 3 por 4, 5,...):
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>'

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 desproporcionada. 
2) Este gadget sólo funciona como gadget, no funciona en una entrada.

56 comentarios:

  1. todo esto ayuda mucho, eres la mejor XD. No se como se te ha ocurrido hacer y crear este SuperMegaBlog XD. Oye me puedes explicar como poner musica otra vez en mi blog?? esque en el video que tu has puesto yo no lo he entendido bien XD

    ResponderEliminar
    Respuestas
    1. hola aitor, mandame un correo mejor a consejosparanovatos@gmail.com de todas formas, tienes dos videos para poner musica. saludos

      Eliminar
  2. Gracias!!!
    Lo acabo de poner en mi blog: http://bibliotecariacircunstancial.blogspot.com.es/
    Me encanta!!!
    Muchas, muchas, muchas gracias :)
    También he puesto los corazones, muy chulos.

    ResponderEliminar
  3. Un millón de gracias, ha quedado genial.
    Funciona a las mil maravillas. Os lo recominedo 100%
    http://virginia-eldiariodemam.blogspot.com.es/

    ResponderEliminar
  4. Millones de gracias !! me super sirvio, busque en un monton de lugares como hacerlo pero no lo entendia, gracias :)
    http://popurridelibros.blogspot.com.ar/

    ResponderEliminar
  5. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. Holaa esque tengo un problema para la galeria de imagenes,cuando pongo el codigo y el link de la imagen voy a mi blog y me pone erro y se ven unos cuadrados negros que es donde tendrian que estar las imagenes y arriba a la izquierda de ese rectangulo mejor dicho una hoja rota que hago para que se vean las imagenes? esque mi idea esq vean mis imagenes y vayan pasandolo porq me gustaria poner mis comics para que las personas lo lean me seria una grandisima ayuda UN SALUDO Y GRACIAS POR ESTOS VIDEOS :)

    ResponderEliminar
    Respuestas
    1. Hola, eso es porque la imagen no esta bien, porq se ha subido mal o porque no habeis copiado el codigo bien (te has dejado alguna cosa de la dirección). saludos

      Eliminar
  7. Hola, yo tengo el mismo problema, me sale la galería pero no las imágenes. Se ven unos pequeños cuadraditos como se no cargase la imagen. ¿Qué debo hacer? Muchas gracias, sus vídeos son magnificos. Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola, eso es porque la imagen no esta bien, porq se ha subido mal o porque no habeis copiado el codigo bien (te has dejado alguna cosa de la dirección). saludos

      Eliminar
    2. Hola, gracias por contestar tan pronto. He comprobado la dirección, he cargado las imágenes varias veces. Creo que el error está en el enlace de la imagen, la he obtenido del PC tal como indicais en el vídeo (copio el código después de src).
      Sale el título de la imagen, va a la página que indico pero no sale la imagen, ya he copiado varias veces el código que dais, pero no se que estoy haciendo mal. Un saludo y gracias de antemano.
      ¿Hay que guardar las imágenes del pc en algún lugar del blog para enlazarlas? Gracias.

      Eliminar
    3. Hola María. Esta en png o jpg? Si esta en otro formato, abre el paint y dale a guardar como y escoge uno de los dos q t acabo de decir. En caso de que eso tampoco funcione, prueba a subirla a un servidor como: https://imageshack.com/ y copiar la url q t dan ahi, pero es raro...saludos

      Eliminar
    4. Muchas gracias Teodorus, ya he conseguido hacerlo, y ha quedado genial, muchas gracias por tus consejos y atención. Un saludo.

      Eliminar
  8. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  9. como puedo hacer para que las nuevas entradas no me aparezcan en la pagina principal, sino que a traves del menú las pueda ver. agradeceria mucho su ayuda.

    ResponderEliminar
    Respuestas
    1. Hola Alisson, tienes que ocultar la pestaña Pagina principal en Diseño/ paginas/ editar / la desmarcas y guardas. Pero así no te aparecerá la pestaña, por lo que si quieres una pagina principal tendrás que crear una pestaña que se llame asi y poner las entradas que quieras ahi. saludos

      Eliminar
  10. hola .. traté de ponerle "pestañas a mi blog " y no me salen al momento de poner "ver blog" sin embargo puse crear entrada y ahí si sale ... no entiendo veo tus tutoriales y hago lo mismo y no me sale :(

    ResponderEliminar
    Respuestas
    1. Hola. Porq estarán ocultas...mira el vídeo 58: http://www.youtube.com/watch?v=8TrmxsiCDaA&index=58&list=PLxrlSPzTYmSweRY4a2adrDLHrHX77ebTm

      Eliminar
  11. HOla ! Otra vez sopa , he intentado subir el slide de esta manera al blog y no he podido, cuando doy a vista previa no sale nada.
    Soy Silvina , la que les consulto hace unos meses sobre el Blog escolar q armamos con mis alumnos.
    Espero rta!! Besos

    ResponderEliminar
  12. Respuestas
    1. LO TIENES QUE METER EN GADGETS EN HTML/Javascript
      SI NO NO FUNCIONARA SI USA BLOGGER HAZ UN GADGETS Y PRUEVA EL CODIGO SI FUNCIONA
      EJEMPLO:
      http://keyspc.blogspot.com.es/p/programacion_5.html

      Eliminar
    2. espero que te ayude KEYs Pc

      Eliminar
  13. les recomiendo este


    lassocialesyelmundo.blogspot.com

    ResponderEliminar
  14. Hola! Gracias por el trabajo que haceis, habría alguna manera de que el slider tuviera los contornos redondeados?

    ;)

    ResponderEliminar
    Respuestas
    1. Hola Imanol, no, aunq puedes poner las fotos como quieras...

      Eliminar
  15. Muchas gracias por el aporte, realmente me resulto muy útil. Quisiera saber si hay alguna forma de que la galeria solo aparezca en la página principal, es que tengo varias paginas en blog pero me gustaria que fuera como una portada. Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Guillermina, si lo pones en un gadget (no en una entrada) se ve siempre. saludos

      Eliminar
  16. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  17. hola quería agradecerte por esto :3 en un principio no entiendo ni por que pero no me funciono ... a lo mejor por que lo copie en un word aunque es raro ya que antes lo había copiado directo y no me había funcionado XD quien sabe al final me funciono aunque no hice nada diferente excepto copiarlo directo de aquí el código... y pues muchas gracias y quería saber si se le puede dar ese efecto de entrar por un lado y salir por el otro a un texto? yo sabia que si solo que no se si se pueda en blog o no recuerdo si era que rebotara contra un lado y regresara jejeje el punto es que me gustaría que un texto anduviera de un lado al otro

    ResponderEliminar
    Respuestas
    1. Hola. Esto? http://consejosparanovatos.blogspot.com.es/2014/06/como-poner-una-imagen-con-movimiento-y.html

      Eliminar
  18. Hola ;) me encanta vuestros tutoriales , por favor necesito que me indiquen algo, lo hice paso a paso y me quedo bien a excepción de la primera imagen que esta en color negro y no se como quitarla , y si quiero hacer tres , se ponen dos en negro y una de ellas adopta el nombre del gadget y pasa imágenes que no le corresponden , que puedo hacer ;) espero vuestras respuesta , besos

    ResponderEliminar
    Respuestas
    1. Hola, solo deja un gadget de esos por blogs, los códigos se solapan. La primera imagen no se que puede ser, si es igual que las demás :S.saludos

      Eliminar
  19. Hola Teodorus¡¡ tengo uma pregunta, he hecho lo que has puesto y de hecho la carpeta me sale pero no me sale ninguna foto, que he hecho mal??

    ResponderEliminar
    Respuestas
    1. Hola Marina. No se si lo he entendido bien, te refieres a que desde el blog, cuando intentas subir la imagen no sale? eso puede ser por el formato que no lo reconozca, comprueba que las imagenes esten en jpg o png. saludos

      Eliminar
  20. Gracias me ha quedado muy bien, pero quisiera saber cuantas fotos puedo subir porque he subido 12 y cuando pongo otra ya no me aparece.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Jesus, nunca he subido tantas, puede ser 12, si no te deja más...saludos

      Eliminar
  21. muchas gracias por ser tan amable en compartir estos trucos que de verdad nos ayudan a modificar algunas cosas de nuestros bloggers. un saludo desde República Dominicana.

    ResponderEliminar
    Respuestas
    1. Hola. Me alegro de que te estén sirviendo. Gracias por comentar :D

      Eliminar
  22. hola muchas gracias por hacer este tutorial y muchos otros en tu pagina me ayudo mucho *-*! felicidades por el blog!, una pregunta seria posible hacer un espacio un poco mas grande entre las imágenes? por que tengo 8 y se ven muy pegadas entre si no se si por mas imágenes que coloques estas se juntan mas o si cambie algo por error (que no creo ya revise 3 veces) :I te lo agradecería n.n!

    ResponderEliminar
  23. Sublime, muchas gracias por el tutorial y el código.

    ResponderEliminar
  24. ¿como se pueden introducir dos en la misma página?

    ResponderEliminar
  25. buenas tardes gracias por tus videos! quisiera saber donde debo pegar el codigo de galeria de imagenes despues de copiarlo? es para mi blog. en una entrada o en añadir un gadget??

    ResponderEliminar
    Respuestas
    1. Hola. Justo arriba del código tienes un vídeo, ahi explico lo que me comentas. saludos

      Eliminar
  26. Holaaaa,Muy Chevere tu Tutorial,
    Necesito tu ayuda
    Yo lo use y me pasa esto http://1.bp.blogspot.com/-owHk-7WD0N0/Vti3a6SP8LI/AAAAAAAAF_8/7mFf8Q8JRoE/s1600/Sin%2Bryuwrtuwrtyi.png Como se ve en la imagen me deja ese espacio, como lo puedo solucionar? y disculpa las molestia, este es mi correo Angelbreu52403@gmail.com

    ResponderEliminar
  27. Me interesaria arm,ar gif en movimiento y si se puede gif que hablen soy de argentina muy bueno tu blogger de enseñanza

    ResponderEliminar
  28. Hola!! sabes que me encantó la idea pero lo estoy poniendo en un lugar donde me permite la plantilla que he bajado pero no me aparece!!! :( Quise ponerlo en un lugar de la plantilla que ya viene con el título ¨Footer-instagram¨que me pone mis fotos de instagram en la parte inferior del blog. Pero también me deja agregar 2 widgets más. y ahí puse este. Pues no he podido hacerlo!!:(

    ResponderEliminar
  29. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  30. ¡Hola Iris! Agradezco no solo la utilidad de este tutorial, sino por todas las cosas chéveres que se pueden aprender con tu blog. Lo interesante es que he probado esta galería en una entrada y me ha funcionado. Nuevamente agradezco a tu blog, éxitos y bendiciones.

    ResponderEliminar
  31. Hay una opcion de que el usuario pueda mover las imagenes en ves de moverse automaticamente

    ResponderEliminar