▷ Slider Automático Horizontal para Blogger

Hace tiempo que no escribía un tutorial en el blog, así que hoy vengo con uno actualizado. Por qué digo que es actualizado, porque en el blog ya tengo algunos tutoriales sobre Slider sencillo para Blogger y Slider Simple para Blog. En esta oportunidad les traigo un Slider diferente a los anteriores y es muy fácil de configurar y estéticamente es sencillo.

Este Slider es ideal para aquellas personas que en su blog quieren promocionar algunos servicios que brindan o mostrar proyectos o cualquier otra cosa. Ya que es un slider que rota automáticamente, sin necesidad de darle click a un botón como en los anteriores casos.

Ver Demo

Ya explicado todo, pues empecemos con el tutorial.

Lo primero que debemos hacer es ubicar donde queremos colocar nuestro Slider, en este caso lo colocaremos en la barra lateral izquierda de nuestro blog en un gadget. Para ello nos vamos a Diseño y agregaremos un gadget de tipo HTML/Javascript y pegamos el siguiente código:

<script type="text/javascript">//<![CDATA[
 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="ENLACE" target="blank"><img border="0" src="URL-IMAGEN"></a>'
leftrightslide[1]='<a href="ENLACE" target="blank"><img border="0" src="URL-ENLACE"></a>'
leftrightslide[2]='<a href="ENLACE" target="blank"><img border="0" src="URL-ENLACE"></a>'
leftrightslide[3]='<a href="ENLACE" target="blank"><img border="0" src="URL-ENLACE"></a>'
leftrightslide[4]='<a href="ENLACE" target="blank"><img border="0" src="URL-ENLACE"></a>'
 var imagegap=""
 var slideshowgap=5 //Número 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>

Configurar Slider para Blogger

Ahora tenemos modificar un poco el primer bloque del código ya que en esa parte está las medidas, velocidad y otras cosas más del Slider para Blogger.

<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

Esto va a depender mucho del lugar de donde quieras colocarlo y también del tamaño de las imágenes que uses. Yo te recomiendo que uses el mismo tamaño para todas las imágenes que quieras colocar, y esa medida lo coloques en el ancho y alto del Slider (segunda y tercera linea)

En la cuarta linea podremos configurar la velocidad de nuestro Slider, tenemos del 1 al 10. Y en la última linea del código tenemos el fondo del Slider, esto solo se verá si es que usas imágenes con transparencia.

Y para terminar tenemos que configurar los imágenes y los enlaces que tendrá cada una. También tenemos que colocar la cantidad de imágenes que usaremos.

//Vínculos y enlaces de las imágenes 
var leftrightslide=new Array() 
var finalslide='' 
leftrightslide[0]='<a href="ENLACE" target="blank"><img src="URL-IMAGEN"></a>' 
leftrightslide[1]='<a href="ENLACE" target="blank"><img src="URL-IMAGEN"></a>' 
leftrightslide[2]='<a href="ENLACE" target="blank"><img src="URL-IMAGEN"></a>' 
leftrightslide[3]='<a href="ENLACE" target="blank"><img src="URL-IMAGEN"></a>' 
leftrightslide[4]='<a href="ENLACE" target="blank"><img src="URL-IMAGEN"></a>' 
var imagegap="" 
var slideshowgap=5 //Número de imágenes

Primero definamos la cantidad de imágenes que tendrá nuestro Slider, para ello nos vamos a la última linea del código y veremos que dice "Número de imágenes" y tiene un 5. Tu puedes colocar la cantidad que quieras.

Ahora tenemos que colocar las imágenes y enlaces. Para esto tenemos que modificar a partir de la linea número cuatro. Vamos a ver que tenemos una lista enumerada desde el número 0 al 4, ya que debemos considerar al 0 también como un número. Luego veremos que en esa parte tenemos resaltado ENLACE y URL-IMAGEN. Esos dos textos tenemos que configurar:

ENLACE -> El enlace que queremos que tenga nuestra imagen cuando hacen click sobre ella.
URL-IMAGEN -> La url de nuestra imagen que queremos mostrar

Qué hago si quiero tener menos imágenes en el Slider

Ahora supongamos que nosotros definimos que nuestro Slider va a tener 3 imágenes. En este caso tendríamos que borrar la siguiente línea de código, la número 3 y 4 para que sean solo 3 imágenes en nuestro slider:

leftrightslide[#]='<a href="ENLACE" target="blank"><img src="URL-IMAGEN"></a>'

Y si quiero tener más imágenes

En este caso haríamos lo contrario al anterior paso, tendríamos que agregar la siguiente línea, dependiendo de cuantas imágenes queremos que tenga nuestro Slider:

leftrightslide[#]='<a href="ENLACE" target="blank"><img src="URL-IMAGEN"></a>'

¿Tienes alguna duda?

Imagenesnaturaleza27 de junio de 2019, 7:10 p.m.
como hago para que el slider me aparezca solo en la pagina principal y no en las entras
ResponderBorrar
Respuestas
Academia de Fútbol JBE15 de agosto de 2019, 7:21 a.m.
coloco el código para su revisión y apoyo...
Omite el < daba error
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]='<2img src="https://i.postimg.cc/sgr97qSs/001.jpg">'
leftrightslide[1]='<2img src="https://i.postimg.cc/W3hMsvR6/002.jpg">'
leftrightslide[2]='<2img src="https://i.postimg.cc/wBxXbN0r/003.jpg">'
leftrightslide[3]='<2img src="https://i.postimg.cc/P5Qb4yzZ/004.jpg">'
leftrightslide[4]='<2img src="https://i.postimg.cc/NMSRMzBh/005.jpg">'
var imagegap="" IGUAL QUITE LA "T" POR DAR ERRO EN T-ARGET Y COLOQUE 2 A IM.G
var slideshowgap=5 //Número de imágenes
var copyspeed=slidespeed
leftrightslide=''+leftrightslide.join(imagegap)+''
var iedom=document.all||document.getElementById
if (iedom) document.write(''+leftrightslide+'') 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('') if (iedom){ TUVE QUE RETIRA POR SUPERAR 4096 CARACTERES
ResponderBorrar
Respuestas
HoyGeek16 de agosto de 2019, 12:41 p.m.
Hola ACADEMIA DE FÚTBOL JBE. Si, si puedes borrar la entrada. Solo es para poder subir y tener almacenada la imagen y obtener la URL.

Ahora con respecto a jQuery, para este slider no es necesario, ya que no trabaja con esa librería. Si desea puede agregarlo o no a su blog ya que no influye en nada en este slider.

Sobre el código del slider, podrías volver a copiarlo e intentar nuevamente, a ver si ahora si funciona.
ResponderBorrar
Respuestas
yoni24 de febrero de 2020, 2:35 a.m.
Hola.
en primer lugar buen blog , muy detallado los paso a seguir.
ahora mi consulta, si dejo el ancho del slider mas pequeño, como lo dejo centrado en el blog, por queda cargado hacia un lado , agradecería tu ayuda . saludos
ResponderBorrar
Respuestas
Alvarito27 de marzo de 2020, 7:59 p.m.
Este comentario ha sido eliminado por el autor.
ResponderBorrar
Respuestas
Manuel27 de abril de 2020, 7:51 p.m.
Hola ¿hay alguna forma de de insertar el slider en un post? Solo me funciona dentro de un gadget html. Gracias.
Un saludo.
ResponderBorrar
Respuestas
mcingeniería14 de mayo de 2020, 7:21 a.m.
Hola como estas, por favor me puedes ayudar con algo, el slider me funciona muy bien, pero solo deseo que este en la pagina principal pero como tengo algunas paginas me sale en todas, como puedo hacer para que solo se muestre en la primera, use el código que antes ya dejaste en una respuesta pero no se si a ese código le tengo que agregar alguna url o pegarlo tal y como está?
ResponderBorrar
Respuestas
aamaya12719 de mayo de 2020, 1:28 a.m.
Hola como le agrego los botodes de diredcciones en caso que no lo quiera automatico el slider ??
ResponderBorrar
Respuestas
COLOMBIA URBANA11 de septiembre de 2022, 1:20 a.m.
como poner espacio entre cada imagen broo
ResponderBorrar
Respuestas

Agregar un comentario