ūüíĽ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
    Respuestas
    1. ¡Que bueno que sea as√≠ Emma!
      Saludos ^-^

      Eliminar
  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