Lo que vamos a hacer será reducir el código del menú desplegable de manera que clicando en una imagen o texto mostrará los botones que a simple vista estarán ocultos lo que ahorrará espacio y dará un aspecto más despejado a la sidebar.
Comenzaremos situándonos en Plantilla/Edición HTML y justo después de <head> añadiremos lo siguiente:
Comenzaremos situándonos en Plantilla/Edición HTML y justo después de <head> añadiremos lo siguiente:
<!-- desplegable -->
<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>
<!--desplegable -->
Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:
<a href="javascript:void(0);" onclick="expandcollapse('Botones')"><img src="url-de-la-imagen"/></a>
<ul id="Botones" class="texthidden">
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
</ul>
Si deseamos añadir este efecto de mostrar-ocultar más de una vez en nuestro blog deberemos cambiar el nombre "id" para que no se repita. En el código yo le puse "botones" podéis añadir cualquier otro, da igual el que sea.
- Modificaremos las partes del código para añadir la url de la página y las imágenes.
- No hay límite para añadir enlaces o botones, bastará con repetir el código que contiene la url de la página y el-los enlaces.
- Cerraremos siempre el código del desplegable con la etiqueta </ul> de lo contrario se mostrará la parte oculta.
Para ocultar un texto en vez de un botón esta es la solución:
Añadimos el Script de la plantilla después de <head>
Luego editamos la entrada como de costumbre, escribimos la entrada hasta llegar al lugar que vamos a ocultar y añadimos lo siguiente:
<a href="javascript:void(0);" onclick="expandcollapse('cualquiercosa')">Ver ejemplo</a>
<ul id="cualquiercosa" class="texthidden">
Texto oculto-Texto oculto-Texto oculto
</ul>
Donde "cualquiercosa" es un nombre cualquiera que no deberemos repetir si agregamos este código más de una vez en nuestro blog. Podemos añadirlo cuantas veces deseamos pero con un nombre diferente.
Visto en Gem@ Blog
Visitas
3 comentarios:
Pensaba que esa idea había sido mía :O
Tienes toda la razón, lo comprobé, se me pasó citar tu fuente. Al César lo que es del César, sobre todo cuando eres uno de mis blogs de referencía y me ayudas muchísimo.
Te cito en mi lista de Buenos Enlaces, como puedes ver. Ya puse tu enlace en la entrada.
Un saludo.
No lo dije con ánimo de corregir Jesgo pero me extrañó bastante precisamente porque me reconocía completamente en esa entrada.