...en cualquier parte de la página | Oloblogger Viene de Elementos que aparecen ... El enlace y el elemento a mostrar/esconder, pueden estar en la misma entrada o en distintas, uno en un...

18 de febrero de 2008

...en cualquier parte de la página

Viene de Elementos que aparecen...

El enlace y el elemento a mostrar/esconder, pueden estar en la misma entrada o en distintas, uno en una entrada y el otro en la barra lateral, etc.... el caso es que siempre que ambos estén en la misma página y tengan el mismo id, el sistema funcionará. La id tiene que ser única para cada par enlace-elemento, de lo contrario el sistema no lo interpreta bien.

Ojo con el tema de poner enlace-elemento en distintas entradas, porque según se desplacen hacia abajo en función de su fecha, pueden quedar en páginas separadas, tal y como va a pasar con esta entrada y su complementaria.

También, cuando se acceda a una de las entradas directamente, la otra no estará en la misma página y el efecto no será visible. Las combinaciones óptimas son entrada con barra lateral (o cabecera, o pie...) , los dos elementos dentro de la misma entrada o los dos en la barra lateral.

Si os ha gustado este truco, lo primero que hay que hacer es instalar este script en vuestra plantilla, justo antes del </head>

<style type='text/css'>
.ver_menu { display:block; }
.ocultar_menu { display:none; }
</style>
<script type='text/JavaScript'>
function desplegar(categoria){
var menu = document.getElementById(categoria);
if(menu.className == &quot;ver_menu&quot;){
menu.className = &quot;ocultar_menu&quot;;
}
else{ menu.className = &quot;ver_menu&quot;; } }
</script>

Una vez instalado lo podeis usar todas las veces que querais, simplemente añadiendo el siguiente código en el sitio donde deba aparecer el enlace.

<script type='text/JavaScript'></script>
<div class="identificativounico"><a href="javascript:desplegar('identificativounico');">ENLACE DE TEXTO O IMAGEN</a></div>

y este otro en la parte donde deba aparecer el elemento oculto
<div class='ocultar_menu' id="identificativounico">AQUI EL ELEMENTO QUE SE MOSTRARA</div>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

30 comentarios :

  1. Anónimo19/2/08 2:19

    Hola ps te agradesco mucho por ayudarme si me sirvio mucho es algo parecido lo que te pedi y es que ya lo habia hecho pero con onovermause lo que pasa es que con la falta de practica se me olvido y esto que me dices esta super bien!!
    Atte:
    engell1002000@hotmail.com

    ResponderEliminar
  2. Anónimo19/2/08 2:37

    Hola soy otra vez engell ps no se me desplega la imagen que yo quiero no se si lo este haciendo mal pero lo hago como tu me digiste y no pasa nada!
    Bueno lo intentare mas haber que pasa! pero necesito que me ayudes
    gracias de antemano.
    engell1002000@hotmail.com

    ResponderEliminar
  3. Hola buenas
    mira tengo un pequeño problema, no puedo poner las imagenes y no se muy bien como es
    agradeceria mucho tu ayuda
    gracias por adelantado
    ari_elcrack12@hotmail.com

    ResponderEliminar
  4. No sé a que te refieres:¿A poner una imagen en una entrada?
    ¿a colocar una imagen para que sirva de botón "desplegador" para lo explicado en esta entrada?
    ¿a poner una imagen, en general, mediante html?

    ResponderEliminar
  5. ola otra vez, mira yo me refería a poner la imagen para que sirva como boton desplegador, lo he intentado varias veces pero no he podido hacerlo.
    Espero tu respuesta
    gracias
    ari_elcrack12@hotmail.com

    ResponderEliminar
  6. HTML básico Ary.

    En el primer trozo de código que se ve, donde pone "ENLACE DE TEXTO O IMAGEN", si pones un texto, será ese texto el que sirva de enlace. Si en lugar de texto quieres poner una imagen para el enlace, tienes que poner
    <img src="http://direcciondelaimagen..."/>
    sustituyendo la parte que hay entre comillas por la dirección donde esté alojada tu imagen.

    ResponderEliminar
  7. muchas gracias oloman.

    pta: esta muy bien la entrada.
    xd

    ResponderEliminar
  8. no puedo cvr el script oculto, me lleva a una pagina blogger inicio, puedes arreglar esto???
    necesito mucho usar esta tecnica.

    ResponderEliminar
  9. Ya me gustaría Leo, pero el script de ocultar/desplegar está fallando últimamente y me está haciendo la puñeta.

    El problema es que es un fallo intermitente, por lo que no puedo encontrar el motivo. Unas veces funciona y otras no.

    De momento sólo te puedo decir que pruebes de cuando en cuando.

    ResponderEliminar
  10. Hola Oloman, e estado probando este script pero tengo una duda. La parte donde pone identificador unico se ha de poner alguna cosa en especifico?
    Porque no soi capaz de hacerlo funcionar tal y como biene escrito añadiendo un texto plano simple :S

    ResponderEliminar
  11. La expresión IDENTIFICATIVOUNICO, quiere decir que en su lugar hay que poner un número, una palabra, mezcla de números y letras o, lo que sea, pero siempre que sea único en la plantilla.

    Para cada elemento desplegable, los tres IDENTIFICATIVOUNICO que pertenecen al mismo código, tienen que ser iguales (idénticos). Sin embargo, distintos elementos tienen que tener distintos IDENTIFICATIVO.

    Si hay dos elementos con el mismo ID, el artilugio no funciona bien.

    ResponderEliminar
  12. Una pregunta más. Como has echo para que cuando haces click en Ver/Ocultar código del SCRIPT, el código que se muestra no aparezca de golpe, sino como si se abriera una ventana o persiana?

    Esta bastante chulo. ^^ Gracias

    ResponderEliminar
  13. Eso es motivo de otro post cheppervoid.

    Se trata de un script distinto. Echa un vistazo en Desplegar partes del blog

    ResponderEliminar
  14. Hey muy bueno y muy util..
    mucheas gracias por todos los consejos y todos los trucos

    ResponderEliminar
  15. Hola Oloman. Buscando por google acabé aquí.
    Lo que me gustaría es poner en la sidebar unas imagenes, pero como son muchas quisiera poner algo así como "Ver más", y que cuando la gente haga clic ahí se vean todas las imágenes. He probado con estos códigos, pero no acabo de conseguirlo. En la entrada dices que lo ideal sería poner el "Ver más" en una entrada y lo oculto en la sidebar, ¿es que solo se puede utilizar de esa forma? ¿O también sirve para lo que yo necesito? Perdón por mi ignorancia, pero soy bastante nueva en esto.

    http://martinrivass.blogspot.com

    ResponderEliminar
  16. Perdón, con los dos elementos en la sidebar también funciona bien y es precisamente lo que te vendría bien a tí. Se quedaría algo parecido a lo que ahora pasa con la sección Ciber Café en este blog, pero sin el efecto relentizado.

    ResponderEliminar
  17. Muchas gracias, ahora lo podré tener todo mucho más ordenado ^^ Y es que merece la pena insistir, porque al principio no lo conseguía... Te pondré en mis enlaces ;)

    ResponderEliminar
  18. No manches te la rifaste men, eres la pura ley

    ResponderEliminar
  19. Espero que eso que dices sea bueno, Lagarto, porque no entiendo ni papa. ;)

    ResponderEliminar
  20. Hola, tengo un blog en blogger y estoy buscando un codigo que al abrir una pagina me la cargue automaticamente en un punto intermedio(a ser posible donde yo quiera), es decir, no quiero que la cargue al principio(en el encabezamiento) sino a mitad de pagina o en un punto donde me interese.

    Muchas gracias y un saludo

    Luis

    ResponderEliminar
  21. Hola Oloman.
    Tenía este recurso en favoritos esperando el día de necesitarlo y ha llegado el día.
    Después de leer un par de veces la entrada y los comentarios, no me ha quedado del todo claro si se puede, o como se puede, enlazar un texto a una imagen que aparezca encima, a su lado o al final del párrafo en una entrada.
    Espero haberme explicado con claridad y que tenga una solución para torpes de verdad.
    Un saludo.

    ResponderEliminar
  22. Se puede Tapestryworkerman. Tú coloca el primer código en tu plantilla y la guardas. Luego sitúa el enlace que se comenta en segundo lugar dónde lo necesites y por último, el tercer trozo de código dónde quieres que aparezca el elemento oculto. Elemento es cualquier cosa: texto, imagen, vídeo...

    Los dos últimos tienen que estar en la misma entrada para al cargar la página, el interprete lean ambos. El primero, al estar en la plantilla, siempre se carga.

    ResponderEliminar
  23. Estupendo!.
    En breves lo intento y te comento.
    Como siempre, gracias.
    Un saludo.

    ResponderEliminar
  24. Hola Oloman.
    Prueba casi superada. Todo ha salido a pedir de boca, lo único que el enlace me ha hecho un salto de línea y me gustaría que fuera todo seguido, si te pasas y echas un vistazo te darás cuenta de lo que digo y me cuentas si tiene arreglo.
    Un saludo.

    ResponderEliminar
  25. Ups! se me olvidaba:
    ¿Se puede centrar o poner en cualquier posición (por ejemplo) la imagen a mostrar?.
    Con esto creo que acabo, pero no te fíes...
    Un saludo.

    ResponderEliminar
  26. Algo retrasado, pero ahí va la respuesta Tapestryworkerman.

    Prueba a quitar entero el <div class="rafa"> y su correspondiente cierre </div>.

    Como no recuerdo si eso funciona, en caso negativo, simplemente cambia en ese mismo trozo, el DIV por un SPAN, sin olvidar cambiar también el cierre.

    Con respecto a la imagen o el contenido que sea que ocultes, dentro del DIV oculto puedes meter lo que quieras. Por tanto, esa imagen la puedes meter a su vez dentro de otro DIV que incluya una etiqueta STYLE y un MARGIN:0PX AUTO; para centrarla. Si te da problemas, en ese mismo STYLE, añade un WIDTH con el ancho exacto de la imagen.

    ResponderEliminar
  27. Y nunca suelo decir nada en cuanto al diseño de cada cual, pero en este caso haré una excepción: ¡con ese fondo no hay quién lea el texto! A mí al menos me resultó dificílisimo encontrar a Rafa ;)

    Añande un fondo plano a los posts o sustituye el general... por favor :(

    ResponderEliminar
  28. Gracias Oloman.
    Primero por la resolución que intentaré implantar en algún rato aunque tenga que estudiar, el chino y el html son primos hermanos para mí :)
    Y en segundo lugar por tu consejo visual, pero no entiendo que tengas dificultad para leer la letra blanca sobre el fondo oscuro, a no ser de que sólo cargara la foto de fondo, en cuanto a los enlaces son verde fosforito, que también cantan lo suyo sobre la plantilla Travel. De todos modos échale otro vistazo a ver si es que sólo lo veo bien yo... pero desde ordenadores ajenos también lo visualizo como en casa.
    Muchas gracias por tu interés y ya me dirás si el problema persiste.
    Un saludo Oloman.

    ResponderEliminar
  29. Exacto, Tapestryworkerman. La última vez que entré no me cargó el fondo oscuro y todo se veía sobre la imagen del astronauta, así que no se distinguía una m... :)

    Sobre el chino, sólo tienes que hacer los cambios que te dije. NO hay que estudiar nada, sólo seguir las instrucciones ;)

    ResponderEliminar