» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

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.
    Hack Leia Mais Hack Leia Mais Reviewed by Áurea on 1/27/2009 Rating: 5

    13 comentários:

    1. Áurea, tudo bem?
      Eu tinha o Continue lendo... no blog, mas não sei por que, está desabilitado, pelo menos aqui em meu pc.

      Minha dúvida seria saber se aparecia no pc de todos os que visitam o blog. Mas descobri que os códigos que você ensina aqui não estão no blog. Daí, pergunto: Quem os retirou? Mistério, não?

      Por fim, retirei a formatação de postagens, em configurações, mas o continue lendo aparece ainda.

      Minha pergunta agora é: O Blogger altera códigos que introduzimos no HTML do template deles?

      Abraços.

      ResponderExcluir
    2. Kramba muito bom, vlw, tentei com uma outra dica e nao funcionaou muito bem, esta foi massa.
      vlw

      ResponderExcluir
    3. Po vlw mesmo, tentei outra dica que nao funcionou, esta foi massa.
      obrigado.

      ResponderExcluir
    4. MUITOOOO OBRIGADO! ^^ só isso que tenho a dizer... xau ^^

      ResponderExcluir
    5. \o/ Adoreii!!
      Mas tenho uma dúvida, queria que o "Leia mais" aparecesse no canto direito, pode me explicar como faço isso?
      Juro que tentei futicar sozinha pra ver se eu conseguia antes de vir pedir ajuda, mas não entendo quase nada dessas coisas mesmo.
      Abraço

      ResponderExcluir
    6. ola, só uma pergunta, no meu blog as post são na horizontal com fila de 3 post, quero colocar fila de 5 post mais não sei onde tem que mexe obg...

      ResponderExcluir
    7. Espetacular. Muito simples e bem didáticas são as suas orientações. Parabéns...

      ResponderExcluir
    8. No meu Blog na hra q se tenta fazer o que eh pedido no 2º- Encontre as linhas nao tem as linhas dessa forma! e agora?

      ResponderExcluir
    9. Aurea, por que vc sumiu aconteceu alguma coisa entre em contanto se eu puder ajuda estamos as ordens abraços!!!

      ResponderExcluir
    10. desculpa emcomodar mas a navbar esta como hidden(oculto) e nao queria isso algue pode me dizer como deixar a navbar aparecendo.vlw

      ResponderExcluir
    11. Queria retirar o hack leia mais do meu blog, como faço ?

      ResponderExcluir

    Todos os comentários são lidos e moderados antes da publicação.
    Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

    Tecnologia do Blogger.