martes, 13 de julio de 2010

OCULTAR PARTE DEL TEXTO EN LAS ENTRADAS DE NUESTRO BLOG.

El otro día pasé por la facultad a hacer un exámen y hable con mi amigo Sandman, quien me decía que quería saber el modo de ocultar parte de las entradas de su blog.

Al pasarme por el BLOG DE GEMA me encontré con este sencillo código para hacerlo que quiero compartir con vosotros.

Para que os hagáis una idea de qué es lo que os voy a explicar os dejaré por aquí un pequeño ejemplo de ello:



Ejemplo:
Blanco es,
la gallina lo pone,
con aceite se fríe
y con pan se come.

SOLUCIÓN
    (El huevo)





Pues,tras este pequeño ejemplo a modo de adivinanza vamos a explicar como hacer para conseguir este efecto tan molón en nuestro propio blog.

Para que nos funcione correctente, lo primero que debemos hacer es colocar en el código html de la plantilla de nuestro blog, justo antes de </head> el siguiente código:




<!-- desplegable -->

<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

<!--desplegable -->





Guardamos los cambios en nuestra plantilla html y nos vamos a la página principal del blog.

Si queremos ocultar parte del texto de una entrada que publiquemos en nuestro blog deberemos ir a publicar una nueva entrada y colocar en ella el segundo texto modificando las partes en verde:





<a href="javascript:void(0);" onclick="expandcollapse('cualquiercosa')">Ver ejemplo</a>

<ul id="cualquiercosa" class="texthidden">

Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-

</ul>





Las sustituciones a realizar son las siguientes:
  • CULAQUIERCOSA: debemos cambiarlo en ambos casos por un nombre para el código. Debemos modificarlo cada vez que usemos el código en nuestro blog.
  • VER EJEMPLO: es lo que veremos cuando el texto esté oculto. En esta entrada aparece como Solución. Podemos poner lo que queramos. También podemos, si queremos colocar una imágen sustituyendo la palabra VER EJEMPLO POR EL SIGUIENTE CÓDIGO:



    <img src="aquilaurldelaimagen"/>


  • TEXTO OCULTO: evidentemente, el texto que queramos ocultar en nuestra entrada.

Cada vez que queramos ocultar una parte del texto deberemos usarlo en la entrada a publicar. Aparentemente puede ser muy pesado poner este código en cada entrada, pero para ello blogger nos da in pequeño truquillo.

Nos vamos a la pestaña de configuración --> Formato --> Plantilla de entrada

Pegamos allí el código son personalizar, de forma que cada vez que vayamos a publicar una entrada nueva nos aparezca automáticamente.

Espero haberla sido de utilidad. Ya me contaréis si os funciona.

No hay comentarios :

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...