E s un Slideshow muy elegante y funcional, bastante similar al Frontpage Slideshow, muy adecuado para darle un toque profesional a nuestro blog o o página web. Es un Slideshow muy dinámico, desarrollado en JavaScript que incluye como características el soporte para las descripciones, enlaces en las imágenes, y utiliza un agradable efecto degradación al cambiar la imágenes. Pero creo que la gran ventaja de este script para generar presentaciones de imágenes es su tamaño, tan sólo 5Kb. El script ha sido testado en Firefox, Internet Explorer, Opera, Safari y Chrome y funciona perfectamente en blogger.
Verlo en funcionamiento: Demo - Demo en Blogger
Como instalar El Tiny slideshow en blogger
Primero, descargamos el script de TinySlideshow. Luego descomprimimos el archivo Zip y nos encontraremos con estos archivos y carpetas:
Las que nos interesana y debemos subir a nuestro servidor son los archivos Style.css y Compressed.js.
Una vez subidos al servidor, volvemos a blogger y vamos a "Diseño" y ahí a "Edición HTML," una vez allí buscamos ]]></b:skin> justo debajo de esto copiamos el siguiente link:
<link href='URL-ARCHIVO/style.css' rel='stylesheet'/>
Sólo deben cambiar lo que está en negritas por la dirección URL donde han cargado el archivo Style.css.
Guardamos y ahora vamos a "Elementos de página" y añadimos un nuevo" gadget HTML," el código a ingresar será el siguiente:
<ul id="slideshow">
<li>
<h3>TinySlideshow v1</h3>
<span>http://iggna.net78.net/scripts/tinyslideshow/photos/orange-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec
mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="http://iggna.net78.net/scripts/tinyslideshow/thumbnails/orange-fish-thumb.jpg"
alt="Orange Fish"/></a>
</li>
<li>
<h3>Sea Turtle</h3>
<span>http://iggna.net78.net/scripts/tinyslideshow/photos/sea-turtle.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec
mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img alt="Sea Turtle" src="http://iggna.net78.net/scripts/tinyslideshow/thumbnails/sea-turtle-thumb.jpg"
/>
</li>
<li>
<h3>Red Coral</h3>
<span>http://iggna.net78.net/scripts/tinyslideshow/photos/red-coral.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec
mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="http://iggna.net78.net/scripts/tinyslideshow/thumbnails/red-coral-thumb.jpg"
alt="Red Coral"/></a>
</li>
<li>
<h3>Coral Reef</h3>
<span>http://iggna.net78.net/scripts/tinyslideshow/photos/coral-reef.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec
mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="http://iggna.net78.net/scripts/tinyslideshow/thumbnails/coral-reef-thumb.jpg"
alt="Coral Reef"/></a>
</li>
<li>
<h3>Blue Fish</h3>
<span>http://iggna.net78.net/scripts/tinyslideshow/photos/blue-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec
mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img alt="Blue Fish" src="http://iggna.net78.net/scripts/tinyslideshow/thumbnails/blue-fish-thumb.jpg"/>
</li>
<li>
<h3>TinySlideshow v.2</h3>
<span>http://iggna.net78.net/scripts/tinyslideshow/photos/yellow-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec
mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="http://iggna.net78.net/scripts/tinyslideshow/thumbnails/yellow-fish-thumb.jpg"
alt="Yellow Fish"/></a>
</li>
<li>
<h3>Squid</h3>
<span>http://iggna.net78.net/scripts/tinyslideshow/photos/squid.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec
mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="http://iggna.net78.net/scripts/tinyslideshow/thumbnails/squid-thumb.jpg"
alt="Squid"/></a>
</li>
<li>
<h3>Small Fish</h3>
<span>http://iggna.net78.net/scripts/tinyslideshow/photos/small-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec
mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="http://iggna.net78.net/scripts/tinyslideshow/thumbnails/small-fish-thumb.jpg"
alt="Small Fish"/></a>
</li>
</ul>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>
<script src="compressed.js" type="text/javascript"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
Lo que deberarán cambiar aquí, serán las direcciones de la imágenes y la dirección del archivo compressed.js por la dirección donde hayan alojado el archivo.
Es importante tener en cuanta que cada li representa una imagen. El H3 comienza con el título de la imagen y la etiqueta p será su descripción. Entre las etiquetas span y /span colocaremos la dirección de la imagen grande que deseamos mostrar. Las que van seguidas del src= son las imágenes miniaturas.
Si todo funciona bien ya deberían tener el Script funcionando.
Si todo funciona bien ya deberían tener el Script funcionando.
Visto en: leigeber.com
Mirá: Cómo diferenciar la primer entrada en blogger
Entradas
25 comentarios:
Hola que tal mi nombre es loiss quisera saber si puedes ayudarme con este tema ya que lo instale en mi blog de pruebas por que desearia ponerlo en mi blog oficial
mi blog de pruebas es este
http://p2pcorp-live.blogspot.com/
al blog que le kiero poner es a este
http://p2pcorporation.blogspot.com/
mira no se que salio mal en mi blog de pruebas salio muy grande tal ves sea por que e alojado los scripts en mi plantilla ya que ahora no se donde alojar esos escripst que dices tal ves sea por eso que a salido mal
pero quisera que me orientes mi blog es d epeliculas ya tengo las fotos y todos quisera que el Tiny Slideshow quede exactamente igual a este
mira
http://scenelatina.org/
Bueno eso seria todo tu blog es increible espero me puedas ayudar muchas gracias un saludo
Loiss
hola Loiss, veo que quedó bien instalado, pero no se porqué decís que quedó muy grande, a que te referís específicamente? a las imágenes de captura que están abajo? si es eso, es porque el CSS vienen así por defecto, pero eso se puede modificar, déjamelo ver y te contesto, voy a probar a ver como queda. No se si va a quedar exactamente igual pero creo que se puede asemejar, porque ese está hecho con el Frontpage Slideshow creo.
Hola gracias por contestar ignacio
mira si lo que pasa es que la fotos no estan en el centro del cuadrado negro ves y las flechitas no aparecen lo que ise para el primer script
Style.css
como sabras no hay paginas que almacenen este tipo de archivos para poder ponerlos y obtener la url si hay pero siempre se paran cayendo pues yo puse el Style.css directamente en la plantilla
lo que creo es que tal ves no se vea bien por que este script
compressed
lo e puesto tambien en la plantilla pero no se sale mal como tu mismo veras y en el post dice que la url deve ir en elemento de entrada pero no se como ponerlo
mira aqui es donde estoy aciendo todo
http://p2pcorp-live.blogspot.com/
y en esta web esta puesto tambien quisera que quede asi pero en mi blog
http://scenelatina.org/
Muchas gracias por ayudar enserio saludos
Hola, con respecto al tema de que las fotos no salen centradas, podría ser por lo que vos me comentás sobre poner el CSS dentro de la plantilla, pero creo que los mas posible sea el lugar donde colocaste el script. Yo tuve es mismo problema cuando coloqué el código por arriba del cuerpo del post y y de la sidebar, que es tu caso creo, fijate que en mi ejemplo está solo por arriba del cuerpo del post, y la sidebar queda al costado. Probá cambiándolo y a ver que pasa. Espero haberme explicado bien, espero tu respuesta.
saludos
Me olvidaba, donde tenés alojadas las imagenes de las flechas?
Con respecto a CSS, yo opté por subirlo a un servidor gratis, no es lo mejor, si lo barato sale caro, no te cuento cuando es gratis, pero hasta ahora Funciona bien:
http://www.000webhost.com/
Hola ignacio JEJEJEJ disculpa por molestarte tanto enserio pero ahora trate de mover algo y se puso peor creo que seria mejor que me digas en que pagina almacenanstes los CSS Y el JS Por que yo los e alojado en el plantilla entiendes osea en
* Descargamos el script a nuestro PC y lo abrimos con el Blog de Notas por ejemplo.
* Copiamos el contenido del archivo .js.
* Localizamos la etiqueta < / head > en nuestra plantilla y justo antes pegamos el contenido que hemos copiado de esta manera:
COMO EN EL ESCAPARATE
pero no se que acer por que no me funciona seria de mucha ayuda si me aguregaras al msn o si me puedes seguir ayudando por aka siempre estoy conectado enserio te lo agradeceria millones saludo muy cordial y gracias por ayudar a todos los bloggers que no sabemos mucho de esto
este es mi correo
P2P.corp@hotmail.com
Tambien te dejo mi plantilla para la veas en que estoy fallando esta en documento de texto
http://rapidshare.com/files/248245420/Plantilla_P2P.txt.html
Hola, no molestás, no te preocupes, todo bien. Es normal que lleve tiempo instalar es tipo de códigos, siempre hay algo que nos genera algún problema, pero así se aprende y además lo hace mas interesante.
Bajé tu plantilla, y tengo buenas noticias, lo pude instalar bien.
Primero, buscá este código:
<div id='content'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
lo que tenés que cambiar es lo que dice center, por left, eso hará que la imágenes queden centradas. También podés cambiar donde dice no, por yes, para que aparezca el elemento en la vista diseño.
Con eso ya estaría, después podés instalar el resto del código dentro de la plantilla o fuera en un servidor.
Para hacerlo dentro de la plantilla, como dice rosa en EL ESCAPARATE, el archivo .js va entre estos códigos:
<script type='text/javascript'>
//<![CDATA[
AQUÍ EL CÓDIGO
.......
//]]>
</script>
Y el CSS dentro de este código:
<style type='text/css'>
AQUÍ EL CÓDIGO
</style>
con eso debería funcionar bien.
Me olvidaba, te dejo como quedaría en la plantilla que me enviaste:
http://iggnatest2.blogspot.com/
cualquier cosa escribime y te envío una copia del código modificado.
Hola ignacio muchas gracias enserio maestraso mira me funciono pero lo que pasa es que no salen las flechitas asi como
http://iggnatest2.blogspot.com/
toda las imagenes todo sale pero las flechitas de los costados no salen no se por que la verdad ojala y me ayudes otra podrias mandarme una copia del codigo de la plantilla que te envie claro pero si no puedes explicarme como poner las flechitas que salen en los costados y en el cnetro sale una especie de flecha tambien
otra cosita sabes como puedo cambiar el borde como veras el borde es blanco abraia amnera de anbiar el borde por otro colo como el negro
y enserio muchas gracias por ayudar gente como tu valen oro saludos
http://p2pcorp-live.blogspot.com/
Hola ignacio mira encontre este template que me gusta bastante pero no se como descargarlo
http://www.frontpageslideshow.net/content/view/1/43/
ese es el que quisera ponerlo en mi web
saludos nuevamente
Hola, me alegro que haya funcionado, era cuestión de intentar.
Con respecto a las flechas, tenés que subir las imagenes que están justamente en la carpeta imagenes de las carpetas del script. Subilas a blogger o a algún servidor como Photobucket, y agregalas al código Style.CSS.
Fijate que no están indicadas en tu código:
#imgprev {left:0; background:url(images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat}
para cambiar el color del borde o el tamaño tambien lo hacés en el Style.CSS, buscá esta parte:
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
"border" te indica el tamaño del borde, si le pones 0, desaparece, o si no cambiale el color #ccc; por #000 para que sea blanco o por el color que mas te guste.
Ahora, con respecto a el Powerpoint Slideshow, es el que puse como comporación en el post. Creo que es el mejor, pero el problema es que es pago, fijate en la página que sale 22 euros.
El tynislideshow la alternativa gratis, obviamente no es igual, pero cumple la misma función.
bueno, espeor que con los cambios funciones bien, saludos!!
Hola Loiss, como te fue con los cambios?
Te cuento que yo hice algunos cambios al código y logré hacer algo mas parecido al Frontpage Slideshow, creo que es una buena alternativa gratis.
saludos
Hola ignacio pensaras que soy un mal agradecido XD pero che estube en mudansas en casa por eso recien me conecto a internet pero bueno con respecto a los cambios que as echo esta muy bueno quisera eso exactamente pero como aria ??
Mira te dejo mi correo electronico asi me aguregas atu correo y podemos conversar por ahi espero que me respondas un saludo enorme y me gustaria implementer esa nueva vercion en mi blog se parece bastante al Frontpage Slideshow,
me olvidaba este es mi correo electronico
P2P.corp@hotmail.com
quisera conversar contigo ya que mi blog
http://p2pcorporation.blogspot.com/
es muy visitado y ya que me as ayudado bastante me gustaria acerte propaganda asi tienes mas visitas por que ahi en mi blog me especialiso en las descargas directas y tambien hay bastante gente que pide como mejorar sus propios blogs por eso me gustaria promocionarte como web amiga bueno espero tu respuesta saludos
Posdata: este Frontpage Slideshow lo kiero poner ahi en mi blog oficial
Ignacio no podrias enviarme el codigo del DEMO BLOGGER por fa despues yo lo modifico amimodo saludos y disculpa por las molestias
no te lo envié por correo? te lo envío nuevamente
Hola amigo Ignacio, veras he estado intentado aplicar este interesante Script.pero me encontre con uno q otro invconveniente, al agregar en mi plantilla el codigo que indicas
link href='URL-ARCHIVO/style.css' rel='stylesheet'/
Pues todo el fondo de mi blog se cambia a color oscuro. Sin siquiera haber agregado aún el elemento de pagina. no c de pronto podrias echarme una mano. Te lo agradeceré
Olvide indicar que la dir de mi blog es este
http://tugeninformatico.blogspot.com
Soy nuevo en este tema, pero tengo las ganas de poder aprender, espero tengas tiempo para echarme una mano =)
Hola!!! Solo para contarte que logre hacer que funcionara sin problemas este Slide de Imagenes. Lo proble en mi plantilla Minyx 2.0 y basicamente seguí los pasos que indicas, pero al comienzo no me funcionaba, pq primero las imagenes ya no estan en el servidor asi que como tu mismo indicas, se deben cambiar por la direccion de las imagenes que nosotros querramos mostrar.
El codigo link href='URL-ARCHIVO/style.css' rel='stylesheet'
, lo coloqué justo despues o por debajo de las etiquetas TiTle, casi al principio de la plantilla. Y luego pues solamente agregué un Elemento de tipo HTML, Javascript y pegué el codigo que tambien nos facilitas, editando solo la direccion donde alojamos el archivo compressed.js. y obviamente las direcciones de las imagenes....Y listo!! quedó como lo ofreces. Recomiendo leer la charla entre Ignasio y P2PCorp en los Comentarios para asimilar algunos detalles de este Slide, pero si siguen los pasos que ya indiqué casi seguro que les funciona, almenos a mi me sirvió. Ahhh las flechas tambien tendran que realojarlas en sus servidor. Despues todo normal!!..Que tengan un buen día y espero esto les ayude en algo...Saludos!!!!!
Cofoweb y Digg somos la misma persona =D =D Saludos!!!
Hola DIGG/COFOWEB, me alegro que lo hayas solucionado. La razón por la cual el style.css cambia el color de la plantilla, es porque tienen incorporado los estilos para el body:
body {margin:0; background:#111; padding:5px; font:11px Verdana,Arial}
cambiando el color del background o eliminándolo solucionamos el problema.
También podemos, y tal vez es lo mas conveniente incorporar tanto el style.css y el compressed.js en la plantilla.
Bueno, espero que no haya problemas, cualquier cosa escribime, saludos!
hola Ignacio gracias por la aportacion, tengo una duda cuando instale el slaide a mi blog me aparecieron unas felchas (-->) en la parte superior de mi bloG en la esquina izquierda y no se como quitarlo, tu sabes porque aparecieron? o como quitarlo?
saludos
EDGAR
hola nose si me contestaran pero necesitaria saber donde subir los archivos Style.css y Compressed.js.
a que servidor los subiria?
gracias y ojala me respondan
Y como cambio el tamaño del Slide?
Hola aqui les muestro como crear un elegante slideshow para blogger con videotutorial
http://lawebdelaprendiz.blogspot.com/
Publicar un comentario
Muchas Gracias por tu comentario.