"Subir" y "Bajar" con efecto deslizante en las nuevas plantillas

Hace algún tiempo habíamos visto en una entrada anterior, como colocar unas flechas en el blog para ir a la parte superior del mismo y bajar a la parte inferior, con un suave efecto deslizante usando Scriptaculous.

En esta entrada veremos como hacer lo mismo en las plantillas del Nuevo Diseñador.


[1] Desde Edición HTML de nuestro panel de Blogger localizamos la etiqueta </head> en el código de nuestra plantilla y justo sobre ella pegamos esto:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/><script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->

Nota:

Recuerda que si ya estás usando este código (Scriptaculous) para cualquier otro efecto, no es necesario lo coloques de nuevo.
Y recuerda también que si estás usando JQuery en la plantilla, no podrás usar Scriptaculous al mismo tiempo.

[2] Prácticamente al final del código de nuestra plantilla localizamos la etiqueta </body> y sobre ella colocamos el código para las imágenes o flechitas de "ir arriba" e "ir abajo":

<!--Flecha ir abajo -->
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Ir abajo' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:40px; right:0;margin-bottom: 5px;'/></a>

<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir arriba' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:0; right:0;margin-top: 5px;'/></a>

[3] Cambiamos donde dice URL_DE_LA_IMAGEN_FLECHITA por la url de nuestras imágenes o iconos-flecha.

[4] Tendremos ahora que localizar en la plantilla esta línea de código:

<div class='body-fauxcolumns'>

Y la cambiamos por esta:

<div id='outer-wrapper' class='body-fauxcolumns'>

[5] Nos toca ahora localizar esta otra línea de código:

<div class='content-cap-bottom cap-bottom'>

Y cambiarla por esta otra:

<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>

[6] Guardamos los cambios.

"Ir arriba" e "Ir abajo" con efecto deslizante

Ya vimos en una entrada anterior como usar una flecha que nos permite ascender a la parte superior del blog usando Scriptaculous y además con un efecto deslizante añadido muy lindo.

En esta entrada veremos como añadir dos imágenes o flechitas juntas, una que nos permite ascender (Ir arriba) y otra que nos posibilita el descenso (Ir abajo).
Usaremos, al igual que en la anterior entrada, la librería Scriptaculous para darle el efecto deslizante.

[1] Desde Edición HTML de nuestro panel de Blogger localizamos la etiqueta </head> en el código de nuestra plantilla y justo sobre ella pegamos esto:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/><script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->

Este código solo lo añadimos si no estamos usando Prototype y Scriptaculous, si lo estamos usando para cualquier otro efecto no es necesario añadirlo de nuevo

[2] Prácticamente al final del código de nuestra plantilla localizamos la etiqueta </body> y sobre ella colocamos el código para las imágenes o flechitas de "ir arriba" e "ir abajo":

<!--Flecha ir abajo -->
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Ir abajo' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:40px; right:0;margin-bottom: 5px;'/></a>

<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir arriba' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:0; right:0;margin-top: 5px;'/></a>

[3] Cambiamos donde dice URL_DE_LA_IMAGEN_FLECHITA por la url de nuestras imágenes o iconos-flecha.

[4] Guardamos cambios.

El resultado sería algo parecido a esta imagen en la esquina inferior derecha de la pantalla en nuestro blog:

En Iconspedia podéis encontrar una fantástica colección de flechas muy apropiadas para usar con este efecto.

Mostrar el gadget de Seguidores usando Scriptaculous

Continúan llegándome consultas a diario sobre el problema de desaparición del gadget de Seguidores cuando estamos usando Prototype y Scriptaculous.
Si estáis usando por ejemplo el efecto para expandir y contraer gadget o el "Volver arriba" con efecto deslizante usando Scriptaculous, habréis notado que el gadget de Seguidores deja de mostrarse.

Veremos en esta entrada como solucionar la incompatibilidad que existe entre esta librería de scripts y el gadget Seguidores de Blogger.

localizamos antes que nada el código que tenemos colocado en la plantilla para usar Scriptaculous y que será algo como eso:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;, &quot;1.6.1.0&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.3&quot;);
</script>

En ese código añadimos el código necesario para evitar el problema con Seguidores (destacado en negrita):

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;, &quot;1.6.1.0&quot;);
window.JSON = {
parse: function (st) { return st.evalJSON(); },
stringify: function(obj) { return Object.toJSON(obj); }
};
google.load(&quot;scriptaculous&quot;, &quot;1.8.3&quot;);
</script>

Si estáis usando Scriptaculous con la llamada al script, tendréis que añadir el código justo a continuación:

<script src='URL_prototype.js' type='text/javascript'>
<script>
window.JSON = {
parse: function (st) { return st.evalJSON(); },
stringify: function(obj) { return Object.toJSON(obj); }
};
</script>

ENTRADA ORIGINAL:Vagabundia

Rotando imágenes con Scriptaculous

Siguiendo con la serie de entradas sobre como usar la librería de script Scriptaculous para añadir distintos efectos en nuestro blog, vamos a ver en esta ocasión como construir un slide de imágenes o banners que podremos colocar en un gadget e incluso en una entrada.


[1] Para empezar tenemos que incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la primera entrada sobre Scriptaculous, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso.

Si es la primera vez que vamos a usar un efecto mediante Scriptaculous, añadimos este código antes de la etiqueta </head> de nuestra plantilla (Edición HTML):

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Añadimos a continuación el código html para construir el slide y el script para conseguir el efecto, que incluiremos como ya dije antes, en un gadget html o en una entrada.

<div style="height: 200px; text-align: center; width: 100%;">
<div class="slide" id="slideshow1">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
<div class="slide" id="slideshow2" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
<div class="slide" id="slideshow3" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>

</div>

<script type="text/javascript">

start_slideshow(1, 3, 2000);

function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}

function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slideshow' + frame);
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
})
}
</script>

Notas y modificaciones:

Lo más apropiado para la correcta visualización del slide, es usar imágenes con la misma medida.

La primera línea del código es la que controla el <div> donde van incluidas las imágenes, y es ahí donde podemos controlar una serie de parámetros:

height: 200px; La altura del div. Sería apropiado colocar un poco más de lo que midan de alto las imágenes.

text-align: center; El contenedor de las imágenes estará centrado respecto al lugar donde se coloca, por tanto las imágenes del slide también.

width: 100%; Es el ancho del <div> que contiene el slide. En este caso he puesto 100% para que se adapte al espacio total de donde ha sido colocado. Puede variarse el porcentaje o colocar en pixeles un poco más de la medida de las imágenes.

En el ejemplo he usado 3 imágenes, pero podemos añadir más siempre antes del último </div> del código, repitiendo para cada una estas líneas de código:

<div class="slide" id="slideshow4" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>

Cada vez que añadamos una nueva imagen, tenemos que cambiar la id del código que la muestra, es decir, en el ejemplo la última imagen tiene como id "slideshow3", así que la nueva que añadamos a continuación tendrá que llamarse "slideshow4".
En el script que va debajo del código html, cambiaremos el 3 por el número de imágenes totales que mostraremos en el slide, lo haremos en esta línea:
start_slideshow(1, 3, 2000);

En el código no he añadido enlaces a las imágenes, pero pueden añadirse de la misma forma que hacemos habitualmente:

<a href="Url_del_enlace"><img src="Url_de_la_imagen"/></a>

Ejemplo:

¡Gracias por la paciencia Unperro!

Consejo:

Para aquellos que usáis JQuery en lugar de la librería Scriptaculous, en el blog BanakaBanaka encontraréis como hacer algo parecido en la entrada Imágenes rotantes con JQuery.

Expandir y contraer partes de un post con Scriptaculous

Antes ya vimos como expandir y contraer cualquier gadget usando el efecto "slide" de Scriptaculous.

En esta ocasión vamos a ver como usar el mismo efecto para expandir y contraer partes de las entradas.


[1] El primer paso es incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la entrada sobre Scriptaculous, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso.

Colocamos el código antes de </head>:

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Una vez hecho esto, ya podemos usar el efecto en cualquier entrada, para aplicarlo tenemos que añadir unas líneas de código en la parte de la entrada que vayamos a mantener oculta hasta que pinchemos sobre el texto que usemos como "enlace":

<a href='#' onclick='Effect.toggle("UNO","slide"); return false'>Texto enlace &#9660;</a><div id='UNO' style='display: none;'>

Aquí la parte oculta de la entrada

</div>

Notas:

Fijaros que en el código aparece dos veces la palabra "UNO", esa palabra es la id del <div> y tendrá que ser distinta cada vez que usemos el código para que el efecto funcione sin problemas.

Procuraremos incluir el código una vez editada la entrada desde la pestaña "Edición de HTML" del editor y publicar directamente desde ahí, sin volver a la pestaña "Redactar".

EJEMPLO (Texto enlace) ▼

Las mariposas ponen sus huevos en una planta. Nacen como larvas semejantes a gusanos, llamadas orugas y se alimentan de las hojas de esa planta o tallos tiernos a la vez que crecen rápidamente. Cada especie requiere una o unas pocas especies de plantas para su alimentación, y la extinción de una planta puede arrastrar la de una mariposa.

En un momento de su desarrollo, la oruga se protege en un lugar resguardado y allí se transforma en crisálida. En este estado no se alimenta, y sufre grandes cambios metabólicos y morfológicos, cuyo conjunto es llamado metamorfosis. La mariposa adulta sale rompiendo el esqueleto externo de la crisálida.

Expandir y contraer gadget con Scriptaculous

Después de haber visto con anterioridad como expandir y contraer cualquier gadget usando algo de javascript, vamos a ver ahora como hacer eso mismo usando Scriptaculous y Prototype lo que añadirá al gadget un efecto "deslizante" muy elegante.


[1] En primer lugar tenemos que incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la entrada al respecto, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso:

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Todos los gadget mantienen prácticamente la misma estructura en su código, con lo que no nos será muy difícil incluir el código necesario para conseguir el efecto.
En "Edición HTML" de nuestro panel, marcamos la casilla de "expandir las plantillas de artilugios" y localizamos el gadget que nos interesa por la línea de código que marca su comienzo y en la que podemos ver su título:

<b:widget id='HTML4' locked='false' title='Posts populares' type='HTML'>

[3] Una vez localizado el gadget, añadimos estas líneas de código que veis en negrita tomando como referencia el resto de código del gadget:

<b:widget id='HTML4' locked='false' title='Posts populares' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;POPULARES&quot;,&quot;slide&quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='POPULARES' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Notas:

Yo he usado el símbolo &#9660;, es decir el triangulo ▼ que veis a la derecha de los títulos en los gadget con el efecto añadido.
Podéis sustituir ese código por [+/-] por ejemplo, e incluso por un icono: <img src="url_del_icono"/>

He destacado en color naranja la palabra POPULARES esa palabra es un "identificador único" es decir, solo puede usarse en un gadget concreto, así que será distinto en cada gadget que incluya el código y ha de ser idéntico en los dos lugares del código donde va colocado.

Ejemplo con el código añadido al gadget de etiquetas:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;Etiquetas&quot;,&quot;slide&quot;); return false'><b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/>&#9660;</h2></b:if>
</a>
<div align='left' id='Etiquetas' style='display: none;'>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=30&quot;'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>
</b:includable>
</b:widget>

"Volver arriba" con efecto deslizante usando Scriptaculous

Se trata de colocar una flechita o icono que nos posibilite el volver a la parte superior del blog.
Ya vimos antes como colocar el "volver arriba" en cada entrada y lo que conseguiremos ahora, es esto mismo pero con un efecto deslizante muy elegante.
Podéis comprobar como funciona una vez aplicado, si pincháis en cualquiera de las flechitas que veis a la derecha en el post-footer (pie de entradas) de mi blog.

"Volver arriba" desde el pie de cada entrada (post-footer).

[1] Si no tenemos Scriptaculous aplicado en la plantilla, lo haremos ahora colocando el código necesario antes de </head> (acordaros que si ya lo estamos usando en algún efecto, no es necesario volver a incluirlo):

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

[2] Expandimos las plantillas de artilugios y localizamos más o menos esta línea (es donde yo lo he colocado en mi blog):

<p class='post-footer-line post-footer-line-1'>

En algunas plantillas podría mostrarse de esta manera:

<div class='post-footer-line post-footer-line-1'>

[3] Debajo de esa línea colocamos el código para la flechita:

<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img align='right' alt='Volver arriba' src='URL_DEL_ICONO_FLECHA' title='Volver arriba'/></a>

"Volver Arriba" desde la parte inferior derecha de la página

[1] Usaremos el mismo sistema que para incluir la flecha o el icono al pie de cada entrada, es decir, incluimos el código del paso [1] si no lo tenemos incluido de usos anteriores.

[2] Desde Edición HTML bajamos casi hasta el final del código de la plantilla y pegamos este código antes de </body>:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir Arriba' border='0' src='URL_DE_LA_FLECHA_ICONO' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>

Efecto deslizante (slide) para entradas expandibles

Usando este efecto las entradas se abren y se cierran con un efecto deslizante muy agradable y que además es muy sencillo de incorporar a los títulos de las entradas expandibles, tanto si estamos usándolas en la página principal, como en las páginas de etiquetas.


[1] Para aplicar el efecto deslizante, necesitamos usar las librerías (Prototype y Scriptaculous) de las que hablamos en una entrada anterior.

[2] Estas librerías las incluimos en la plantilla con un script de Google API y tendremos que añadirlo justo antes de </head>:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

[3] Localizamos ahora con los artilugios expandidos, esta línea que forma parte del código que habíamos añadido para nuestras entradas expandibles:

<a expr:onclick='&quot;javascript:toggleIt(&quot;&quot; + data:post.id + &quot;&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>

[4] La sustituimos por esta otra línea y guardamos los cambios:

<a expr:onclick='&quot;Effect.toggle(\&quot;&quot; + data:post.id + &quot;\&quot;,\&quot;slide\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>

Podéis comprobar el resultado pinchando en el [+/-] que acompaña al título de mis entradas expandibles en las páginas de etiquetas.

Librerías JavaScript : script.aculo.us, y prototype,

Unas de las librerias de Javascript más conocidas son Prototipe y Scriptculous, que pueden usarse en Blogger para conseguir algunos efectos muy funcionales en distintas partes del blog.

Lo mejor de estas librerías es que no es necesario colocar la "llamada" a sus funciones cada vez que vayamos a usar algún efecto que las necesite.

Tendremos que cargarlas solo una vez en nuestra plantilla colocando antes de </head> el código API de Google:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>
<!-- Prototype y Scriptaculous-->

Este código hará que se carguen todos los códigos que necesitamos para los distintos efectos, como por ejemplo el Effect.toggle que es el que uso en el Escaparate para el "mostrar/ocultar" en el título de las entradas expandibles y que nos posibilita el mostrar y ocultar elementos de forma animada.

Tendremos que revisar de vez en cuando, si las versiones son actualizadas en Google Apis ya que aunque los efectos que estemos usando funcionaran igualmente, lo mejor es mantenerse actualizado.

En próximas entradas veremos algunos de los efectos que podemos conseguir con el uso de estas librerías, como el "ir arriba" con efecto slide o el mostrar y ocultar para los gadgets de la sidebar.

Sidebar "colorida" con Scriptaculous

Se trata de que cada gadget de la sidebar se vea con distinto diseño, de forma alterna.
Si queremos por ejemplo que los gadget se diferencien por su color, el resultado sería algo como el de la imagen de ejmplo.

Si tenéis en vuestro blog más de una sidebar, el efecto se muestra en todas por igual.


[1] Vamos en nuestro panel a Edición HTML y colocamos justo antes de ]]></b:skin> estas líneas de CSS:

.even {
background-color: #EEEEEE;
}
.odd {
background-color: #AAAAAA;
}

[2] Si no tenemos Scriptaculous aplicado en la plantilla, lo haremos ahora colocando el código necesario antes de </head> (acordaros que si ya lo estamos usando en la plantilla para algún otro efecto, no es necesario volver a incluirlo):

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

[3] Debajo del script de Scriptaculous que acabamos de incluir, colocamos esto:

<script src='http://bloggerhacked.googlepages.com/evenodd.js' type='text/javascript'></script>

Este script está subido a Google Pages así que, como siempre os aconsejo, lo mejor es que después de descargar el script cada uno lo use desde su propio alojamiento.
También puede usarse directamente en la plantilla colocandolo en lugar de la línea de código anterior.


Por supuesto que no solo podemos hacer que los gadget se distingan por su color, añadiendo algunos parámetros más en el CSS podríamos mostrar unos con borde,otros con imagen de fondo, etc.:

Incluso podemos hacer que todos presenten sus bordes redondeados (en IExplorer el borde se verá "normal"):

.even {
background: #EEEEEE url(url_de_la_imagen_de_fondo);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}
.odd {
background-color: #AAAAAA;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}

Visto en: Blogger Hacked