Tutorial HTML: Esquina Despegable.

Buenas.

Como ya algunos habréis notado he puesto en mi blog una esquina desplegable pequeña con un pequeño movimiento en flash y un reflejo en el roll para atraer a la gente, unos pequeños códigos que sirven para que cuando pones el ratón encima se abre como un libro abierto y si pinchas una vez abierta se te redireccione a donde tu quieras.

Hoy os voy a explicar como poner una en vuestro Blog, en este caso Blogger.

Primero abrimos el Bloc de Notas. Un programa que tienen por defecto todos los Windows. Una vez abierto pegamos este code.

Pues cambiamos el “http://www.ideasrebeldes.tk” por la URL de vuestra web.

Ahora viene el tema de las imágenes, si queréis podéis utilizar estas para guiaros:

http://i25.tinypic.com/334125i.jpg
http://i31.tinypic.com/awz5t5.jpg

(La mas pequeña es la que se ve cuando esta cerrada y la mas grande cuando esta abierto).

Ahora las subimos a Tinypic , en mi opinión es mucho mejor que Image Shack y otros servidores.

Una vez diseñadas y subida la primera copiamos el URL de la última de las cuatro barras de Tinypic donde pone URL. Entonces nos vamos a la cuarta línea donde pone un enlace de TinyPic, sustituimos el actual enlace de Tinypic por nuestra nueva URL de Imagen, hacemos lo mismo con la segunda línea del segundo párrafo.

Ahora tenemos que guardar el archivo como “pegatina.js”, es importante, no lo guardes como “.txt”, debes guardarlo en “.js”.

Después vamos a esta web y lo subimos: http://pmsc.free.fr/J01/upload.php

Cuando acabemos nos darán una URL pero no la debemos copiar todavía, debemos dejar esa página minimizada.

Vamos a nuestro panel de Blogger > Diseño > Elementos de Página y añadimos donde queramos un Gadget de “HTML Javascript”. Una vez ahí pegamos este code y sustituimos el texto en mayúsculas por la URL que nos han dado antes en la página de subida de archivos .js (la que supuestamente está minimizada).

Una vez hecho guardamos cambios y nos vamos a visualizar nuestro blog para ver si ha salido bien.

El tutorial es facil, sólo requiere un poco de concentración.

PD: Este tutorial esta pensado para Blogger pero se puede utilizar con un poco de habilidad en Foroactivo, El Galeón y Miarroba.

Si tienen alguna duda escriban un comentario en esta misma entrada o envien un email a ideasrebeldes@gmail.com .

Salud!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: