Marcador (Imagen) que se arrastra con Scriptaculous

En muchas ocasiones, especialmente en tutoriales muy largos, nos perdemos. Un marcador nos va a ser muy útil en este tipo de de post.

Puedes verlo en este blog Demo

Si quieres utilizar mis marcadores del ejemplo, haz clic en el gráfico para descargar el zip. Para alojar gratis imágenes y cualquier tipo de archivo Dropbox (Ver tutorial) con capacidad de mas de 2GB. En el tutorial está indicado paso a paso como hacerlo.

Códigos:

Para utilizar este efecto lo primero Ir a Diseño | Edición de HTML antes de </head> pega el siguiente código:

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

(Si ya lo tienes no es necesario pegarlo de nuevo)

Cuando quieras agregar un marcador en tu post, tienes que poner el código siguiente:

<img id=”marcador” style=”cursor:move; border:0px;” src=”URL del marcador“/>
<script type=”text/javascript”>new Draggable(‘marcador‘);</script>

Agrega la URL de tu gráfico donde está señalado en rojo.

Cada vez que agregues un gráfico tienes que cambiar la ID de la imagen por otro nombre (lo que está señalado en azul), es decir que ninguna imagen tenga la misma ID

Post relacionados:

1. Imagen navideña flotando en tu blog para Blogger y WordPress. Navidad 2009
2. Como redireccionar tu blog hacia otra plataforma
3. Opción para guardar en PDF (Blogger)
4. Agregar marcadores sociales en Blogspot
5. Otro efecto de nieve para Blogger al estilo WordPress