Hack Leia Mais com Posts Expansíveis

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Há algum tempo indiquei aqui 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!
Não deixe de ler o tutorial até o fim e ter certeza de ter entendido, copiar e colar sem pensar não dá certo!

HACK PARA POSTS EXPANSÍ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 o código javascript:

<script type='text/javascript' src='URL do Arquivo Java' />

entre estas tags.

OU

» Baixe O ARQUIVO JAVA, hospede no local de sua preferência- Sugestão DROPBOX -, anote a URL e substitua a URL do Arquivo Java pela sua. Em seguida cole o código abaixo antes da tag </head> do seu template, alterando a localização do arquivo hospedado anteriormente:

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

Salve seu template clicando em SALVAR MODELO
Marque a caixinha ►Expandir modelos de widgets

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.

Post Atualizado em 16/06/09 - 23:00h

Se o arquivo Javascript hospedado em um site externo não funcionar você pode incorporar o código java no HTML do seu blog desta forma:

Copie este código abaixo e cole entre as tags ]]></b:skin> e </head> da mesma forma que a explicação acima:

<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/>');
}
document.write('Widget sponsored by:<br/><a href="http://bvibes.com"><img src="http://fbvibes.com/templates/yget/images/vibes_logo.png"/></a><br/>');
} //]]></script>