domingo, 28 de outubro de 2012

Como criar e colocar um botão Leia Mais no blog

Salve Salve Penguins, como vão ?

Ter um blog limpo,rápido, e com uma navegação fácil é muito importante para agradar os leitores, quando um post fica grande de mais para ser exibido na página principal,é recomendável usar o Jump Break do blogger para isso.
O Jump Break para quem não sabe,é uma função do blogger para você apenas exibir um link ou imagem escrito "Clique e veja o resto do post", para a pessoa ser redirecionada ao post completo, assim mantendo sua área principal limpa.

Então,hoje vamos encinar como criar um botão Jump Break, e como coloca-lo no blogger

Criando o Botão

Para começar a criar o botão,abra um arquivo do tamanho de sua preferência no Fireworks,e faça um retangulo/base para seu botão. O meu botão tem o tamanho de 200x65 px.


(a parte cinza não é um contorno,apenas saiu no print na área de desenho)

Agora adicione os efeitos,e o contorno do seu botão. Se quiser coloque alguma textura e deixe do jeito que você quer.



Agora para finalizar o botão,coloque alguma imagem e um texto informando que o post ainda não acabou.

Quando terminar,hospede o seu botão em algum lugar e pegue o link dele.




Editando o HTML

Clique em Modelo e, depois em Editar HTML.
Marque a caixa Expandir Modelos de Widget e procure por:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >


Na parte em laranja, substitua por 

<img src='URL_DA_IMAGEM_AQUI'/>

Novamente em laranja, altere URL_DA_IMAGEM_AQUI pela url de sua imagem.

Bom,é isso,qualquer dúvida poste nos comentários, até a próxima.

Nenhum comentário:

Postar um comentário