Hack “Leia mais…” apenas em artigos escolhidos

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

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:

É 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.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

14 Comentários

  1. não deu certo no meu blog. Eu já tinha o hack para post expansivel, do que a gente escolhe qual é resumo. No caso eu preciso apagar alguma outra coisa?
    htt://futeboldotapajos.blogspot.com

    Responder

  2. Não consegui. Aparece a seguinte mensagem: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "cond".
    O que é que está faltando para dar certo?

    Responder

  3. Rodrigo,

    o que deve ter acontecido é que vc esqueceu de remover o código do Hack antigo. Por isso algumas linhas estão duplicadas.

    Responder

  4. Rodrigo,

    então o erro pode ser em alguma incompatibilidade com o template que vc está usando.
    Mas vale rever o passo 3 do tutorial acima para ter certeza de que substituiu o código certo.

    Responder

  5. Eu não encontrei o trecho do item 3 exatamente como vc colocou aqui, mas encontrei esse bem parecido e substituí assim mesmo. Como não aceita HTML no seu comentário fiz algumas adaptações:

    div class='post-body entry-content'
    data:post.body/
    div style='clear: both;'/ !– clear for photos floats —
    /div

    O meu erro foi o mesmo do Rodrigo.
    Tem alguma dica para me ajudar?
    A maioria dos meus posts são pequenos, mas alguns tem imagens e ocupam um espaço enorme, então gostaria desse ou outro método para 'esconder' as imagens desses posts.

    Responder

  6. isso era o q eu precisava apenas nos escolhidos, mas não encontra a: div class=’post-body’

    não tem outro codigo q possa servi

    ps: boa parte do meu blog é fruto do q aprendia aki

    Responder

  7. Consegui corrigir o código, era mais uma questão de sintaxe. Não consegui postar aki o codigo, mas preste atenção onde tem aspas simples q na verdade não está aspa simples, mas sim acento.

    (’) – Acento

    (') – Aspas Simples

    Basta trocar q daí vai funfar. 😀

    Responder

  8. Um aviso. Depois de tando tentar arrumar este código para meu tipo de layout, percebi que não se pode deixar o texto no formato justificado, se não o link de leia mais não aparece ou quando aparece só fica no fim do texto. VLW. [Ferramentas Blog] tá ajudando mto.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.