"Este menú desplegable 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.
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('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="Ayuda 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)
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)
fonte e créditos:
traduzido:
Menu dropdown personalizado
Este menu drop-down que eu trago é muito colorido para o blog, tem uma peculiaridade é que nós podemos adicionar os nossos próprios botões de acordo com nosso gosto ou cor em linha com nosso blog.Em Blog de Cesar Eu encontrei uma vez como fez com Ar referência.
A imagem que ilustra este post é para você ver o projeto. Na barra lateral você vai encontrar o menu, eu convido você para testar o efeito que você vê quando se clica sobre ele.
Podemos aplicá-lo em alguns passos simples:
. <style type="text/css"> texthidden {display: inline}. Mostrado {display: block}. </ style> <script type="text/javascript"> document.write ('<style> texthidden {display : none} <script >');</ / style> <script ExpandCollapse função type="text/javascript"> (postid) {whichpost = document.getElementById (postid); if (whichpost.className == "Mostrado") {whichpost.className = "texthidden"} else {whichpost.className = "script ";}}</ Mostrado>Então estamos em Template / Adicionar um elemento de página / HTML / Javascript e adicione o código.
Eu deixá-lo como eu o tenho na minha barra lateral omitindo alguns links para lhe poupar o trabalho de removê-los.
<A href = "javascript: void (0);" onclick = "ExpandCollapse ('Presente')">
<Fronteira Img = "0" src = " http://img183.imageshack.us/img183/6739/actualidadan5.gif"/>
</ A> <br/>
<Ul id = "Presente"Class =" texthidden ">
<li> <a href = "http://www.20minutos.es/ "Target =" _blank "> 20 Minutos
</ A> </ li> </ ul>
<A href = "javascript: void (0);" onclick = "ExpandCollapse ('Tradutor')">
<Fronteira Img = "0" src = "http://img186.imageshack.us/img186/4555/traductorhp5.gif "/>
</ A> <br/>
<Ul id = "Tradutor"Class =" texthidden ">
<li> <a href = "http://www.elmundo.es/traductor/"Target =" _blank "> Mundo </ A> </ li> </ ul>
<A href = "javascript: void (0);" onclick = "ExpandCollapse ('Enciclopédia')">
<Fronteira Img = "0" src = "http://img186.imageshack.us/img186/9757/encicoplediabq3.gif"/>
</ A> <br/>
<Ul id = "Enciclopédia"Class =" texthidden ">
<li> <a href = "http://es.wikipedia.org/wiki/Portada"Target =" _blank "> Wikipedia </ A> </ li> </ ul>
<A href = "javascript: void (0);" onclick = "ExpandCollapse ('Conversor')">
<Fronteira Img = "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 ('Ajuda Blog')">
<Fronteira Img = "0" src = "http://img208.imageshack.us/img208/940/buttonoq4.gif"/>
</ A> <br/>
<Ul id = "Ajuda Blog"Class =" texthidden ">
<li> <a href = = _blank "http://www.gemablog-.blogspot.com/">Gem @ BLOG </ A> </ li> </ ul>
Deixe-nos saber um pouco de código.
Vermelho: O texto a ser adicionado ao botão.
Green: A URL do botão de imagem.
Laranja: Texto que aparece ao exibir o botão.
Blue: Link URL na página vinculada.
(O que aparece em preto não modifique)
Blue: Link URL na página vinculada.
(O que aparece em preto não modifique)
É fácil de criar alguns botões, uma página é muito simples http://www.buttonator.com/
Como Final Eu personalizar com uma imagem de menina que aparece em uma seta, se quiser você pode adicionar uma imagem, adicionando a imagem do código
<img src="aquí-la-url-de-tu-imagen"> pouco antes de o texto que aparece quando o botão de implantação (Laranja)
