Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

20 outubro 2010

Estilo para o link Leia Mais

Se você costuma usar o resumo nativo do Blogger através do botão Inserir Jump Break, saiba que você pode personalizar a apresentação do link, não só do texto, que pode ser modificado em Elementos de Página (clicando em Editar no quadrado que corresponde a coluna do post):


Você pode também alterar a localização do link, bem como adicionar background, borda e imagens. Para isso, acrescente o seguinte trecho ao código do seu template:

.jump-link{
float:right; // aqui estabeleço que o link aparecerá à direita
margin: 0px 15px 10px 0px; // distância do link para o topo, direita, esquerda e base
font-size:13px; // tamanho da fonte do link
text-indent: 19px; // o quanto o link se afasta ou recua da esquerda
font-weight:normal; // tipo de fonte
padding: 0px 0px; // espaçamento
background: url(link da imagem)  no-repeat center left; // imagem/ícone que aparece à esquerda do link
}

.jump-link a, .jump-link a:visited{color:#0066CC; text-decoration: none; //cor do link em estado normal}

.jump-link a:hover{color:#0066CC; text-decoration: none; // cor do link em estado hover}

Retirei este exemplo do Template Mundo Verde e o resultado pode ser visto aqui.
Você pode optar por não usar um ícone mas criar um botão com bordas arredondadas com uma imagem de fundo, como uso aqui no TNB. Para isso, basta:

.jump-link{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 4px 6px;
float:right;
background: url(link da imagem do bg)  repeat-x;}

O site CSS3 Generator vai te ajudar muito a  gerar os códigos para bordas arredondadas, textos com sombras, sombras em botões entre outros.

Mas Ariane, eu uso nos meus templates aquele resumo automático de postagens. Como faço para personalizar o link?


Bem, o código que eu usei em diversos templates para gerar resumo automático ( e creio que seja o mesmo que a maioria usa ) tem a class #showlink (ou .showlink ) . Então basta dar estilo a esta class e tudo certo. Porém, o interessante é fixar este link no post resumido e não apenas dar um espaço entre o final do resumo e o link. Por exemplo, note o botão comprar neste template em que estou trabalhando:


Aqui usei o resumo automático e o botão comprar nada mais é que o #showlink personalizado. Para fixar ele no canto inferior direito, independente do conteúdo do resumo, é preciso primeiro determinar uma altura fixa para os resumos em .post (estilo para a página inicial apenas, usando a condicional <b:if cond='data:blog.pageType != "item"'> </b:if>), e acrescentar position: relative, assim:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {
position: relative;
height: 250px;
outros estilos....
}
</style>
</b:if>

em #showlink, position:absolute e determine as distâncias para o topo e para a esquerda, em relação ao post:

#showlink{
position: absolute;
top: 210px;
left: 200px;}

Isto vale para posicionar qualquer elemento. Determine position:relative na div principal (div1: post, header-wrapper, etc) e position:absolute no elemento que se pretende posicionar em relação a div1 (div2: #showlink, logo, etc).

É isso :)

Artigos Relacionados

16 comentários:

Kevvin Oliveira disse...

Muito boa a dica Ariane! Adorei =D

SARADOS DO BRASIL disse...
Este comentário foi removido pelo autor.
Ariane disse...

SARADOS coloque no CSS:

h2.date-header {
text-indent:-99999em; height: 0px;}

Petrus disse...

Muito bom o tutorial! Gostaria de saber como utilizar um resumo de postagem do estilo que você usa aqui, com imagens. Você já possui um tutorial assim? Grato pela atenção!

Miguel Corte-Real disse...

Acabei de colocar o código.
Funciona mas o link aparece sobre a linha do final de Post e começo do Footer, já tentei algumas alterações e nada.
Julgo que o gosto do Facebook talvez esteja mal colocado também e impede que o Leia mais fique no lugar certo.
www.negociosangola.blogspot.com

NCFCBR disse...

sou burro , ñ sei fazer nada ._.,
se eu soubesse ficaria perfeito com suas dicas o meu blog (:

Miguel Corte-Real disse...

Ariane, esqueça. Fiz uma alteração radical mudei para o template feminina. Este template é muito bom e como começava a receber críticas por causa da aparência do blog, mudei.
Muito obrigado pelo seu trabalho, voçê vai continuar por perto Ariane ?

Vitor Jacob e Eric Souza disse...

como eu faço para mudar a cor do Leia mais? eu uso o template Oggi e o leia mais está branco [mesma cor do bg e fica invisivel]. ele só aparece quando eu mudo a cor do background de resumo da postagem.

Alonso disse...

O meu não deu...
em que parte do codigo eu substituo??

Ofertas do Dia disse...

O Adsense de meu site ficou estranho quando eu fiz esse tutorial. Ele não desaparece junto com parte do post.

Será que eu coloquei alguma coisa errada?

Anônimo disse...

como que eu coloco uma imagem ao inves de "leia mais" e tals ?
tipo naum consegui nem coloca esse
na onde devo colocar o código no template? que parte?

Jefinho Trindade Borges disse...

Não consigo encontrar o local onde personalizo a apresentação do link. Me ajudeeem

Ebrahim disse...

Onde eu coloco esse codigo você num fala onde colocar

espaço de vinicius disse...

oi ariane eu vi uma postagem igual a essa num blog estão copiando postagens de seu blog.
o blog que copiou as suas postagens foi este:
http://dicasetemplates.blogspot.com/2011/04/estilo-para-o-link-leia-mais.html
da uma olhada la esta exatamente a mesma coisa.

S. disse...

Olá!
Gostaria de saber se há alguma forma de centrar a data das postagens no blog...
Podem me ajudar?

Raquel e Thiago Estácio disse...

onde eu insiro o codigo?

Postar um comentário

Os comentários são moderados.