jueves, 26 de marzo de 2009

SPOILER IMAGENES Y TEXTOS OCULTOS

Spoiler no es mas que un texto o imagen oculto detrás de un texto, son bastante útiles para alojar por ejemplo imágenes de gran tamaño o textos, veamos un ejemplo que es la forma más fácil de entenderlo.


EJEMPLO(Pinchar aquí para ver el ejemplo)
Image and video hosting by TinyPic

Esto es un ejemplo muy simple, lo podéis complicar tanto como queráis, podéis combinar texto con imágenes, solo texto o imágenes en fín eso depende de la utilidad que le vayáis a dar.


Como insertarlo en vuestro blog:

Primer paso:(acciones previas)

Tendréis que insertar un pequeño código en vuestra plantilla, para ellos dirijiros a Diseño->Edición de HTML

Buscar </head> justamente encima del mismo copiar el código:
<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
Una vez insertado ese código buscar la parte de código ]]></b:skin> y justamente encima colocaremos el siguiente fragmento de código:
.commenthidden {display:none;}
.commentshown {display:inline;}
Guardamos la plantilla y listo para utilizar.


Segundo paso:(inserción spoiler)

En el lugar que queramos que aparezca nuestro spoiler tendremos que añadir unas líneas de código, si es en una entrada en edición de HTML, si es en un lugar de la plantilla en el lugar del código oportuno y si es en un gadget este será de tipo HTML/javaScript.

<a aiotitle="click para expandir" href="javascript:togglecomments('Identificador')">SPOILER</a>
<div class="commenthidden" id="Identificador">Contenido Oculto</div>
Personalizar :

Identificador: Hace referencia a un nombre que tendréis que darle al spoiler, este nombre tendrá que ser único, es decir dos spoiler no podrán tener el mismo nombre, podréis asignarle cualquiera que se os ocurra ya que este no se verá reflejado en ningun lugar.

Contenido Oculto: Aquí es donde insertaréis el texto o imágen oculto

  • Para insertar imágenes tendréis que subirlas a un servidor de imágenes como puede ser tinipyc, una vez generado el código tendréis que copiar el primer enlace donde dice: Dirección HTML para sitios Web y sustituirlo por donde puse contenido oculto.
  • Para insertar texto, donde puse contenido oculto insertar algo de este tipo
    <span style="font-weight:bold;">Aqui el texto que queráis</span>
    Podéis por supuesto modificar el estilo de letra tamaño, color...
Nota: Combinar los pasos anteriores es muy simple, simplemente es realizar las acciones en el orden que más os convenga.

17 Comentarios:

Jeff dijo...

Un buen blog pero, por favor, supreme el mensaje de bienvenida en la ventana modal. Es un verdadero atentado contra la navegabilidad y salta cada vez que cambias de página.

caxitos dijo...

jeff era tarea pendiente , lo tenía puesto para que se viera el ejemplo de como funcionaba, gracias ya mismo lo retiro.

Cris dijo...

Hola Caxitos. Estoy preparando mi próxima entrada donde quiero poner una image oculta.En el primer paso no tengo problemas, pero en e 2º paso tengo dos dudas:
1: Hay que registrarse en Tinipyc? Yo he subido la foto sin registrarme y me deja, pero no sé si cuando salga de la página se borrará la información.
2: He seguido todos los psos, pero al darle a vista previa ates de publicar, veo que la imagen no la puedo volver a ocultar na vez abierta. ¿Por qué puede ser?

Muchas gracias.

caxitos dijo...

Cris En Tinipyc no hay que registrarse, la imagen permanecererá alli 'para siempre' una vez subida. Si has seguido todos los pasos bien guarda los cambios, la vista previa no permite apreciar todos los efectos, asi que adelante!!!No tengas miedo!!Recuerda que siempre puedes tener una copia de la plantilla por si las moscas o en el caso de una entrada, borrar la misma y arreglado.

Cris dijo...

Ok, entonces es solo por la vista previa, no? Mañana lo haré entonces y te aviso si va todo bien.
Muchas gracias y un saludo!

Cris dijo...

Pues no. En vista previa sí me salía la fto, lo que no podía era ecrrarla, pero al publicar me sale en enlace pero no se me abre. Lo que he hecho es opiar el 2º paso tal cual y donde pone SPOILER poner "aquí" (porque quería poner "pincha aquí para verlo"). Tenía que haber cambiado oa palabra?
He borrado esa parte y ya está, que tampoco era superimportante parentender el post, pero me gustaria usar el truco en alguna otra ocasión.

Gracias!

caxitos dijo...

Cris Eso está bien, para cambiar el texto, debes modificar la palabra SPOILER, la verdad no se donde te puede estar fallando, si quieres mandame un correo con la imagen que quieras y yo te mando el código y lo pruebas directamente en tu blog, de forma que siempre que quieras usarlo simplemente sea modidicar los datos de la imagen y el texto.Mi correo es citopirsing@gmail.com entré a tu blog pero no vi donde intentaste aplicarlo snif snif Saludos ya me dices algo.

H-ugo!!! dijo...

holaa
otra ves muchas gracias me sirvio muy bien

pero tuve q aser unas modificaciones por que como tu lo explicas no me sirvio

pero al fin llege y lo ise gracias!!

caxitos dijo...

H-ugo!!! Ya lo vi sin duda un blog creado con mucho gusto! Madonna estará muy contenta y todos nosotros por poder disfrutar de un lugar como el tuyo un saludo te visitaré!

H-ugo!!! dijo...

ei men tengo una duda

cuando lo ago me sirve

pero pondo 2 por una entrada y a preto el primero y me sale lo que yo keria pero cuando apreto el segudo me sale otra ves lo del primero y no me sale el del segundo

¿que hago?

alguna sugerencia

caxitos dijo...

Hugo Eso te pasa por que no cambiaste el Identificador, este es un nombre cualquiera, por ejemplo si pones 2 spoiler puedes usar para el primero ident1 y para el segundo ident2. Aun que ya te digo que puedes usar cualquier nombre, simplemente tienes que poner nombres distintos, ya me cuentas como fue.

H-ugo!!! dijo...

ei caxitos me sirvio y lo pude arreglar
gracias por tu ayuda te devo una ;)

Cofi dijo...

A mí no me va... :S

Por cierto, tienes el código de la nube de etiquetas esa en forma de pelota?

Nos vemos! ;)

caxitos dijo...

Cofi Si sigues todos los pasos tiene que funcionar perfectamente.

el código para la nube de etiquetas lo puedes encontrar aqui.

Nube de etiquetas

BATIDODEFRESA dijo...

¡que bueno!hace tiempo queria saber si era posible.
A ver si lo logro porque soy bastante inutil informaticamente hablando

Meilan dijo...

Hola! Sigo los pasos uno a uno y no me sale. No entiendo qué hago mal porque hace tiempo lo utilicé en otro blog y me salía a la perfección. Es un blog de Blogspot y la plantilla la he hecho con el diseñador de plantillas propio, no es importada ni nada por el estilo. ¿Qué puede estar saliendo mal? En mi caso no estoy poniendo imágenes, sólo texto oculto. ¡Gracias!

Publicar un comentario en la entrada

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.