Quickribbon

sábado, 18 de agosto de 2007

Mejora para el truco de Leer más

Una manera muy vistosa de redecorar el truco de leer más que ya vimos en este otro post. Con estos pasos conseguiremos un efecto fade in y fade out estupendo en el texto oculto. El truco es obra de Hackosphere (una vez más) y me parece realmente vistoso.
Para instalar el truco en nuestra página tendremos que hacer un par de incursiones en la plantilla. La apariencia final depende del color de fondo que tengamos en nuestros posts, así que para evitar el tener que andar entrando en el editor de HTML para ir cambiando los códigos de colores hasta encontrar el que más nos guste yo opto por crear una variable de color para poder cambiarla cómodamente desde "Colores y Fuentes" sin tener que bucear en la plantilla o liarnos con los códigos de colores.

Así pues buscamos en la plantilla, casi al principio, la zona en la que se definen las variables y añadimos esta:

<variable name="peekbgcolor" description="color fade" type="color" default="#fff" value="#f2984c">

Después buscamos la etiqueta de cierre </head> y justo encima ponemos este script:

<!-- EFECTOS PEKABOO -->
<script src='http://anniyalogam.com/scriptaculous/src/prototype.js' type='text/javascript'/>
<script src='http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects' type='text/javascript'/>
<script type='text/javascript'>
var fade = true;
var peekaboo_bgcolor = peekbgcolor$;
</script>
<!-- FIN EFECTOS -->

Tan sólo nos queda un paso más y es localizar esta línea en nuestra plantilla y borrarla:

<style>#fullpost {display:none;}</style>

Ahora el truco ya está instalado en la plantilla. Para usarlo no tendremos más que usar en los posts donde queramos que aparezca la siguiente estructura:

TEXTO SUMARIO
<span id="fullpost">
TEXTO OCULTO
</span>


Prueba a mostrar el texto


Tras la etiqueta fullpost colocamos todo el texto oculto que queramos mostrar sólo al pulsar sobre "sigue leyendo", "leer más" o lo que hayamos escogido. El efecto que se consigue con esta mejora es bastante vistoso.

5 comentarios:

JeJo dijo...

Este tutorial me parece espectacular. Hace mucho que estoy tras de el para aplicarlo y aquí encontré una explicación muy buena y sencilla. Pero ... (siempre hay un pero) mi blog tiene la plantilla:
------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
-------------------------------
y no encuentro la manera de colocar los códigos que indicas ... Si bién encuentro el codigo < / head >, por más que busque no hayo :
< style > # fullpost {display:none;}< / style >
y tampoco las "zona que define las variables"...
Espero que puedas ayudarme.

JeJo dijo...

Es decir ... tengo la plantilla mínima del viejo blogger ... se puede hacer igual ? de que manera ?

Gracias ....

Zaebos dijo...

Hola, lo primero decirte que siento la tardanza en contestar, pero es que hace tiempo que tengo el blog un poco abandonado ya que ando liadillo con otras cosas... trabajo... etc.

Vamos a ver... si tienes la plantilla del viejo blogger vas a tener que migrar tu cuenta al blogger actual... porque la estructura es totalmente distinta de uno a otro... ni siquiera sabia que a estas alturas se podía trabajar con las plantillas antiguas... primero mira si ya has migrado la cuenta, si no es así seguro que resuelves el problema. Si la has migrado (que yo creo que si) dimelo y te ayudo en lo que pueda, porque si que se puede hacer.
saludos

Anónimo dijo...

Hola

Seguí todos los pasos pero me aparece en la publicacion de los posts el texto TEXTO SUMARIO y TEXTO OCULTO

como lo hago para que esto no suceda

GRAXX

Buena pagina

Zaebos dijo...

Veamos... si es lo que yo creo es porque estás copiado tal cual la estructura que pongo en el post, vamos el ejemplo... con TEXTO SUMARIO me refiero a que ahí pongas el texto que tu quieras en el post.... y en TEXTO OCULTO el resto del post que quieres que se vea cuando pulses en "leer más"

Template Designed by Douglas Bowman - Updated to New Blogger by: Blogger Team
Modified for 3-Column Layout by Hoctro
Re Updated by Zona de Pruebas