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

domingo, 24 de julio de 2016

¡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ñoAgregar 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 moradosAquí colocan el enlace hacia donde quieran que se acceda al hacer clic sobre la imágen.
Enlaces verdesAquí 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!

18 comentarios:

  1. Pueden ser tutoriales de personalización de las cajas de comentarios, las paginas (las que te da blogger, bueno el menu que te da blogger), personalizar el "entradas recientes", "entradas antiguas", "pagina principal", dar algunos códigos de emoticones/emojis.
    Hay un sin fin<3
    Lindo blog :3
    MIL GRACIAS POR TODOS TUS TUTORIALES <3

    ResponderEliminar
    Respuestas
    1. Muchísimas gracias por tus sugerencias ^-^
      Y también gracias por pasarte y comentar!
      Besos *-*

      Eliminar
  2. Hola !
    No tienes ni idea de cuanto necesitaba este tutorial, muchas gracias !!!!

    Abrazos !

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Me alegra mucho que haya resultado de tu utilidad ^-^
      Besos <3

      Eliminar
  3. Me lo apunto sin duda, porque quiero tunear un poco el blog. Gracias, guapa. Besos

    ResponderEliminar
  4. Madre mia para gente como yo que no tenemos ni idea de diseño estas cosas vienen muy bien!

    ResponderEliminar
  5. ¡ERES ESTUPENDA! ¿Lo sabías? <3

    ¡SE MUUY FELIIIIIIIIIIIIIIIIIIIIIIIZ! :):)

    ResponderEliminar
    Respuestas
    1. Muchas gracias jajaja
      TU eres estupenda ^-^
      Besitos ❤️‍ ❤️‍

      Eliminar
  6. Hoola! Me pasaba por aquí para decirte que tengo una nueva entrada donde recolecto frases para mi novela y te invitaba a pasar y dejar alguna, puede ser tuya o no. Te dejo el link: http://espacio0adolescente.blogspot.com.es/2016/07/y-tu-te-apuntas.html
    Un beso enorme ^^

    ResponderEliminar
    Respuestas
    1. ¡Hola! Muchas gracias por tu invitación ^-^
      Ahora mismo me paso por tu entrada :)
      Un besote ❤️‍

      Eliminar
  7. Hola
    Tus tutoriales siempre son de ayuda. Sigue así
    besos

    ResponderEliminar
    Respuestas
    1. ¡Hola Ángeles!
      Que bueno que mis tutoriales sean de ayuda ^-^
      Besitos ❤️‍

      Eliminar
  8. Hola! excelente tutorial, vengo de la iniciativa seamos seguidores, ya te sigo :D
    muchas gracias por estas cositas para que nuestros blogs se hagan mas bonitos :3

    ResponderEliminar
    Respuestas
    1. ¡Hola Alejandra! Gracias por seguirme, ahora me paso y te sigo de vuelta ^-^
      Un beso ❤️‍

      Eliminar

¡Hola lectores!
Si amas ♥ el olor a libro como yo, no puedes irte
sin antes dejar un comentario
¡Siempre los devuelvo!
Por favor evita hacer spoilers y que prevalezca el
respeto ante todo.
♥ Tu opinión es muy importante para mí♥

Santa Template by Mery's Notebook © 2014