viernes, 16 de noviembre de 2007

Menú despegable personalizado gracias a gema blog

gema blog

Este menú despegable que traigo es muy vistoso para el blog, tiene una particularidad y es que podemos añadir nosotros mismos los botones de acuerdo a nuestros gustos o el color acorde con nuestro blog.
En El blog de Cesar he encontrado uno igual que a su vez lo hizo con Aire como referencia.
La imagen que ilustra esta entrada es solo para que veáis el diseño. En la sidebar encontraréis el menú, os invito a probar para que veáis el efecto al clicar en él.
Podemos aplicarlo en unos sencillos pasos:


Lo primero que haremos será situarnos en Plantilla/Edición HTML y justo después de <head> añadiremos lo siguiente:

<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

Después nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript y añadimos el código.
Os lo dejo tal y como lo tengo en mi sidebar omitiendo algunos enlaces para ahorraros el trabajo de eliminarlos.

<a href="javascript:void(0);" onclick="expandcollapse('Actualidad')">
<img border="0" src=" http://img183.imageshack.us/img183/6739/actualidadan5.gif"/>
</a><br/>

<ul id="Actualidad" class="texthidden">
<li><a href="http://www.20minutos.es/ " target="_blank"> 20 Minutos
</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Traductor')">
<img border="0"src="http://img186.imageshack.us/img186/4555/traductorhp5.gif"/>
</a><br/>

<ul id="Traductor" class="texthidden">
<li><a href="http://www.elmundo.es/traductor/" target="_blank"> El Mundo </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Enciclopedia')">
<img border="0" src="http://img186.imageshack.us/img186/9757/encicoplediabq3.gif"/>
</a><br/>

<ul id="Enciclopedia" class="texthidden">
<li><a href="http://es.wikipedia.org/wiki/Portada" target="_blank"> Wikipedia </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Alojamiento')">
<img border="0" src="http://img216.imageshack.us/img216/2209/imgenesalojamientojt7.gif"/>
</a><br/>

<ul id="Alojamiento" class="texthidden">
<li><a href="http://www.imageshack.us/" target="_blank"> Imageshack </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Plantillas')">
<img border="0" src="http://img263.imageshack.us/img263/820/plantillasqz7.gif "/>
</a><br/>

<ul id="Plantillas" class="texthidden">
<li><a href="http://plantillas-narko.blogspot.com/" target="_blank"> Narko-Team </a>
</li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Conversor')">
<img border="0" src="http://img340.imageshack.us/img340/3786/conversorzi5.gif"/>
</a><br/>

<ul id="Conversor" class="texthidden">
<li><a href="http://chuano.net/chuano/util/convsimbolos.php" target="_blank"> Conversor HTML </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Ayuda blog')">
<img border="0" src="http://img208.imageshack.us/img208/940/buttonoq4.gif"/>
</a><br/>

<ul id="Gem@BLOG" class="texthidden">
<li><a = _blank href="http://www.gemablog-.blogspot.com/">Gem@ BLOG </a></li></ul>

Vamos a conocer un poco el código.

Color rojo: El texto que habremos añadido al botón.
Color verde: Dirección Url de la imagen del botón.
Color naranja: Texto que aparece al desplegarse el botón.
Color azul: Dirección Url del enlace de la página enlazada.
(Lo que aparece en negro no lo modificaremos)

Es fácil crear unos botones, una página muy sencilla es http://www.buttonator.com/

Al igual que Cesar yo lo personalicé con una imagen chiquita que aparece en forma de flecha si os gusta podéis añadir una imagen añadiendo el código de imagen
<img src="aquí-la-url-de-tu-imagen"> justo antes del texto que aparece al desplegarse el botón (color naranja)
Y eso es todo, si tienes dudas házmelo saber

Publicado por en
Etiquetas:

1 comentario:

belén droguett sandoval dijo...

hoolaa hola
sabes-...necesito ayuda....
te explico. quiero hacer que mi blog tenga un menú, pero
me gustaría que hubiese una imagen y que yo pueda apretar distintas zonas de esa foto... y me lleven a una parte de mi blog. por ejemmplo una foto de una persona, le apreto la cabeza y me lleva a una seccion, los brazos a otra... y asi.


creo q debe ser dificil pero si puedes ayudarme o contaactarme con alguien q pueda ayudarme

pero ojala por msn... o mail. bdroguett@yahoo.es


MUCHAS GRACIAS!

29 de septiembre de 2008, 19:46

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)