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 != "item"'>
<script type='text/javascript'>
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") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</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='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<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("post-" + "<data:post.id/>");
</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.
