Posts Expansíveis

Há algum tempo indiquei o link para o tutorial da minha amiga Cláudia sobre Posts Expandíveis.
Neste post a Cláudia disponibiliza um arquivo do word com as instruções para que os posts expandíveis funcionem.
Vou transcrevê-lo aqui a pedidos com algumas adaptações na tentativa que fique mais fácil para as pessoas poderem fazê-lo em seus blogs.

A PRINCIPAL DIFERENÇA DESTE HACK DE ALGUNS "CONTINUE LENDO" É QUE VOCÊ PODE CLICAR EM "CONTINUE LENDO" OU "LEIA MAIS" E NÃO TER QUE ABRIR O POST PARA LER O RESTO, ELE SE EXPANDE, FICANDO OS OUTROS POSTS VISÍVEIS PARA VOCÊ.

Falando nisso clique em Continue Lendo para aprender como fazer!

HACK PARA POSTS EXPANDÍVEIS
(Tradução Claudya R. – Fonte:http://beaultifulbeta.blogspot.com - Adaptação Áurea Ribeiro)

1º Baixe e salve seu tema, assim você pode voltar atrás se algo der errado.

2º Ache as tags
]]></b:skin> e </head>

Adicione esta linha do código javascript:
<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> entre estas tags.

Desde que fique sempre abaixo de ]]></b:skin> e acima de </head>

3º Encontre a includable de nome "post" procurando pela linha:
<b:includable id='post' var='post'>
→Selecione desde esta linha acima até a linha:
<div style='clear: both;'/> <!-- clear for photos floats -->
→Substitua pelo código em vermelho abaixo:

<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 + "\");"'>Leia Mais...</a></p>
       </span>
       <span id='hidelink' style='display:none'>
         <p><a href='javascript:void(0);'
           expr:onclick='"javascript:hideFull(\"post-" +
           data:post.id + "\");"'>Resumo...</a></p>
       </span>
       <script type='text/javascript'>
         checkFull("post-" + "<data:post.id/>");
       </script>
   </b:if>


<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Salve seu template clicando em SALVAR MODELO

Obs: Você pode substituir os dizeres Leia mais... e Resumo... (destacados em verde), da forma que quiser. Por exemplo como fiz aqui, Continue lendo... e Voltar.

4º Vá em Configurações ► Formatação ► desça a tela e no fundo, você encontra o Modelo de Postagem (text box/caixa de texto) para especificar o "Post template". Copie/cole o código abaixo, nessa caixa de texto, e clique em Salvar configurações.

Digite seu resumo aqui
<span id="fullpost">
Digite o resto do post aqui
</span>

De forma que fique como esta imagem:


Agora, se você criar um novo post, ele mostrará exatamente onde digitar o resumo e onde ler o resto do post. Esse hack só funciona nos posts após o código ter sido instalado, se quiser nos antigos, terá que editar os posts.

Tweet

Posts Relacionados

Posts Expansíveis

4 / 5

Por Áurea

Comentários