Link "Leia Mais" com fundo hover

18/07/2012

578ee44b2193073a8625e31b8f5849bf_large

No tutorial de hoje, vou ensinar como colocar o link "leia mais" com fundo hover. Antes de começar, quero dar os devidos créditos ao blog Go Imagine e ao Sweet Cherry pelos códigos. Ficará assim:

Imagem do blog Go Imagine

1) Vá no Painel do Blogger > Modelo > Editar HTML > Ctrl + F e procure por:

]]></b:skin>

2) Cole o código abaixo acima dele:

.jump-link{
float: right; /* no lado direito ou esquerdo, pode mudar para left */
background-color: #FF80FF; /* cor do fundo */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento emcima */
font-size: 10pt; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: center; /* alinhamento do texto */
width: 100px; /* largura do fundo */
opacity: 0.7; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração da volta do hover */
border-radius: 20px;
}

.jump-link:hover{
background-color: #CFD9F6; /* cor do fundo com o mouse em cima */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento em cima */
color: #000000; /* cor da fonte */
width: 100px; /*largura do fundo com  o mouse em cima */
opacity: 1.0; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração do hover */
text-decoration: none; /* sem sublinhado, negrito, itálico ou tachado */
}

3) Faça as alterações necessárias e salve.

20 comentários:

  1. Olá querida, tudo bem ?
    Está rolando uma seleção lá no blog para a nova colaboradora. Convido você e suas leitoras a participarem, para saber mais clique AQUI.
    ADORO SEUS TUTORIAIS !

    Beijos

    ResponderExcluir
  2. ja tinha visto esse efeito em um blog, achei bem legal.
    é fácil de fazer até né..

    http://blogportalteen.blogspot.com.br/

    ResponderExcluir
  3. não uso mais imagens no meu lei mais :s
    -xoxo

    http://s2juuh.blogspot.com.br/

    ResponderExcluir
  4. AAh, esse tutorial é muito bom! Sempre é bom dar um efeitinho diferente no leia mais, para 'chamar' os leitores né?! rsrsrs

    Beeijo
    www.blogmymemories.com

    ResponderExcluir
  5. Não sabia desse efeito, deve ficar lindo!

    Quero te convidar para particpar do sorteio que está acontecendo no meu blog do um colar e par de brincos mega lindos! Participe!

    Beijos,
    Paraíso de Menina

    ResponderExcluir
  6. Adorei a dica !!!

    Beijinho =*
    http://meucontatoimediato.blogspot.com.br/

    ResponderExcluir
  7. Oi flor.
    Bem legal o tuto, o efeito é lindo !
    Falando em lindo, seu blog está um show ! Tem um tempinho que não passo aqui nerh hihi
    Beijos sz'
    www.jeitinhofemininoblog.com

    ResponderExcluir
  8. Parece ser bem facinho! Amei o tutorial!
    Tenha uma ótima noite!
    Super beijos... Tety
    bloguedatety.blogspot.com

    ResponderExcluir
  9. Já conhecia este tutorial e é super fácil de se fazer mesmo, amei!!

    KEEP CALM AND VISIT
    www.estiloatrevidos.com
    @estiloatrevidos

    ResponderExcluir
  10. Amei o tutorial e o resultado!
    Beijinhos.
    http://estilosaefeminina.blogspot.com.br

    ResponderExcluir
  11. O efeito fica bem legal e o tutorial é super fácil de seguir :D
    Xiricutico.blogspot.com

    ResponderExcluir
  12. Tuto bem bacana!
    http://vitrola3000.blogspot.com.br/

    ResponderExcluir
  13. Oii linda!
    Valeu por colocar a parceria! Sucesso hein!

    Bjooks ;)
    curte? http://www.facebook.com/pages/Blog-Capricha-no-Brilho/262495230453267#!/pages/Blog-Capricha-no-Brilho/262495230453267

    ResponderExcluir
  14. Já favoritei, estava procurando esse tuto!

    Beijos♥

    carismaticaoficial.blogspot.com

    ResponderExcluir
  15. Gosteii, mas não consegui faze no meu blog ://, bjoo ja to seguindo aqui segue o meu??

    allfashion-md.blogspot.com.br

    ResponderExcluir
  16. O efeito é bem legal !
    tem post novo lá

    http://feminilidadesemlimites.blogspot.com.br/

    beijos

    ResponderExcluir
  17. Oi! Flor, Nossa é bem fácil de fazer mesmo né ? E mega fácil fica bem fofinho o leia mais com hover ! Só não faço o tutorial lá no blog por que o meu leia mais não dá /: E uma imagem com um caderno do lado ai não dá /: Mais quando for mudar eu coloco, Já até favoritei =) Vi seu link no Bomba de Glitter o nome me chamou atenção e vim visitar:: E dei sorte por que eu amei teu blog. Nossa ele é show muito bom mesmo, sério de coração parabéns você tem um talento que só Deus mesmo viu ? Beijos flor estou seguindo aqui será que poderia retribuir ?

    www.interligada-i.blogspot.com

    ResponderExcluir