16 de junio de 2009

Como Instalar Tiny Slideshow en blogger


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&quot; 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.


Visto en: leigeber.com


Mirá: Cómo diferenciar la primer entrada en blogger


25 comentarios:

Anónimo dijo...

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

Ignacio dijo...

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.

P2Pcorp dijo...

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

Ignacio dijo...

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

Ignacio dijo...

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/

Anónimo dijo...

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

Ignacio dijo...

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.

Ignacio dijo...

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.

Anónimo dijo...

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/

P2Pcorp dijo...

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

Ignacio dijo...

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!!

Ignacio dijo...

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

Anónimo dijo...

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,

Anónimo dijo...

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

Anónimo dijo...

Ignacio no podrias enviarme el codigo del DEMO BLOGGER por fa despues yo lo modifico amimodo saludos y disculpa por las molestias

Ignacio dijo...

no te lo envié por correo? te lo envío nuevamente

BGMax dijo...

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é

BGMax dijo...

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 =)

COFOWEB dijo...

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 dijo...

Cofoweb y Digg somos la misma persona =D =D Saludos!!!

Ignacio dijo...

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!

VTR Autos corp. dijo...

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

Macarena dijo...

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

Hugo Sánchez dijo...

Y como cambio el tamaño del Slide?

Anónimo dijo...

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.