Designer Brasil!

  • Entries
  • Comments

  • HOME
  • Parceria
  • FAQ

'Continue Lendo' ou 'Leia Mais...'

terça-feira, 30 de setembro de 2008

Este é um dos Hacks para Blogger - Blogspot mais pedidos de todos os tempos: Posts Resumidos na Home Page do Blog, com link de “Continue Lendo” ou “Leia Mais” no final do resumo.



Existem outros hacks que cumprem a mesma função, de diferentes formas; mas depois de vários testes, este é o melhor, na minha opinião. Ele permite que você resuma somente os posts que desejar, como você já deve ter visto por aqui.


Vamos ao Hack! Preste atenção, pois ele está dividido em 3 partes:


I - Configurando o script

II - Modificando o Template

III - Configurando o Editor do Blogger


Na Primeira Parte, você deve escolher entre duas opções: inserir o script diretamente no seu template, ou hospedar o script externamente. Siga somente as instruções para a opção que você escolheu!


A Segunda Parte e a Terceira Parte se aplicam na íntegra à todos os casos, sem importar qual opção você escolheu na Primeira parte.



I - Primeira Parte - Configurando o Script


Devido aos problemas recentes com os scripts dos hacks, vou explicar aqui duas formas de implementar o “Leia Mais”: inserindo o script diretamente no seu template, ou hospedando o script externamente.


1º Opção - Inserindo o script diretamente no seu template


1 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.



2 - Procure a tag </head>.


3 - Copie TODO o código mostrado nesta página e cole-o logo ANTES da tag </head>.



4 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.


Agora, você deve passar à II - Segunda Parte - Modificando o Template


2º Opção - Hospedando o script externamente


Por favor, só escolha esta opção se você tem alguma idéia de como fazer isto. Se este método lhe parecer muito complicado, é melhor optar pela 1º opção, e pronto.


1 - Faça o download do script: clique neste link com o botão direito do mouse, e salve o arquivo LeiaMais.txt no seu computador.



2 - Mude a extensão do arquivo de txt para js, no próprio Notepad. Simplesmente abra o arquivo, selecione “Guardar como” e substitua LeiaMais.txt por LeiaMais.js


3 - Faça o upload do arquivo em sua conta. Uma opção grátis para hospedar seus arquivos é o Google Pages.


4 - Coloque a URL do seu script no seguinte código:



<script src=’Insira aqui a URL do script’ type=’text/javascript’/>


Por exemplo: se eu estivesse hospedando o script na minha conta do Google pages, a URL seria:


<script src=’http://nospheratt.googlepages.com/LeiaMais.js’ type=’text/javascript’/>


5 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.



6 - Procure a tag </head>.


7 - Copie o código do script, com sua URL, e cole-o logo ANTES da tag </head>.


8 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.



Agora, você deve passar à II - Segunda Parte - Modificando o Template


II - Segunda Parte - Modificando o Template


Tanto se você escolheu inserir o script no template, como se preferiu hospedá-lo externamente, deve seguir as seguintes instruções:


1 - Ainda em “Editar HTML”, clique na caixinha “Expandir Modelos de Widgets”


2 - Procure o seguinte trecho de código:



<div class='post-body'>

<p><data:post.body/></p>


3 - Substitua essas duas linhas pelo seguinte código:


<div class='post-body' expr:id='"post-" + data:post.id' >

<b:if cond='data:blog.pageType == "item"'>

<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("post-" + "<data:post.id/>");

</script>

</b:if>


4 - O texto em vermelho - Leia Mais… - pode ser substituído pelo texto de sua preferência.



5 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.


III - Terceira Parte - Configurando o Editor do Blogger


1 - Ainda na sua conta do Blogger, vá até Configurações -> Formatação.


2 - Bem em baixo, Você verá a caixa vazia do Modelo de postagem. Copie e cole as seguintes linhas dentro dessa caixa:



Digite aqui o resumo do post

<span id="fullpost">

Digite aqui o resto do post

</span>


É melhor copiar e colar este código, para não correr o risco de inserir espaços ou caracteres que impediriam o hack de funcionar. Salve as configurações.


3 - Agora, quando você entrar em “Criar Postagem”, a caixa mostrará onde você deve digitar o resumo do post (a parte que você deseja que apareça na Home, antes do link “Leia Mais…”) e onde digitar o resto do post (a parte que aparecerá somente na página do post).



Atenção: as tags <span id="fullpost"> e </span> devem permanecer intactas para que o hack funcione! Antes de publicar seu post, certifique-se de que elas não foram alteradas.


E se eu não quiser resumir um post?


Simplesmente, quando for escrever o post, delete completamente o texto que aparece na caixa do texto da postagem. Não se preocupe; cada vez que você for criar um novo post, o texto que indica onde digitar o resumo e o resto do post reaparecerá.



Você escolhe se quer resumir o post ou não, e o link de Leia Mais só aparecerá nos posts que foram divididos com o <span id=”fullpost”>. Não é genial? :)


Observação: o Ramani avisa no post original do hack que se você clicar no link “Postagens Mais Antigas”, é possível que o link “Leia Mais” apareça mesmo em posts antigos que não foram divididos seguindo o hack. Ele explica que este é um problema conhecido, para o qual ele ainda não encontrou solução.

00:10 | Marcadores: Hacks |

This entry was posted on 00:10 and is filed under Hacks . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

 

0 comentários:

Postar um comentário

Postagem mais recente Postagem mais antiga Página inicial
Assinar: Postar comentários (Atom)


  • Menu

    • Background (1)
    • Busca (2)
    • Colunas (6)
    • Comentários (1)
    • Dicas (6)
    • Feeds (3)
    • Hacks (4)
    • Marcadores (2)
    • Template (3)
    • Tutoriais (7)

    Arquivos

    • setembro 2008 (30)
  • Feeds

    Coloque seu email para receber os posts via email:



    Top Parceiros

    The PS2 Games! IN CDS!

Copyright 2008 | Designer Brasil | Sempre ao seu lado.