Como colocar o resumo ("hack") de postagem no blog com ou sem script

8 comentários
Hack
,

Resumo ("hack") de postagem

Neste artigo, vamos explicar como colocar o resumo de postagem com ou sem script.

Para começarmos o post, vamos a alguns esclarecimentos:

O resumo de postagem é importante para facilitar a navegação dentro do blog, pois a taxa de rejeição aumenta muito devido ao cansaço da leitura dos artigos.


Felizmente, existem técnicas que ajudam a facilitar a navegação.

No próprio Blogger temos Gadgets, como marcadores, arquivos do blog, menu, etc...

A técnica resumo de postagem transforma todas as postagens em forma de blocos, tornando a página mais agradável para leitura, e oferecendo um prévia do artigo.

Tutorial

Resumo ("hack") de postagem com script

Para começarmos, sugiro que seja feito um backup do seu template.

Ainda nesta página, você verá a opção editar html, com uma pequena imagem do seu blog, logo acima, clique em editar, e se abrirá o código fonte do seu template.


Dentro da caixa de códigos, dê um ctrl+f, e na pequena barra superior direta de pesquisa que se abriu, procure por

]]></b:skin> Acima desta tag, cole o código a seguir:



Logo após colocar o código de estilo css, vamos colocar o script: Ainda dentro da sua caixa de códigos, procure por </head>, e logo acima desta tag, cole o código a seguir:





Nesta etapa, é possível editar a largura e altura dos blocos, o número de caracteres, etc...

Ainda dentro da sua caixa de códigos, procure por:

<div class="post-body entry-content">

<data:post .body/>

<div style="clear: both;"/>

<!-- clear for photos floats -->

<div>

Ou algo similar ao código, acima, e substitua por este a seguir:




Para substituir o Leia mais, ou Read more, por uma imagem de seta, ou texto personalizado, como imagem, etc... procure por um dos dois códigos, abaixo, ou similares a eles:

<span id='showlink'><a expr:href='data:post.url'>Leia mais

<span id='showlink'><a expr:href='data:post.url'>Read more

E substitua o texto no final do código, "Leia mais" ou "Read more", pelo código abaixo:

<span id='showlink'><a expr:href='data:post.url'>
<img src="URL-DA-SUA-IMAGEM" />

Basta colocar o endereço da sua imagem da web dentro das aspas.

Resumo ("hack") de postagem sem script

Vá até o painel do seu blog, menu, modelo, editar html, dê um
ctrl +f e procure pela tag ]]></b:skin> Escolha o lado que você quer que as mini imagens dos resumos apareçam em seu blog, e
acima desta tag, coloque um dos códigos a seguir:

Imagem para a esquerda



Imagem para a direita



Agora, procure pela tag/condicional/código indicada, abaixo, ou por algo similar:

<data:post.body/>

Substitua pelo seguinte código:



Salve, e visualize!

8 comentários :

  1. Coloca uma imagem de como ficaria c:

    ResponderExcluir
  2. Ok IIIan Felipe iremos inserir uma imagem junto ao artigo para que facilite a visualização colocaremos também demostração.

    Agradecemos o contato. Abraços Andrew Silva do BG

    ResponderExcluir
  3. Olá, dos tutoriais sobre o "leia mais", foi o melhor e mais atual que achei. Porém, eu queria um "leia mais" que não fosse altomático. Se eu coloco o natural do blog, ao clicar no botão, ele abre a página com o #more, só que ela fica bem no topo, e como eu tenho uma barra fixa no topo, o texto fica em baixo dela.
    Nesse 2º tutorial, sem script, vi que os links gerados abrem a página normalmente, sem marcação.
    Então, minha pergunta é: tem como usar o "leia mais" natural do blog, mas ao clicar do link, ele exiba a página inteira sem a marcação #more, o que faz a página abrir a partir da onde o texto parou?
    Obrigado.

    ResponderExcluir
    Respostas
    1. Oi, já descobri,
      é só remover o #more do trecho expr:href='data:post.url + "#more"'.
      Mas obrigado de qualquer jeito.

      Excluir
  4. estou com problema em paginas extras tipo aquele /p/link.htm

    ResponderExcluir
    Respostas
    1. Preciso saber exatamente qual é o seu problema para poder ajudar. Abraços...

      Excluir
  5. se tivesse algumas imagens ilustrativa de como ia fica, o post ficaria mais interessante.

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.