Blogger ultra super minimizado (última parte)

Vamos a un ejemplo concreto, para usar las plantillas ultra-minimizadas; voy a agregar un slideshow de leigeber.com llamado TinySlideshow que no quiero tener en mi blog y que sólo quiero usar una vez así que en ese blog auxiliar, crearé un post al que pondré de título TinySlideshow y lo publicaré, así, vacio, sólo para obtener la URL que será:

http://miblog.blogspot.com/2010/08/tinyslideshow.html

Descargo el ZIP , lo descomprimo y veo que tiene muchas cosas. En las carpetas photos y thumbnails hay unas imágenes que forman parte del demo y en la carpeta images, las imágenes que utiliza el script. Vuelvo a editar mi entrada y subo todas esas imágenes a Blogger o si no quiero eso, las alojo en cualquier otro servidor.

Miro el demo descargado y abro el archivo index.html con el block de notas; lo edito, cambiando las URL de esas imagenes por la mias y voy a copiar y pegar parte de su contenido en mi entrada.

<ul id="slideshow">
.......
</ul>

<div id="wrapper">
.......
</div>

Todo eso, lo haré tal cual está, incluyendo saltos de línea. Debajo, pondré la llamada al script pero, esta parte la deberé poner toda en una sola línea porque sino, no funcionará:

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

Llegado el caso, ese es el código que deberé editar si quiero hacer alguna modificación personal.

Publico la entrada y claro, si la veo, no pasará nada; ahora, vamos a nuestra plantilla especial y colocaremos el script directamente alli, junto con el CSS, condicionándolo adecuadamente.

Justo antes de </head> pondremos esto:

<b:if cond='data:blog.url == &quot;http://miblog.blogspot.com/2010/08/tinyslideshow.html&quot;'>
<style type='text/css'>
/* le agregaré esta definición para que los saltos de línea sean ignorados y evitar tener que escribir todo en una sóla línea */
br {display:none;}
.......
  /* aqui pegaremos el contenido del archivo style.css */
  /* donde deberemos cambiar las direcciones URL de las imágenes */
  /* left.gif, link.gif, right.gif, scroll-left.gif y scroll-right.gif */
</style>
<script type='text/javascript'>
//<![CDATA[
  ... aqui pegaremos el contenido del archivo script.js o del archivo compressed.js ...
//]]>
</script>
</b:if>

Y eso es todo. Ahora, si abro esa entrada, debería ver el slideshow funcionando pero claro, de poco me sirve si no puedo agregarlo a mi blog que es para lo que hice todo esto.

Lo hacemos de manera simple, usando una etiqueta IFRAME; sólo debemos conocer tres cosas, la URL (que es la de la entrada que acabamos de crear en el blog auxiliar), el ancho de la ventana que en este caso es el ancho del DIV #wrapper (506 pixeles) y el alto de la ventana que, vaya uno a saber cuál es así que ponemos algún valor y luego vamos ajustándolo a ojo:

<div align="center"><iframe style="width: 506px; height: 402px;" marginwidth="0" marginheight="0" allowtransparency="true" src="URL_entrada_tinyslideshow.html" align="middle" frameborder="0" scrolling="no"></iframe></div>