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 == "ver_menu"){
menu.className = "ocultar_menu";
}
else{ menu.className = "ver_menu"; } }
</script>
.ver_menu { display:block; }
.ocultar_menu { display:none; }
</style>
<script type='text/JavaScript'>
function desplegar(categoria){
var menu = document.getElementById(categoria);
if(menu.className == "ver_menu"){
menu.className = "ocultar_menu";
}
else{ menu.className = "ver_menu"; } }
</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>
<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.
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!!
ResponderEliminarAtte:
engell1002000@hotmail.com
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!
ResponderEliminarBueno lo intentare mas haber que pasa! pero necesito que me ayudes
gracias de antemano.
engell1002000@hotmail.com
Hola buenas
ResponderEliminarmira 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
No sé a que te refieres:¿A poner una imagen en una entrada?
ResponderEliminar¿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?
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.
ResponderEliminarEspero tu respuesta
gracias
ari_elcrack12@hotmail.com
muchas gracias oloman.
ResponderEliminarpta: esta muy bien la entrada.
xd
no puedo cvr el script oculto, me lleva a una pagina blogger inicio, puedes arreglar esto???
ResponderEliminarnecesito mucho usar esta tecnica.
Ya me gustaría Leo, pero el script de ocultar/desplegar está fallando últimamente y me está haciendo la puñeta.
ResponderEliminarEl 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.
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?
ResponderEliminarPorque no soi capaz de hacerlo funcionar tal y como biene escrito añadiendo un texto plano simple :S
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.
ResponderEliminarPara 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.
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?
ResponderEliminarEsta bastante chulo. ^^ Gracias
Hey muy bueno y muy util..
ResponderEliminarmucheas gracias por todos los consejos y todos los trucos
Hola Oloman. Buscando por google acabé aquí.
ResponderEliminarLo 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
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.
ResponderEliminarMuchas 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 ;)
ResponderEliminarNo manches te la rifaste men, eres la pura ley
ResponderEliminarEspero que eso que dices sea bueno, Lagarto, porque no entiendo ni papa. ;)
ResponderEliminarHola, 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.
ResponderEliminarMuchas gracias y un saludo
Luis
Hola Oloman.
ResponderEliminarTení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.
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...
ResponderEliminarLos 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.
Estupendo!.
ResponderEliminarEn breves lo intento y te comento.
Como siempre, gracias.
Un saludo.
Hola Oloman.
ResponderEliminarPrueba 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.
Ups! se me olvidaba:
ResponderEliminar¿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.
Algo retrasado, pero ahí va la respuesta Tapestryworkerman.
ResponderEliminarPrueba 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.
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 ;)
ResponderEliminarAñande un fondo plano a los posts o sustituye el general... por favor :(
Gracias Oloman.
ResponderEliminarPrimero 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.
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... :)
ResponderEliminarSobre el chino, sólo tienes que hacer los cambios que te dije. NO hay que estudiar nada, sólo seguir las instrucciones ;)
Gracias por ayudarme respuesta
ResponderEliminar