Hack “Leia mais…” apenas em artigos escolhidos

Algumas pessoas que aprenderam aqui como criar Resumo de postagens expansível, aquele link “Leia mais” que aparece abaixo do resumo dos artigos publicados aqui por exemplo, não gostam de ter isso em todos e querem poder escolher qual terá o resumo e seu link e qual artigo será mostrado por inteiro sem o link. Então, vejamos aqui como fazer isso.

 

Os artigos originais que ensinam a criar esses resumos de postagem são:

• Como criar resumo de postagem expansivel?
• Resumo de Postagem Expansível automático

É importante ler esses artigos e entender como é o funcionamento desse tipo de hack para não ficar perdido agora.

 

Como vamos mexer no código-fonte do layout de seu blog, faça um backup antes de qualquer mudança para certificar-se de que será possível retornar ao modelo original sem as mudanças que você fizer agora e evitar perder alguma coisa – Backup do Modelo de Layout do Blog.

Instalando o Hack:

1. Vá ao Painel do Blogger e escolha a aba “Layout” ~> “Editar HTML” e marque na janela do código-fonte a opção “Expandir modelos de widgets”.

 

 

 

2. Procure no código “</head>” e ANTES disso cole:

 

<b:if cond=’data:blog.pageType == "item"’>
<style>.fullpost{display:inline;}</style>
<b:else/>
<style>.fullpost{display:none;}</style>
<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].className == &#39;fullpost&#39;) {
spans[i].style.display = &#39;none&#39;;
found = 1;
}
if (spans[i].className == &#39;showlink&#39;) {
if (found == 0) {
spans[i].style.display = &#39;none&#39;;
}
}
}
}
</script>
</b:if>

 

3. Agora, procure pelas seguintes linhas, ainda no seu código-fonte:

 

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

 

E troque por completo por:

 

<div class=’post-body’ expr:id=’"post-" + data:post.id’>
<p><data:post.body/></p>
<b:if cond=’data:blog.pageType != "item"’>
<span class=’showlink’>
<p><a expr:href=’data:post.url’>Leia mais…</a></p>
</span>
<script type=’text/javascript’>
checkFull(&quot;post-<data:post.id/>&quot;);
</script>
</b:if>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

 

Onde está indicado em vermelho, pode ser trocado até mesmo por uma imagem ou outro texto mais conveniente para o seu blog.

 

4. Salve e aplique o código abaixo apenas nos artigos que você quiser usar o link para resumos.

 

Sempre que escrever um artigo, será preciso inserir os seguintes códigos:

Texto resumo da postagem.
<span class="fullpost">
Restante do texto que só aparece depois de clicar em “Leia mais!”.
</span>

Isso deve ser inserido após você digitar todo o artigo e já souber o que quer colocar escrito antes do link. Aqui no [ Ferramentas Blo ] usamos sempre o primeiro parágrafo dos textos como “resumo”. Para adicionar o código, na aba do editor do texto (“Criar”) escolha “Editar HTML”. Assim você verá o seu artigo em formato HTML; é aí que você colocará as linhas do código indicadas acima.