Mostrar y ocultar
Este es un efecto que queda muy bien para una lista, lista de links, parte del texto de un post o cualquier cosa que queramos tener "recogida".
En mi blog de pruebas lo he puesto en la sidebar con una lista de links, incluso pueden añadirse imágenes de enlace, o una imagen pequeñita como una flechita o algo así antes de cada link.
Lo he probado en una entrada completa ocultándola y funcionó, y también lo he probado ocultando parte de una entrada y resulta muy bien.
He usado el sistema para ocultar un trozo de texto acompañado de una imagen y tampoco me ha dado problemas.
Recomendado por nuestra amiga Rosa
[1-] Colocaremos este sencillo código en la parte del CSS de nuestra plantilla, por ejemplo antes de
0
+/- Ejemplo
En mi blog de pruebas lo he puesto en la sidebar con una lista de links, incluso pueden añadirse imágenes de enlace, o una imagen pequeñita como una flechita o algo así antes de cada link.
Lo he probado en una entrada completa ocultándola y funcionó, y también lo he probado ocultando parte de una entrada y resulta muy bien.
He usado el sistema para ocultar un trozo de texto acompañado de una imagen y tampoco me ha dado problemas.
Recomendado por nuestra amiga Rosa
[1-] Colocaremos este sencillo código en la parte del CSS de nuestra plantilla, por ejemplo antes de
]]></b:skin>:
0
.commenthidden {display:none}
.commentshown {display:inline}
[2-] Colocamos ahora este pequeño script justo antes del
</head>
de nuestra plantilla.
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
}
</script>
[3-] Donde queramos mostrar el efecto (un nuevo elemento, una entrada,etc.) hemos de colocar este código:
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">+/- Título</a>
<div class="commenthidden" id="UniqueName">
</div>
Lo que vas a mostrar/ocultar lo colocas justo antes del último del código.
Si vas a mostrarlo en la sidebar con una lista de links, por ejemplo, el código a poner sería más o menos así:
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">+/- Ejemplo </a><div class="commenthidden" id="UniqueName">
<a href="http://www.dibuoc.tk/" target="_blank">Mundo Perú</a></div>
El resultado se verá así:
+/- Ejemplo
¡Importante!
Donde dice "UniqueName" dentro del último código (hay dos) lo sustituimos por una palabra cualquiera (a los dos, no se mostrará en la plantilla) que no se esté usando en otro código de nuestra plantilla.
Si vas a colocar más de un elemento con este efecto, recuerda que no puedes usar la misma palabra.
Yo en mis pruebas para usar el efecto más de una vez, decidí dejar el "UniqueName" y al segundo elemento le añadí un 1 detrás "UniqueName1", al tercero un 2 "UniqueName2"... y sin problemas.