Conseguir pinchar sobre una de mis pesta??as, se vea solamente la lista del t??tulo de las entradas y que una vez se pinche sobre uno de los t??tulos, este se expanda para mostrar la entrada completa.
Para poder hacer esto, antes es imprescindible tener etiquetados nuestros posts.
3. Buscamos la parte de este c??digo que se encuentra escrito en color negro, y a??adimos la parte del c??digo que est?? escrita en rojo, colocada tal cual lo veis aqu??:
<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:include data=’post’ name=’post’/>
Para poder hacer esto, antes es imprescindible tener etiquetados nuestros posts.
1. Nos descargamos el script que necesitamos para hacer funcionar el efecto y lo subimos a un alojamiento adecuado para obtener su url.
2. Vamos a Edici??n de HTML de nuestro panel y marcamos la opci??n «Expandir las plantillas de artilugios» colocamos la url del script en este c??digo y de esta manera que veis, antes de </head>:
<script type=’text/javascript’>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != ‘none’) {
post.style.display = ‘none’;
} else {
post.style.display = »;
}
}
</script>
<script src=»URL_DEL_SCRIPT» type=»text/javascript»>
</script>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != ‘none’) {
post.style.display = ‘none’;
} else {
post.style.display = »;
}
}
</script>
<script src=»URL_DEL_SCRIPT» type=»text/javascript»>
</script>
3. Buscamos la parte de este c??digo que se encuentra escrito en color negro, y a??adimos la parte del c??digo que est?? escrita en rojo, colocada tal cual lo veis aqu??:
<b:includable id=’PeekABooPost’ var=’post’>
<div class=’post uncustomized-post-template’>
<table><tr><td width=’40px’>
<a expr:onclick=’"javascript:toggleIt("" + data:post.id + "");"’ href=’javascript:void(0)’ style=’text-decoration:none’ title=’Desplegar esta 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 != "item"’>
<b:include data=’post’ name=’PeekABooPost’/>
<b:else/>
<b:include data=’post’ name=’post’/>
</b:if>
<b:else/>
<b:include data=’post’ name=’post’/>
No Comments Found