Expandir títulos de los post en las etiquetas


Son varios los que me preguntan cómo hacer para que se muestren sólo los títulos de los post cuando hacemos click en una etiqueta, como pueden ver si hacen click en cualquier etiqueta de mi blog.


Hoy vamos a ver cómo hacerlo.

♠ Vamos a Diseño- Edición de HTML y marcamos Expandir plantillas de artilugios.
♠ Ahora pegaremos el siguiente código antes de </head> con lo que estaríamos alojando directamente el script en nuestra plantilla:

<script type='text/javascript'>
//<![CDATA[
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';
}
}
function commentDisplay(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
if (entry.content) {
comment = entry.content.$t;}
else if (entry.summary) {
comment = entry.summary.$t;}
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
if (comment.length < numchars)
document.write(comment + '<br/><br/>');
else
document.write(comment.substring(0, numchars) + '...<br/><br/>');
}}
//]]>
</script>

♠ Seguidamente, buscaremos en la plantilla lo que está en color negro y pegaremos lo que está en color naranja, tal como se muestra:

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td width='40px'>
<a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/contraer la entrada'>[+/-]</a></td>
<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>


<b:includable id='main' var='top'>

<!-- posts -->

<div id='blog-posts'>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><data:post.dateHeader/></h2>

</b:if>


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>


<b:include data='post' name='post'/>


</b:if>

♠ Recuerden, hay que buscar los códigos y pegar lo que está en anaranjado tal como se muestra. Luego, damos click a guardar.

Como vieron, es sencillo, pero un poquito demoroso.

10 opinaron:

Anónimo

Muy bueno

Responder
juan carlos

justo lo que buscaba

Responder
squirrel

Es lo que esperaba me encanta besos:)

Responder
La inquisidora

Muy bueno, me parecía que debía ser muy complicado pero con tu tutorial me has demostrado que no es dificil hacerlo.

Responder
Josué

Ya implemente este dato y quedo estupendo ;)
Gracias por este truco.
Ahora poco a poco arreglare los comentarios :)
Saludos.

Responder
Jéssica YK

» Anónimo: gracias, pero la próxima vez trata de tener tu perfil habilitado o deja algún enlace a tu blog para poder visitarlo.

» juan carlos: me alegra que te sirva.

» squirrel: qué bueno que sea lo que estabas buscando

» La inquisidora: sí, nos es dificil, sólo hay que tener un poquito de paciencia.

» Josué: me alegra que te haya sido útil la entrada :)

S@lu2

Responder
Saitco

Muy bueno Jéssica.. trataré de implementarlo en un blog de prueba para ver si sale, ya que soy novato en html.. Saludos

Responder
Jéssica YK

» Saitco:
con el tiempo y con la práctica te convertirás en un experto manejando la plantilla ;)

S@lu2

Responder
futbolistas2003

Tengo aplicado en mi blog, http://futbolistas2003.blogspot.com/, el truco que explicaste en tu post "Expandir/contraer gadget de Etiquetas con efecto deslizante", mi pregunta es ¿se pueden "Expandir titulos de los post en las etiquetas" habiendo aplicado previamente el otro truco?
Lo he intentado pero no lo consigo.
Gracias

Responder
Retazos de mi corazón

No me funciona, ise todo igual y nada, ayuda por favor

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio