Entradas Expandibles

bueno como veran mi anterior publicacion fue:
 Expandir Entradas solo en las paginas de etiquetas

si no dabes que es una entrada expandible bueno te lo explico:
es cuando solo aparece el titulos de tus publicaciones y en un lugar determinado aparecera un icono o palabras que al hacer click despazara y mostrara la publicacion instantaneamente justo abajo de el titulo y moviendo todos los demas titulos hacia abajo el cual qe una simple funcion javascript y que pudras definir el icono o palabras que al hacer click sobre ellas o el desplazara la publicacion

asi que ya explicado el tema vamos a empezar a agregar esta funcion en tu blog.

 el dia de hoy les enseñare como poner las entradas expandibles en la pagina principal y en las paginas de etiquetas lo que deveras hacer sera lo siquiente:

primero que nada entraremos a la edicion html de nuestra plantilla.
y presionaremos F + Control   O   F3 y buscaras el atributo < / head > 
luego justo encima de esta gregara el siquiente  script:

<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='http://sites.google.com/site/scriptsbalcon/b/blpostsexpandibles.txt' type='text/javascript'/>

luego buscaras las palabras que esta en negro y agregaras justamente como aprece lo que esta en Rojo.

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</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.pageType != "static_page"'>
<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>
<b:else/><b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

Luego guardas la plantilla

Comparte este articulo con tus amigos en las redes sociales y Vota por el articulo en Bitacoras.com

Twittear Compartir