Este truco carga el tiempo de apertura del por el tipo de script, mejor usarlo en aquellos que sean sencillos en la estructura.
Las imágenes se deslizan bajo la cabecera, (habilitando el crosscol), con el uso de un script.
Antes de nada debemos fijarnos si en nuestra plantilla la sección del crosscol está habilitada:
Crear, Personalizar el espacio bajo la cabecera (Crosscol). Consejos
Como imágenes que se incluyen pueden convertirse en enlace a cualquier sitio: entrada, etiqueta, una web externa.
1. En pestaña de Diseño, añadimos un nuevo gadget HTML/Javascrip.
2. Copiamos y pegamos el siguiente código dentro del gadget:
<script type="text/javascript">
//Ancho (en pixeles)
var sliderwidth="960px"
//Alto
var sliderheight="144px"
//Velocidad 1-10
var slidespeed=1
//Color de fondo:
slidebgcolor="black"
//Vinculos y enlaces de las imagenes
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'
leftrightslide[1]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'
leftrightslide[2]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'
leftrightslide[3]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'
leftrightslide[4]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'
leftrightslide[5]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'
leftrightslide[6]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'
leftrightslide[7]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'
leftrightslide[8]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'
leftrightslide[9]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'
var imagegap=""
var slideshowgap=5
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>
3. Es en este código donde hemos de incluir las imágenes y sus enlaces, señalados en negrita.
(Se aconseja usar imágenes de igual medida, ancho-alto, para un resultado final óptimo).
Nota:
Nota:
En la primera parte del script se pueden hacer cambios para ajustar el slide a las necesidades de cada cual:
var sliderwidth="960px" Aquí pondremos el ancho adecuado al slide.
var sliderheight="144px" Aquí el alto que tendrá el slide. Para que quede lo mejor posible, lo ideal es darle unos cinco pixeles más de lo que medirán en altura nuestras imágenes.
var slidespeed=1 Aquí escogemos la velocidad de desplazamiento de las imágenes.
slidebgcolor="black" Color de fondo del slide. En negro (black) en el ejemplo.
var imagegap="" Lo he dejado vacío en el ejemplo, si ponemos ahí un valor (por ejemplo:var imagegap="2") , será la distancia entre imagen e imagen, a mayor valor mayor distancia.
4. Guardar cambios cuando se hayan realizado los cambios precisados.
Fuente: El Escaparate
