"Leer más desplegable" sin tener que volver a cargar la página

Con este truco podrás esconder el texto a lo "leer más" de las entradas que tú elijas que consideres que sean muy extensas sin tener que volver a cargar la página. Diciéndolo de otro modo, será como un menú desplegable que se abre cuando haces clic sobre él.

Para conseguir este efecto hay que seguir los siguientes pasos:

1) Vamos a Diseño
2) Edición HTML
3) Marcamos la opción "expandir artilugios".
4) Buscamos </head> (tecleamos Ctrl + F para buscar más rápido)
5) Pegamos antes de </head>

---

<script src='http://pmsc.free.fr/J01/0981905650.js' type='text/javascript'/>

---

Nota: el archivo .js necesario lo he alojado yo en un servidor público. Si falla alguna vez comunicadlo y lo vuelvo a subir.

6) Ahora buscamos este código: <b:includable id='post' var='post'>
7) Nos fijamos que está acompañado de la siguiente parte de código:

---

<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>

---

8) Lo borramos todo y en su lugar pegamos el siguiente código:

---

<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 + "");"'>Volver... [x]</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

---

Nota: Sigue leyendo y Volver los puedes sustituir por una imagen sustituyéndolos por: <img src="url_de_tu_boton_o_imagen_"/>




9) Clicamos en vista previa y si está todo bien guardamos la plantilla.
10) Ahora vamos a Configuración --> Formato --> abajo del todo veremos que hay un recuadro que pone "plantilla de entrada". En ese recuadro pondremos el siguiente código y lo guardaremos:

---

Aquí va el texto que se verá al comienzo de la entrada
<span id="fullpost">
Texto escondido, el que aparecerá al hacer clic en seguir leyendo.
</span>

---

"Leer más desplegable" sin tener que volver a cargar la página | Quiero crear un blog | Tutoriales, gadgets, trucos y SEO para Blogger

Sacado de Quiero crear un blog.com