Hoy vengo con un tutorial que me han pedido varias veces, 'Como colocar un slider horizontal a pie de blog o footer", aunque también lo puedes colocar en el header.
Este tipo de widget es ideal para aquellos que utilizan su blog para promocionar sus productos o que tienen un blog de fotografía, servicios en eventos, decoración....con él puedes dar a conocer lo que haces de una forma visual y llamativa.
Existen otro tipo de slider que muestran, de forma automática, las últimas entradas o los post más populares.
Pero en este caso, la idea es crear una galería de imágenes con efecto scroll que permita que des un poco de protagonismo a las cositas que con tanto cariño haces...en la primera pagina del blog, la más importante.
Por tanto, tu decidirás que imágenes son las que quieres que salgan y el enlace al que deseas que se dirijan.
¿Qué te parece? ¿Me sigues?
Galería de imágenes, efecto scroll.
Para colocar este widget, sólo vas a utilizar el gadget 'HTML/JavaScript'...vamos paso a paso y ya sabes que si tienes cualquier duda, estaré atenta a tus comentarios.
El código que vamos a utilizar es el siguiente:
<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ágenesvar 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égenesvar copyspeed=slidespeedleftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'var iedom=document.all||document.getElementByIdif (iedom)document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')var actualwidth=''var cross_slide, ns_slidefunction fillup(){if (iedom){cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslideactualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidthcross_slide2.style.left=actualwidth+slideshowgap+"px"}else if (document.layers){ns_slide=document.ns_slidemenu.document.ns_slidemenu2ns_slide2=document.ns_slidemenu.document.ns_slidemenu3ns_slide.document.write(leftrightslide)ns_slide.document.close()actualwidth=ns_slide.document.widthns_slide2.left=actualwidth+slideshowgapns_slide2.document.write(leftrightslide)ns_slide2.document.close()}lefttime=setInterval("slideleft()",30)}window.onload=fillupfunction slideleft(){if (iedom){if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"elsecross_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"elsecross_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-=copyspeedelsens_slide.left=ns_slide2.left+actualwidth+slideshowgapif (ns_slide2.left>(actualwidth*(-1)+8))ns_slide2.left-=copyspeedelsens_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" -> 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="150px", de esta forma conseguirás que las imágenes tengan una altura máxima.
En el caso del ancho, yo he elegido el 1100px que es lo que mide el cuerpo del blog, ya que mi deseo es colocarlo en el footer y de esa forma ocupa todo el mismo.
Enlaces de las páginas a enlazar y enlaces de las imágenes
Enlaces morados -> Aquí debes poner el enlace al que quieras que se acceda cuando se clique sobre la imagen.
Enlaces verdes -> 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.
Para añadir más imágenes debes insertar tantos códigos iguales al siguiente como imágenes quieres, añadiendo el numero correspondiente...después del [4] deberás pegar el [5] y así sucesivamente:
leftrightslide[5]='<a href="http://www.ENLACEdelaENTRADA.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, sobre todo el alto!!) para que la galería de imágenes no quede mal. Si te salen descuadradas ves adaptándolas a tu gusto.
2) Este widget, sólo funciona como tal, no funciona en una entrada.
Este código lo he sacado de blog 'Tutoriales Paco' y si mal no recuerdo incluye un vídeo donde explicaba el paso a paso.
¿Cómo colocarlo en el footer del blog?
- Lo primero que debes hacer es elegir el alto de las imágenes, yo tengo establecido 150px.
- Elige las imágenes que deseas que se vean en el Slider y recórtalas todas con el mismo alto con la ayuda de 'Web Resizer'; eligiendo la altura (heigh) como dato establecido.
- Sube las imágenes a Picassa en una carpeta llamada slider, para que las tengas todas organizadas.
- Obtén las url de las mismas.
- Modifica el código sustituyendo en el lugar correspondiente la url del post (enlaces morados) y la url de la imagen (verde), además del título que desees que se vea al pasar por encima de la imagen.
- Instalalo en Blogger:
- Diseño
- 'Añadir gadget'
- Copia el código'
- Colócalo en el pie del blog o footer.
- Guardar
¿Tienes dudas? no pasa nada, te espero en los comentarios y lo solucionamos.
------------------------------------------------------------------------
¿Te gusta?, te animas a colocarlo en tu blog; yo estoy deseando verlo colocado en más de uno....avísame y pasaré a verlo!!
Mucha gracias por leerme y espero que te haya gustado el tutorial de hoy.
No te olvides de compartir si te ha gustado, me harías felizzzzzz
Besotes...Aprende&Comparte.