Siempre me pregunté cómo hacen algunos blogs que cuando publican una entrada, no la publican entera, sino que publican un pantallaso, y luego existe un link que por lo gral. se identifica como "Sigue Leyendo", y despliega la entrada completa.
Entonces encontré lo siguiente, un código con el cual se despliega la entrada en la misma pantalla, y clickeando nuevamente se reduce otra vez.
Paso a explicar:
Primero debemos ubicar en nuestra plantilla (Plantilla/Edición de HTML/expandir artilugios)</style> y justo antes de esto debemos pegar este código
.posthidden {display:none}
.postshown {display:inline}
Luego ubicamos en la plantilla <head> y justo antes pegamos este otro código<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
Y guardamos los cambios.
Cuando creamos la entrada, antes del texto que deseamos que quede oculto ponemos el siguiente código <span class="posthidden" id="El título del post">
y al final de la entrada no nos debemos olvidar de incluir </span>. (Donde dice "Título de Post" debe ser sólo el título, NO la Url, si se quiere se pude hacer Ctrl+C Ctrl+V, con el título de la entrada, para que no se produzcan errores)
Para finalizar, donde incluimos el último </span>, a continuación incluimos este último código
<a href="javascript:expandcollapse('El título del post')">Seguir Leyendo...[+/-]</a>
Éste es el código que crea el link que expande y contrae la entrada.
Y pronto, se crea la magia.
Por último agradecer como siempre a Gema@
Actualización 17/07/07
Nuestra querida Gem@ nos deja otra manera más sencilla de crear este tipo de efecto, aquí va su excelente explicación:
Primero debemos guardar y alojar este script: functiontoggleIt.js
Luego nos situamos en Plantilla/Edición HTML y marcamos la casilla para expandir plantillas de artilugios.
Después buscaremos en nuestra plantilla </head> y justo antes añadimos...
<script src='URL DEL SCRIPT functiontoggleIt.js' type='text/javascript'/>
Después vamos a buscar lo siguiente:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Y lo vamos a sustituir por:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>SIGUE LEYENDO</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CIERRE TEXTO</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Donde dice SIGUE LEYENDO y CIERRE TEXTO puede sustituirse por otra frase o si lo desea una imagen añadiendo el código de imagen: <img src="url-de-la-imagen">
Por último debemos añadir un código en las entradas donde aparecerá "Leer más"
Para facilitar la tarea y evitar tener que copiar y pegar ese código cada vez que deseemos añadirlo hay una solución y es aplicarlo en la plantilla de entrada.
¿Dónde está eso?
Nos situaremos en Plantilla/Opciones/Formato casi al final encontraremos la plantilla de entrada, es una ventana con opción para escribir donde añadimos:
aquí texto<span id="fullpost">
aquí texto
</span>
Guardamos los cambios y listo.
Ahora cada vez que editamos una entrada aparecerá ese código, escribiremos en la primera línea donde dice "aquí el texto" el inicio de la entrada y en la segunda línea de "aquí texto" es el texto que aparecerá "escondido"
Seguir Leyendo...[+/-]
Seguir Leyendo ...
.
30.4.07
