Acabo de publicar Regala Google Chrome por navidad |

Expandir/Contraer partes del blog

By Miguel Ángel Jiménez Achinte On 22:08



Autor Como dice el título, hoy les voy a enseñar este gran truco que te permite crear un post largo y en algunos lugares añadirle el simbolito de Expandir/Contraer, o el [+/-] que en definitiva lo que hace es esconder una porcion del post, ya sea un video, una imagen o un texto y así el lector puede expandir y ver el contenido.

Lo primero que hacemos es ir a la configuración HTML de nuestra plantilla y buscamos el </head> y justo antes pegamos el siguiente codigo:


<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>

Luego de esto, cada vez que queremos utilizar el [+/-] en cualquier parte de nuestro blog, ya sea un post o la sidebar, debemos poner el siquiente codigo:


<a onclick="return
verocultar(this);"href="javascript:void(0);">[+/-]</a>
<div style="display: none;">Contenido
oculto</div>

Y debemos remplazar donde dice Contenido Oculto por la parte del post que queremos esconder. Recuerden que pueden esconder un texto, una imagen o un video.Otra opción es sustituir el símbolo de Expandir/Recoger por una imagen, lo que haríamos sería añadir <img src="url-de-la-imagen"/> en lugar de [+/-]


Ejemplo:

Con texto:

[+/-]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum



Con una imagen:

[+/-]


Con un video:

[+/-]





14 comentarios

  1. gracias Gem@, disculpa si olvide poner el autor es solo que estos dias he tratado de poner bonita la plantilla :P

    y gracias por todos esos truquitos, son muy buenos.

    Posted on 6/17/2009 7:58 p. m.

     
  2. jajajaja no lo dije por eso, lo dije porque me dio buenos resultados :)
    Los emoticones están geniales ¿explicas en alguna parte como lo hiciste? estaría bien darlo a conocer :O

    Posted on 6/18/2009 8:01 a. m.

     
  3. Me parece genial porque es muy útil eso de poder mostrar con un click el código de un enlace o una imagen.
    Cuando lo tengas si me avisas lo damos a conocer en mi blog con enlace al tuyo claro está :)

    Posted on 6/18/2009 8:38 a. m.

     
  4. está terminada Gem@, quedó un poco larga pero espero haberlo explicado bien.

    Posted on 6/18/2009 4:57 p. m.

     
  5. excelente aporte muchas gracias por compartirlo lo aplicare en mi blog

    saludos

    Posted on 9/19/2009 2:27 p. m.

     
  6. hola mi pana primera ves q entro a tu blog es muy bueno me gusta por q lo haces todo con estilo y qda un blog muy llamativo a la vista te felicito... queria pedirte una ayudita aunq no saq el truco de aqui, bueno si puedes jeje, realice de aqui el de tweetboard y este me lo llevo tambien jeje.. mi problema es q tengo dos iconos pegados el de la fecha y el de tweet q tu tambien tienes pero el pequeño... dentro del codigo de ese tweet como le pongo otro codigo para moverlo un poco a la izquierda toy nuevo en esto solo tengo dos post de manera de prueba... no se si me explico
    Este es mi blog mipuntoypunto.blogspot.com si puedes revisa para q veas a lo q me refiero gracias y disculpa por lo largo

    Posted on 10/06/2009 10:35 a. m.

     
  7. Hola, puedes poner el codigo de los tweets dentro de una capa, me explico:

    <div id="nombreUnico">
    ...el codigo de los tweets...
    </div>

    donde la palabra nombreUnico hace referencia a cualquier palabra que no esté en uso. para separarlo un poco pones en el css de tu pagina, es decir antes de ]]></b:skin>, el siguiente codigo:

    #nombreUnico {
    margin-right:10px;
    }

    si quieres separarlo desde la parte izquierda pon margin-left, y asi para top (arriba) y bottom(abajo).

    Cualquier duda me avisas.

    Posted on 10/06/2009 2:16 p. m.

     
  8. ;( NO LOGRO COLO EL PRIMER CODIGO DONDE ME INDICAS EL SEGUNDO EN MI POST, PERO SOLO ME SALE "+/-" PEOR NO HACE NADA SOLO SE MUESTRA COMO UN ELACE PARA PINCHAR PEOR NO HACE LA ACCION DE EXPANDIR AYUUDA

    Posted on 9/10/2010 9:40 a. m.

     
  9. Dejame la direccion de la pagina donde lo estas probando para poder ayudarte :).

    Posted on 9/10/2010 11:54 a. m.

     
  10. Howdy! Do you know if they make any plugins to safeguard against hackers?
    I'm kinda paranoid about losing everything I've worked hard on.
    Any recommendations?

    Feel free to surf to my web site :: cardsharing 10 euro

    Posted on 3/28/2013 11:34 a. m.

     

Publicar un comentario en la entrada al viejo estilo