nota automatica

sábado, 31 de marzo de 2012

Expandir post

Hace unos días estuve leyendo acerca de cómo poner la opción de leer más en un blog, y bueno, hice como veinte cambios y simplemente no quedaba. Luego me fijé que aunque se mostraba la opción, había posts que estaban tan cortos que no era necesario tener esa utilidad; hasta que me topé con un artículo de Deathly en el que nos daba una alternativa, expandir post. Esta me pareció perfecta, pues además de que me quedó a la primera resuelve el problema de que eliges en cada post si quieres que aparezca expandir el post o no.

Para hacerlo entra en Diseño | Edición de HTML y marca la casilla Expandir plantillas de artilugios. Pega el siguiente código antes de </head>

<script type='text/javascript'>
//<![CDATA[
// Expandir entradas
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'none';
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
found = 1;
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
//]]>
</script>


Ahora busca este código:
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Y reemplázalo por este:
<b:includable id='post' var='post'>
<div class='post hentry' expr:id='&quot;post-&quot; + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='&quot;javascript:showFull(&quot;post-&quot; + data:post.id + &quot;&quot;);&quot;' href='javascript:void(0);'>Seguir leyendo [+]</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='&quot;javascript:hideFull(&quot;post-&quot; + data:post.id + &quot;&quot;);&quot;' href='javascript:void(0);'>Minimizar [-]</a></p>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Guarda los cambios. Ahora cuando quieras que esta opción aparezca en un post sólo escribe lo que quieras que aparezca, y antes del texto que quieres que se oculte agrega esto:
<span id="fullpost">Aquí el texto que quieras ocultar</span>

Ver ejemplo aquí Imprimir artículo

No hay comentarios:

Publicar un comentario

Mil Trucos Blogger