martes, 17 de septiembre de 2013

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! 

No hay comentarios:

Publicar un comentario

Genial! Vas a dejarme un comentario?
Recuerda...
-No ulsultos
-No spam
-Puedes hacer pedidos amablemente.
-Si ves algo tuyo avisamelo de buena forma.
Eso es todo >w< gracias por dejarme un comentario, me hacen la personita mas feliz de la tierra❤
Caritas:
(。◕‿◕。)(◕_◕)(◕‿◕)\(◕ ◡ ◕\)Σ ◕ ◡ ◕(◕︵◕)(´◕ฺω◕ฺ`)(◕ฺ∀◕ฺ)✿◕‿◕✿ ❀◕‿◕❀ ❁◕‿◕❁✾◕‿◕✾ (°∀°)(• ε •)(●´ω`●)
Ծ_Ծஇ_இอ_อ อ้_อ้ ๏_๏๏̯͡๏ •▱• ↁ_ↁ ⇎_⇎≧ヮ≦ ⊙ω⊙ ⊙▂⊙ ⊙△⊙ ⊙︿⊙ ʘ‿ʘ ⊙﹏⊙ ⊙0⊙╰☆╮□_□ ◉_◉ ◉△◉ ○_○ ◔_◔ ◔ᴗ◔ ◕◡◕◪_◪ ◮_◮☆¸☆☻_☻♥◡♥句_句(゜Д゜)☜(⌒▽⌒)☞ (☞゚ヮ゚)☞ ☜(゚ヮ゚☜)^ㅂ^ ヽ(o`皿′o)ノ (≧ロ≦) (ΘεΘ;)

martes, 17 de septiembre de 2013

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! 

No hay comentarios:

Genial! Vas a dejarme un comentario?
Recuerda...
-No ulsultos
-No spam
-Puedes hacer pedidos amablemente.
-Si ves algo tuyo avisamelo de buena forma.
Eso es todo >w< gracias por dejarme un comentario, me hacen la personita mas feliz de la tierra❤
Caritas:
(。◕‿◕。)(◕_◕)(◕‿◕)\(◕ ◡ ◕\)Σ ◕ ◡ ◕(◕︵◕)(´◕ฺω◕ฺ`)(◕ฺ∀◕ฺ)✿◕‿◕✿ ❀◕‿◕❀ ❁◕‿◕❁✾◕‿◕✾ (°∀°)(• ε •)(●´ω`●)
Ծ_Ծஇ_இอ_อ อ้_อ้ ๏_๏๏̯͡๏ •▱• ↁ_ↁ ⇎_⇎≧ヮ≦ ⊙ω⊙ ⊙▂⊙ ⊙△⊙ ⊙︿⊙ ʘ‿ʘ ⊙﹏⊙ ⊙0⊙╰☆╮□_□ ◉_◉ ◉△◉ ○_○ ◔_◔ ◔ᴗ◔ ◕◡◕◪_◪ ◮_◮☆¸☆☻_☻♥◡♥句_句(゜Д゜)☜(⌒▽⌒)☞ (☞゚ヮ゚)☞ ☜(゚ヮ゚☜)^ㅂ^ ヽ(o`皿′o)ノ (≧ロ≦) (ΘεΘ;)