6 abr. 2015

[Tutorial] Imagen con lista oculta en movimiento

Hiiii! Siento no haber publicado estos ultimos días... Bueno.. Primero! He creado una iniciativa en mi otro blog Sweet Love! Trata principalmente de hacer reseñas de otros blogs :3 Encontraréis mas información en el banner de la iniciativa que os dejo aquí abajo~
¿QUIERES QUE HAGA UNA RESEÑA DE TU BLOG?
Entonces únete a la inciativa~ >w<

↑↑↑ ¡CLICK AQUÍ! ↑↑↑

Bueno, hoy os traigo un nuevo tuto que uso MUUUCHISISISISMO! Este trata de una imagen que al darle click, aparece una lista debajo de ella (donde puedes poner texto, imágenes, o lo que prefieras XD)
Aquí una imagen de prueba y el link de un ejemplo en un blog de prueba!
Lo entendeis ya? Si no, probad de ponerlo y lo entendereis ^^

Bueno~ esto es muy sencillo de poner! Si no entendéis algo me lo comentáis ^^
¡Empezaremos yendo a Diseño > Añadir un Gadget > y añadimos el gadget: HTML/Javascrips.
Entonces se habría una ventanita y allí tendremos que poner este código:
<div class="divspoiler">
<img src="URL IMAGEN" height="121" width="209" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
<marquee direction="up" scrollamount="3" style="text-align: center; width:208px;height:100px;border:0px solid #FCC2F1;padding:3px" onmouseover="this.scrollAmount='2'" onmouseout="this.scrollAmount='6">
TEXTO
</marquee></div>
solo tienes que rellenar a vuestro gusto...
- URL imagen (Link de la imagen al que tienes que dar *click* para que aparezca la lista)
- TEXTO (Donde pondrás el texto, las imágenes, el html, lo que quieras que aparezca en la lista)
height="121" width="209" (Tamaño de alto y ancho de la imagen)
width:208px;height:100px (Tamaño de alto y ancho de la lista)
(Velocidad de la lista al SI tener el raton/cursor encima de la lista)
6 (Velocidad de la lista al NO tener el raton/cursor encima de la lista)

Y luego guardas :D Y listo! Fácil verdad? Si tenéis cualquier problema de dicen~
Este tuto no es completamente mío, solo lo he editado un poco. Lo guarde hace tiempo, así no pondré créditos porque no se de donde es.

Bye byeeee♥
post signature

4 comentarios:

  1. Muy Bonito c: el tuto x3
    Saludos n,n

    ResponderEliminar
  2. Tengo un problema:la lista está instalada, pero no se mueve. ¿Me podrías ayudar?

    ResponderEliminar
    Respuestas
    1. Claro! A ver, enviame el código que has puesto de este gadget.

      Eliminar