domingo, 6 de setembro de 2009

Como exibir apenas um trecho das postagens no Blogger

Este tutorial está obsoleto. Veja o novo: Como usar o recurso Jump Break do Blogger.
Resumo de uma postagem

Exibir apenas um resumo ou trecho das postagens na página principal permite exibir um maior número de postagens sem deixar a página enorme, permitindo o leitor achar e ler o que procura, mais facilmente. Neste tutorial, irei explicar como fazer isso e adicionar um link “Ler mais…”, no Blogger.

Vá para a área de edição HTML (Layout -> Editar HTML).

Layout -> HTML

Marque a caixa de seleção “Expandir modelos de widgets”.

“Expandir modelos de widgets”

Procure a seguinte linha de código:

]]></b:skin>

</head>
<body>

E substitua pelo seguinte:

]]></b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <style type='text/css'>
    .post-inteiro { display: none }
  </style>
<b:else/>
  <style type='text/css'>
    .post-inteiro { display: block }
  </style>
</b:if>

</head>
<body>

Agora procure a seguinte linha de código:

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

E logo abaixo, adicione:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <data:post.body/><a expr:href='data:post.url'>Ler mais...</a>
</b:if>

Ficará assim:

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

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <data:post.body/><a expr:href='data:post.url'>Ler mais...</a>
</b:if>

Você pode substituir “Ler mais...” por outra coisa que quiser, ou simplesmente remover.

Agora, quando for criar uma postagem, crie uma introdução e, em seguida, coloque todo o conteúdo da postagem, com exceção da introdução, dentro de uma <div> de classe .post-inteiro. Por exemplo:

Aqui vai a introdução da postagem.
<div class="post-inteiro">Aqui vai o resto da postagem.</div>

Postagens relacionadas

1 comentários:

Ítalo disse...

Boa! Gostei do novo tutorial também!

Postar um comentário