Hack Leia Mais

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Este hack é muito comum entre os metablogs. Eu já havia postado aqui um deste tipo com a pequena diferença de o post se expandir na página principal do blog (Hack Leia Mais com Posts Expansíveis), diferente deste que há a necessidade de clicar no link Leia Mais ou [...] para terminar de ler o post.

A maior utilidade deste hack é quando usamos posts resumidos ou posts em colunas na página principal do blog.

Também tem a utilidade de você definir até onde o seu post ficará resumido na página principal.

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ SEMPRE TENTE ANTES NUM BLOG DE TESTES.
♥ SALVE O SEU TEMPLATE ANTES DE COMEÇAR, CLICANDO EM Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Vamos ao hack:

Vá em Modelo → Editar HTML.

1º- Cole o código Javascript abaixo, antes da tag </head>:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
spans[i].style.display = &#39;none&#39;;
found = 1;
}
if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))
spans[i].style.display = &#39;none&#39;;
}
}
</script>
</b:if>

♦ Clique em SALVAR ALTERAÇÕES.

♦ Marque a caixinha ► Expandir modelos de widgets

2º- Encontre as linhas:

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

» Substitua estas linhas por estas abaixo:

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Leia Mais</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

♦ Clique em SALVAR ALTERAÇÕES.

OBSERVAÇÕES

1- As palavras Leia Mais em verde podem ser subtituidas por [...] ou por Continue Lendo, como você quiser.

2- Você pode incluir um código CSS acima da linha ]]></b:skin> para configurar o link Leia Mais.
O código é este:

#showlink {
font-size: 120%;/*Tamanho da fonte*/
float: right;
margin-right: 30px;
margin-top: -8px;
font-weight: bold;
}
#showlink a { /*Link*/
font: normal normal 105% Arial, sans-serif; color: #333;
}
#showlink a:visited {color: #cccccc;}
#showlink a:hover { /*Link quando apontado pelo mouse*/ color: #dedede;}

3- Se você quiser colocar uma imagem no lugar de Leia Mais:

Veja a linha: <a expr:href='data:post.url'>Leia Mais</a> e substitua Leia Mais pelo código:

<img src='Endereço da Imagem' />

Assim você irá incluir uma imagem ao invés das palavras.

3º 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:

O que estiver entre <span id="fullpost"> e </span> será o restante do post que não aparecerá na página inicial do post.

Agora, se você criar um novo post, ele mostrará exatamente onde digitar o resumo e onde ler o resto do post. Para facilitar escreva seu post usando a forma HTML da caixa de postagem do blogger.

Esse hack só funciona nos posts após o código ter sido instalado, se quiser nos antigos, terá que editar os posts.

Um pouco de história e créditos:
Este hack já existe desde Nov/2006 divulgado pelo blog Hackosphere, mas recentemente vi no Usuário Compulsivo uma variação deste hack que utiliza o javascript bem menor e funciona do mesmo jeito. Então resolvi postar aqui o código java que vi no Usuário Compulsivo cujos créditos são de lá indicados com o link. Também recebi ajuda da Rô do Blogger'SPhera quando aprendi a editar as palavras "Leia mais" pelo CSS #showlink.