Como –para los que lo leyeron o le dieron una mirada- habrán notado en mi post anterior, “Shane Hines – Blues for Balalaika", usé un efecto muy interesante para mostrar y ocultar una traducción de una cita en inglés que podría parecer complejo a primera vista pero que en realidad es súper fácil de implementar en tu blog.

Script.aculo.us es el nombre de una biblioteca JavaScript que te permite usar una basta paleta de efectos en el blog, tanto para textos como imágenes o elementos en el sidebar.

La instalación.

Los scripts ya están hechos y si quieres implementarlos en tu blog, solo debes poner en la plantilla de HTML, antes de la etiqueta </head>, un código:

(yo uso esta forma pero en realidad existen otras formas)

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

Como verán, ahí solo estamos diciéndole al blog que cuando cargue, también cargue esos scripts que están alojados en AJAX Libraries API de Google, los cuales si quieren pueden descargar y alojarlos en su propio directorio (pero les recomiendo que usen la de Google no más). Además, después de la línea que dice “google.load("prototype", "1.6.1.0");”, le agregué unos códigos (hack hecho por Pizcos | vía Vagabundia) que soluciona un problema: y es que al parecer al cargar estos scripts de esta forma, los widgets de Google (como el Friend Connect), no funcionan, se quedan en blanco; pero ya con este hack, el problema queda solucionado.

A continuación veremos cómo, para crear los efectos, solo se necesitan de 3 cosas: el enlace, el elemento y el efecto.

Seguir leyendo »

|

Este es un tutorial de algo que hace poco hice en el blog y sé que solo por el título ya puede parecer complicado pero la verdad una vez que entiendas un poco de HTML y Javascript, entenderás bien cómo fue creado el código. Pero antes que nada, explicaré qué es lo que vamos a hacer.

El objetivo.

Este blog como ya sabrán cuenta de 4 autores, por eso a la derecha, en el sidebar, pueden ver los 4 avatares de cada autor agrupados en una sola imagen. Sin embargo, ahora quería que cuando le hagan click a cada uno de los avatares, a pesar de ser una sola imagen, te lleve a todos los posts únicamente de ese autor al que le dieron click (esta parte es fácil pues cada autor le pone una etiqueta a todas sus entradas con su nombre). Pero además de convertir una imagen sin link en una imagen con 4 links, lo que quería era que cuando pasaran el mouse sobre el avatar de alguno, se vea alguna animación para hacer más evidente que cada avatar es un link que te llevará a los posts del autor seleccionado.

Para lograr lo primero, vamos a hacer un “mapa de imagen” (mejor conocido como “image map”) y para lograr lo segundo, haremos uso de un simple (aunque para el caso y para mi nivel, algo complicado) efecto mouseover.

 

Seguir leyendo »

|