Diapositiva de imagenes con enlace,Image slide link.

Este es un script,que nos ofrece un carrusel de imagenes,en modo de diapositiva,y además con enlaces,lo que significa,que "las imagenes están enlazadas"(Image slide link).

Es editable,en tamaño,en imagenes,y porsupuesto podemos poner los enlaces que queramos.Podemos darle multitud de usos:
*Podemos poner imagenes de Banners de otros Blogs o paginas y sus enlaces.
*Si tienes por ejemplo una pagina de Música,puedes poner las carátulas del álbum y el enlace...
*También podemos poner imagenes o secciones de nuestra propia pagina o un contenido que queramos,y así ofrecer el contenido de una manera muy visual y diferente...ya cada uno le da el uso que crea que mas le convenga o mas le guste.

Bien es muy sencillo ya que podemos colocar el código que os ofrezco,e un elemento "HTML/javascript",agregando un nuevo elemento.
*Copiamos el código siguiente:

<br /><span style="font-weight:bold;"><</span>script type="text/javascript"<span style="font-weight:bold;">></span><br /><br />/***********************************************<br />* Translucent Slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)<br />* This notice MUST stay intact for legal use<br />* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code<br />***********************************************/<br /><br />var trans_width='<span style="font-size:130%;"><span style="color: rgb(255, 0, 0);">140px</span></span>' //slideshow width<br />var trans_height='<span style="font-size:130%;"><span style="color: rgb(255, 0, 0);">100px</span></span>' //slideshow height<br />var pause=3000 //SET PAUSE BETWEEN SLIDE (7000=3 seconds)<br />var degree=10 //animation speed. Greater is faster.<br /><br />var slideshowcontent=new Array()<br />//Define slideshow contents: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]<br />slideshowcontent[0]=["<span style="color: rgb(255, 0, 0);">AQUI LA URL DE LA IMAGEN</span>", "<span style="color: rgb(255, 0, 0);">AQUI LA URL DEL ENLACE O CONTENIDO</span>", "_new"]<br />slideshowcontent[1]=["<span style="color: rgb(255, 0, 0);">AQUI LA URL DE LA IMAGEN</span>", "<span style="color: rgb(255, 0, 0);">AQUI LA URL DEL ENLACE O CONTENIDO</span>", "_new"]<br />slideshowcontent[2]=["<span style="color: rgb(255, 0, 0);">AQUI LA URL DE LA IMAGEN</span>", "<span style="color: rgb(255, 0, 0);">AQUI LA URL DEL ENLACE O CONTENIDO</span>", "_new"]<br />slideshowcontent[3]=["<span style="color: rgb(255, 0, 0);">AQUI LA URL DE LA IMAGEN</span>", "<span style="color: rgb(255, 0, 0);">AQUI LA URL DEL ENLACE O CONTENIDO</span>", "_new"]<br /><br /><br /><br />////NO need to edit beyond here/////////////<br /><br />var bgcolor='ffffff'<br /><br />var imageholder=new Array()<br />for (i=0;i<span style="font-weight:bold;"><</span>slideshowcontent.length;i++){<br />imageholder[i]=new Image()<br />imageholder[i].src=slideshowcontent[i][0]<br />}<br /><br />var ie4=document.all<br />var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1<br /><br />if (ie4||dom)<br />document.write('<span style="font-weight:bold;"><</span>div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"<span style="font-weight:bold;">><</span>div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"<span style="font-weight:bold;">><</span>/div<span style="font-weight:bold;">><</span>div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"<span style="font-weight:bold;">><</span>/div<span style="font-weight:bold;">><</span>/div<span style="font-weight:bold;">></span>')<br />else if (document.layers){<br />document.write('<span style="font-weight:bold;"><</span>ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'<span style="font-weight:bold;">><</span>layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0<span style="font-weight:bold;">></span>'+'<span style="font-weight:bold;"><</span>img src="'+slideshowcontent[0][0]+'"<span style="font-weight:bold;">><</span>/layer<span style="font-weight:bold;">><</span>/ilayer<span style="font-weight:bold;">></span>')<br />}<br /><br />var curpos=trans_width*(-1)<br />var curcanvas="canvas0"<br />var curindex=0<br />var nextindex=1<br /><br />function getslidehtml(theslide){<br />var slidehtml=""<br />if (theslide[1]!="")<br />slidehtml='<span style="font-weight:bold;"><</span>a href="'+theslide[1]+'" target="'+theslide[2]+'"<span style="font-weight:bold;">></span>'<br />slidehtml+='<span style="font-weight:bold;"><</span>img src="'+theslide[0]+'" border="0"<span style="font-weight:bold;">></span>'<br />if (theslide[1]!="")<br />slidehtml+='<span style="font-weight:bold;"><</span>/a<span style="font-weight:bold;">></span>'<br />return slidehtml<br />}<br /><br />function moveslide(){<br />if (curpos<span style="font-weight:bold;"><</span>0){<br />curpos=Math.min(curpos+degree,0)<br />tempobj.style.left=curpos+"px"<br />}<br />else{<br />clearInterval(dropslide)<br />if (crossobj.filters)<br />crossobj.filters.alpha.opacity=100<br />else if (crossobj.style.MozOpacity)<br />crossobj.style.MozOpacity=1<br />nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"<br />tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)<br />tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])<br />nextindex=(nextindex<slideshowcontent.length-1)? onload="startit" 1="" 0="" function="" if="" crossobj="tempobj=ie4?" opacity="document.all.canvas1.filters.alpha.opacity=20" else="" mozopacity="document.getElementById("canvas1").style.MozOpacity=0.2" var="" temp="setInterval("moveslide()",50)" dropslide="eval(temp)" curcanvas="(curcanvas=="canvas0")?" curindex="(curindex<slideshowcontent.length-1)?" curpos="parseInt(trans_width)*(-1)" left="curpos+"px"" tickernssub="" innerhtml="getslidehtml(slideshowcontent[curindex])" visibility="show" span="" style="font-weight:bold;">></slideshowcontent.length-1)?>

*Lo resaltado en rojo podemos modificar,que seria el tamaño de alto y ancho:width='140px' //slideshow width
var trans_height='100px' //slideshow height

y los enlaces de imagen y url del contenido: "AQUI LA URL DE LA IMAGEN", "AQUI LA URL DEL ENLACE O CONTENIDO"
*Si queremos poner mas imagenes enlazadas solo hemos de añadir "modulos numerados" a continuación de los que ya hay:

slideshowcontent[4]=["AQUI LA URL DE LA IMAGEN", "AQUI LA URL DEL ENLACE O CONTENIDO", "_new"]

slideshowcontent[5]=["AQUI LA URL DE LA IMAGEN", "AQUI LA URL DEL ENLACE O CONTENIDO", "_new"]

*Y así sucesivamente,espero que lo disfruteís.

Enlazar una "url" a un "texto" (Url oculta) enlace.

Bueno aunque hay html para enlazar una url a una palabra o frase. Blogger dispone de metodo mas sencillo sin codigos,y en dos pasos ilustrados esplico como hacerlo,para que los visitantes "al clicar en la palabra deseada" directamente accedan a la pagina deseada:

Ejemplo: Youtube , DarkOrbit , HumorisaS
Ejemplo: Para descargar programas gratuitos libres de virus te aconsejo >Softonic<.

1º vemos un boton para enlazar,pero si le damos saldra la ventana que diga:"selecciona primero el texto que desees convertir en enlace";

mirese 2º"ventana"

3º Paso ponemos un Texto o frase que queramos:

Volvemos a empezar con los pasos,esto es bien simple:
Paso 1º:seleccionamos el texto o frase a enlazar.
Paso 2º:Clicamos el boton para enlazar.
Paso 3º: la ventana sale correcta para enlazar y solo hay que introducir la "url" deseada y aceptar.

Url "Enlace" Oculto,otro modo de enlazar.

Como vereis podéis poner dentro del código que oculta la "url" de una web o Blog,un "logo" unas "letras mas bonitas,previamente diseñadas y subidas a la red",o simplemente imagenes,es otra opción de personalización:

<a href="AQUI PONEIS UNA "url" LA QUE QUERAIS"><img src="AQUI PONES "URL" DE IMAGEN gif,jpg QUE QUERAIS" alt="AQUI PODEIS PONER UNAS LETRAS O SI LO USAIS TIPO "fAVICONES" PARA eNLAZAR LO DEJAIS EN BLANCO "></a><p>

-El "Favicon" es un método que ocupa muy poco espacio para "enlazar" otras web/Blogs,podéis aplicar este código sencillo + una tabla sencilla que podréis encontrar en este blog en el apartado "Tablas",os pongo un ejemplo de un espacio de Favicones tamaño 16 x 16.:



Los "espacios pueden ser rellanados por otro "favicones" o se pueden poner de otro tamaño tanto la tabla se puede adaptar como se puede poner el tipo de "icono" deseado,eso ya al gusto de cada uno.

¿Como poner la "URL" oculta en una palabra?...

Aunque muchos sabréis como hacerlo,evidentemente habrá quien no sepa,así que explicare resumida y facilmente como se hace:



-Esconder una "URL" en una palabra (La palabra dirige a la url)...

-Ejemplo: Visita Moto GP

Copia "TODO" lo siguiente:

<url><a href="AQUÍ LA DIRECCIÓN DESEADA" >AQUÍ LA PALABRA ELEGIDA></a>

-Ejemplo de para que sirve:

-Hola amigos,ayer encontré una pagina que habla de Moto gp,que está muy bien AQUÍ es gratuita,y podemos disfrutar de todo el moto gp,noticias, imagenes,clasificaciones,eventos,horarios,chat...



-Ejemplo usado de url: <url><a href="http//motogpmotor.blogspot.com">Moto GP</a>