quarta-feira, 9 de setembro de 2009

Hack Leia mais nativo no Blogger: Jump Breaks!


Podem dar adeus aos hacks Leia Mais que pipocam pela Internet. Agora há pouco, o Blogger anunciou essa nova funcionalidade  no Blogger Buzz: Jump Breaks!
Com mais essa nova funcionalidade, o Blogger insere automaticamente o link Leia Mais (Read More) aonde você quiser nas postagens em seu blog.

Para ter acesso, deve-se ir ao novo editor de postagem, que pode ser acessado no Blogger in Draft ou habilitando nas configurações do seu blog. É só clicar no ícone "Insert jump break" e ele será inserido na posição onde estiver o cursor:


Caso você não use o novo editor de postagens, vá no modo Editar HTML e coloque a tag
<!-- more -->
onde você quiser no seu post.

Para mudar o texto "Read More", vá em Lay - out >> Elementos de página >> Clique em Editar nas Postagens no blog e mude para o texto de sua preferência:

 

Essa nova funcionalidade faz parte dos presentes que o Blogger oferece aos seus usuários, por ocasião de seu aniversário.

Atualização:

Em templates não nativos do Blogger, deve-se manualmente incluir a condicional. O processo é bem simples:

1) Vá em Painel de controle >> Lay-out >> Editar HTML e clique em Expandir modelos de widget.(Não esqueça de fazer antes um backup de seu template caso dê algo errado)

2) Procure por essa linha:
<div class='post-footer'>
3) Imediatamente cole o código abaixo antes dessa linha:
<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>  
      </div>
    </b:if>
4) Visualize para ver se tudo está correto e salve.

Pronto, a funcionalidade Jump Breaks está ativa em seu template.

Atualização 10/09

O texto "Read more" por default fica à esquerda, mas no meu template eu usava ele à direita, para obter o mesmo efeito, basta incluir no código da condicional acima a propriedade float:right(destacada em verde), e o código então, fica assim :
<b:if cond='data:post.hasJumpLink'><div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<span style="float:right;" >
<data:post.jumpText/>
</span>
</a></div></b:if>

Atualização 10/09 às 18:00

Passou desapercebido, mas ao observar atentamente uma imagem postada no Blogger Buzz, vê-se claramente que as páginas estáticas serão anunciadas em breve, e vejam o porque:

Traduzindo o texto: "Você já quis um link para a uma simples página "About" em seu blog? Ou talvez você quisesse uma página "Contact us" já nativo no template de seu blog? Bem..."

O que temos aí é o começo de um post que vai ser publicado no Blogger Buzz sobre o anúncio das páginas estáticas! Vamos aguardar para ver!

Atualização 11/09

Há um bug no Blogger que faz com que a sidebar da direita deslize para baixo na inserção do Jump Break. A solução é bem simples: É só fechar as divs do post antes de inserir a funcionalidade.

Eu costumo justificar meus textos, e isso insere uma tag div nos mesmos.

Então deve-se justificar no resumo do post, insiro o jump break e justificar no restante do post. O mesmo vale para outras formatações da toolbar do editor de post.

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google