SLIDE (GALER??A DE IM??GENES) PARA TU BLOG

  • agosto 30, 2010

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?

No Comments Found