Menu Desplegable -Hecho Por Mi-

Hola!
Como estan?
Hoy les traigo un Nuevo Tutorial que hice yo misma!
PD: Yo la verdad noce si existe esta clase de menu pero fui jugando con los codigos y esto fue lo que obtuve. xD
Ok como veran al costado derecho del blog hay un botoncito que Dice Tutoriales, que si tu lo aprietas aparecen El listado de todos los Tutoriales.

Ok les mostrare como podran hacerlo ustedes Alli en el codigo dice tutoriales pero puedes poner lo que a ti te guste, solo puedes editarlo.

Comenzamos?

Coloca este Codigo en donde quieres que se encuentre tu Menu:

<center><div id="spoiler"><div><input value="TITULO" style="width:200px;font-size:12px;background-image: url(URL FONDITO DE LA CAJA);-moz-border-radius: 5px; border-radius: 5px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'hide spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'show spoiler!'; }" /><div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">

<img src="Url de tu imagen al costadito"/></a>
<a class="text" href="URL del enlace">Nombre del Tuto</a>
<br>
<img src="Url de tu imagen al costadito"/></a>
<a class="text" href="URL del enlace">Nombre del Tuto</a>
<br>
<img src="Url de tu imagen al costadito"/></a>
<a class="text" href="URL del enlace">Nombre del Tuto</a>
<br>
<img src="Url de tu imagen al costadito"/></a>
<a class="text" href="URL del enlace">Nombre del Tuto</a>

Ahora A Editar:

ROJO: El Titulo que llevara tu cajita.

NARANJA: El url de la imagen que sera el fondito de la Caja

AMARILLO: Sera la url de la imagen que estara al costado Izquierdo del titulo. (te recomiendo que sea pequeñita) para guiarte mejor, es la imagen que esta encerrada en el Circulito negro:

VERDE: Sera la Url del Tutorial o el enlace que quieras poner para que cuando hagas Click en El Titulo se valla directo alli.

CELESTITO: Allí dice nombre del Tuto pero también puedes poner el titulo de acuerdo a lo que quieras enlazar. 

Eso es Todo. Es muy Facil y queda super lindo y ademas no ocupa mucho espacio.

Espero que este tutorial te haya servido y me dejes un comentario de que te parecio.

Si tienes alguna duda o problema no olvides comentar que yo te respondere. 

Adios!