Como colocar o hack “Leia Mais” no Blogger
Neste post vou ensiná-los a usar três modelos de códigos para resumo de postagens na página inicial do Blogger: o primeiro faz um resumo automático em todas as postagens, o segundo faz um corte manual e o terceiro é o próprio “Leia Mais” (jump break) do Blogger.
A nomenclatura para o resumo de postagens na página inicial varia muito. Podemos chamar de “leia mais”, “continue lendo”, “read more” e etc.
Os três modelos são simples de implementar e a escolha fica a critério do cliente ;)
Lembrando que nos templates que disponibilizo aqui no DB, o segundo hack já vem instalado.
Antes de fazer qualquer alteração, é altamente recomendável fazer um backup do template.
Modelo 1-Hack “Leia mais” com corte automático
Entre na aba layout, clique em editar html e marque a caixa expandir modelos de widgets, localize (Ctrl + F) a tag </head> e cole, antes dela, o seguinte código:
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 280, // default is 100
expandEffect: 'fadeIn',
expandText: '[...]', // default is 'read more...'
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>
O destaque representa a quantidade de caracteres html que será exibida na página inicial.
Procure agora por este código:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Pra quem usa templates do Dicas Blogger, procure por:
<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'>Continue lendo >></a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if></div>
Substitua tudo por:
<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<p><a expr:href='data:post.url'>Continue lendo...</a></p>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
Clique em visualizar e se tudo estiver ok, salve.
Se quiser substituir a frase “continue lendo” por outra de sua preferência, basta substituí-la no código acima (destaque em vermelho).
Modelo 2-Hack “Leia mais”com corte manual
Entre no html do seu template, marque a caixa expandir modelos de widgets e procure por </HEAD>. Cole o código 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>
Procure agora por:
<div class='post-body'>
<p><data:post.body/></p>
Substitua tudo por:
<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'>Continue lendo >></a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
Clique em visualizar e se tudo estiver ok, clique em salvar.
Escreva seu post normalmente e quando terminá-lo, clique em editar html e coloque o código <span id="fullpost"> onde você deseja iniciar o resumo e </span> no final do post.
Post (área de corte) <span id="fullpost"> restante do post </span>
Veja um exemplo na imagem abaixo:
Pra quem usa o Windows Live Writer, é necessário colocar o <span id="fullpost"> após o término de um parágrafo “</p>” e o </span> também.
Modelo 3-Jump Break – o “leia Mais” do Blogger
Esta nova função já está presente nos modelos padrão do Blogger.
Para quem usa um template personalizado – que é o caso dos modelos criados por mim e pelos demais colegas – é preciso instalar um código no html do template.
Entre em layout, editar html e clique em expandir modelos de widgets. Usando a combinação Crtl+F do seu teclado, procure pelo seguinte trecho: <data:post.body/>
Logo abaixo do trecho citado, cole o seguinte código:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
Para resumir os posts, é preciso usar o novo editor de textos do Blogger. Para habilitá-lo, entre no painel, clique em configurações e, no final da página, procure por configurações globais. Marque a opção editor atualizado.
Escreva seu post, escolha a área de corte (resumo) e clique no ícone do jump break
Muitos usuários relataram que após o uso do jump break a sidebar foi parar embaixo dos posts, mas é preciso apenas tomar alguns cuidados. O corte tem que ser inserido após o fechamento de uma div. Portanto, após a inserção do jump break, é preciso clicar em editar html e inserir o “more” após o fechamento de uma div (</div>)
Todos os modelos já haviam sido publicados aqui e em outros blogs, mas achei que ficaria mais legal colocá-los em um único post para facilitar a vida de todos.
Créditos para Usuário Compulsivo, Blogger Buster e El Escaparate de Rosa.
Continue lendo >>
