💻Tutoblog para ti #17: Cómo colocar un slider de imágenes en el blog.

¡Holaa lectores! El tutorial que correspondía para hoy (Widget de comentarios recientes) no lo voy a subir ya que hubo una complicación con la página en dónde se crea el widget...
Así que en su lugar, les traigo un tutorial que YO estaba buscando y que me habían pedido un par de amigas: Cómo colocar un slider de imágenes.
Espero que les guste el tutorial y les resulte de utilidad...

☕ Paso 1:

Para colocar este widget sólo deben dirigirse a Diseño→Agregar gadget →HTML/JavaScript. 

☕ Paso 2:

Allí trabajarán con este código:

<script type="text/javascript">

var sliderwidth="1100px" //Ancho total de la galería

var sliderheight="150px" //Alto de la galería

var slidespeed=2 //Velocidad 1-10

slidebgcolor="#ffffff" //Color de fondo

//Vínculos y enlaces de las imágenes

var leftrightslide=new Array()

var finalslide=''

leftrightslide[0]='<a href="http://www.enlace-al-que-quieres-que-se-diriga-al-clicar-en-la-imagen.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'

leftrightslide[1]='<a href="http://www.enlace-al-que-quieres-que-se-diriga-al-clicar-en-la-imagen.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'

leftrightslide[2]='<a href="http://www.enlace-al-que-quieres-que-se-diriga-al-clicar-en-la-imagen.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'

leftrightslide[3]='<a href="http://www.enlace-al-que-quieres-que-se-diriga-al-clicar-en-la-imagen.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'

leftrightslide[4]='<a href="http://www.enlace-al-que-quieres-que-se-diriga-al-clicar-en-la-imagen.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'

var imagegap=""

var slideshowgap=5 //Numero de imégenes

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>

height="Xpx →Reemplazan la X por la altura total que tendrá la galería de imágenes.
Enlaces morados→Aquí colocan el enlace hacia donde quieran que se acceda al hacer clic sobre la imágen.

Enlaces verdes→Aquí colocar el enlace de la imagen.

title="Aquí el título"→Aquí colocan el nombre que quieren que aparezca cuando se coloque el cursor sobre la imagen.

☕ Paso 3:

Una vez editado, hacen clic en Guardar y listo.
A este widget lo pueden colocar en el footer (pie de la plantilla) o en el sidebar (columna lateral en donde se organizan los widgets).

IMPORTANTE

→Para agregar más imágenes sólo deben copiar y pegar tantos códigos iguales al siguiente como imágenes quieren; recuerden colocar los números correspondientes, después del [4] deberán pegar el  [5 ] y así sucesivamente.

→Todas las imágenes deben tener el mismo ancho y largo así el slider es proporcionado.

Cualquier duda con el código o con su colocación, no duden en comentar o envíenme un mensaje a cariavial280371@gmail.com

Hasta aquí llegó el tutorial de hoy, espero que haya resultado de su utilidad.

Como ya me estoy quedando un poco corta con las ideas en relación con los tutoriales, les pido su ayuda. Comenten los tutoriales que les gustaría que publique, sus dudas respecto a los códigos de blogger o cualquier inquietud.

Si no quieren perderse nada, recuerden suscribirse y seguirme en mis redes sociales.

¡Un abrazo literario!