<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 1 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.
Gracias!! Es genial!!
ResponderEliminartodo 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
ResponderEliminarhola aitor, mandame un correo mejor a consejosparanovatos@gmail.com de todas formas, tienes dos videos para poner musica. saludos
EliminarGracias!!!
ResponderEliminarLo 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.
Muchas gracias por el truco :)
ResponderEliminarde nada :D
EliminarUn millón de gracias, ha quedado genial.
ResponderEliminarFunciona a las mil maravillas. Os lo recominedo 100%
http://virginia-eldiariodemam.blogspot.com.es/
Millones de gracias !! me super sirvio, busque en un monton de lugares como hacerlo pero no lo entendia, gracias :)
ResponderEliminarhttp://popurridelibros.blogspot.com.ar/
Este comentario ha sido eliminado por el autor.
ResponderEliminarHolaa 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 :)
ResponderEliminarHola, 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
EliminarHola, 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.
ResponderEliminarHola, 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
EliminarHola, 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).
EliminarSale 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.
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
EliminarMuchas gracias Teodorus, ya he conseguido hacerlo, y ha quedado genial, muchas gracias por tus consejos y atención. Un saludo.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarcomo 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.
ResponderEliminarHola 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
Eliminarhola .. 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 :(
ResponderEliminarHola. Porq estarán ocultas...mira el vídeo 58: http://www.youtube.com/watch?v=8TrmxsiCDaA&index=58&list=PLxrlSPzTYmSweRY4a2adrDLHrHX77ebTm
EliminarHOla ! 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.
ResponderEliminarSoy Silvina , la que les consulto hace unos meses sobre el Blog escolar q armamos con mis alumnos.
Espero rta!! Besos
Te digo mas , cuando paso de html a redactar aparece en blanco, ni en vista previa se ve algo.....
ResponderEliminarLO TIENES QUE METER EN GADGETS EN HTML/Javascript
EliminarSI 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
espero que te ayude KEYs Pc
Eliminargracia bonita muy bueno un besote
ResponderEliminarles recomiendo este
ResponderEliminarlassocialesyelmundo.blogspot.com
Hola! Gracias por el trabajo que haceis, habría alguna manera de que el slider tuviera los contornos redondeados?
ResponderEliminar;)
Hola Imanol, no, aunq puedes poner las fotos como quieras...
EliminarMuchas 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!
ResponderEliminarHola Guillermina, si lo pones en un gadget (no en una entrada) se ve siempre. saludos
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarhola 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
ResponderEliminarHola. Esto? http://consejosparanovatos.blogspot.com.es/2014/06/como-poner-una-imagen-con-movimiento-y.html
EliminarHola ;) 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
ResponderEliminarHola, 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
EliminarHola 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??
ResponderEliminarHola 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
EliminarGracias me ha quedado muy bien, pero quisiera saber cuantas fotos puedo subir porque he subido 12 y cuando pongo otra ya no me aparece.
ResponderEliminarGracias.
Hola Jesus, nunca he subido tantas, puede ser 12, si no te deja más...saludos
Eliminarmuchas 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.
ResponderEliminarHola. Me alegro de que te estén sirviendo. Gracias por comentar :D
Eliminarhola 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!
ResponderEliminarSublime, muchas gracias por el tutorial y el código.
ResponderEliminarDe nada! A ti por comentar :D
Eliminarme encanta este blogg
ResponderEliminarGracias :D
Eliminar¿como se pueden introducir dos en la misma página?
ResponderEliminarbuenas 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??
ResponderEliminarHola. Justo arriba del código tienes un vídeo, ahi explico lo que me comentas. saludos
EliminarHolaaaa,Muy Chevere tu Tutorial,
ResponderEliminarNecesito 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
Me interesaria arm,ar gif en movimiento y si se puede gif que hablen soy de argentina muy bueno tu blogger de enseñanza
ResponderEliminarHola!! 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!!:(
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar¡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.
ResponderEliminarHay una opcion de que el usuario pueda mover las imagenes en ves de moverse automaticamente
ResponderEliminar