Link "Leia Mais" com fundo hover

9 de jun. de 2012


Hello babies! Quero começar me desculpando pelo sumiço, to trabalhando bastante no novo layout do blog (que ta ficando muito lindinho modéstia parte s2 ). Para compensar esse tempo todo sem posts vim trazer um tutorial bem rápido, porém pouco conhecido, que fica lindo! Todos aí já estão cansados de leia mais com imagem, admitam. Então hoje vamos aprender a colocar um fundo colorido e com efeito hover. Assim:

Antes de começar o tutorial quero dar os créditos ao blog lindo da Tete, o Sweet Cherry! Ele é nossa fonte de hoje :3 -com algumas alterações minhas, não esqueçam hihi-

Faça o caminho da roça, (como diz a Gizaa) e vá em  Design > Editar HTML > Ctrl+F (na nova interface: Modelo > Editar HTML > Prosseguir > Ctrl+F) E procure por: ]]></b:skin> logo acima cole:

.jump-link{
float: right; /* no lado direito ou esquero, 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 */
}
As instruções estão no código, entre os /* */  é só mudar de acordo com o desejado. 

Obs: - Mude a largura de acordo com o tamanho do seu texto, 100px se encaixa muito bem para "leia mais", se for um maior como "Mais informações »" 110px se ajusta direitinho!

É isso galerê, se usar credite o GI e o SC (:

46 comentários:

  1. Ai, que lindo *-* Nunca tinha visto esse tuto, ficou show ^^
    A Anny e seus tutos perfeitos <3
    #BEIJO s2rita.blogspot.com

    ResponderExcluir
  2. Fica lindo o resultado, amei a dica *-*
    http://themudancas.tk/

    ResponderExcluir
  3. Anny, eu te amo, tu é tudo pra mim, quero te fazer esuqecer esse negócio de forever alone!
    Eu amo você, só quero você, vem pra mim, eu teeee amoooooooo
    Pra sempre vou comentar aqui dizendo isso, porque você é tudo pra essa anony aqui!
    ESSA QUE ESCREVE É PRA SEMPRE QUEM TE AMA S2

    ResponderExcluir
  4. Lindo demais, vou tentar no próx.h
    ttp://cappuccinoeaconta.blogspot.com.br/

    ResponderExcluir
  5. Anny, eu tentei, mas não deu! Não aconteceu NADA ¬¬
    Beijos, s2rita.blogspot.com

    ResponderExcluir
  6. adorei a post muito criatova s2 adorei também o blog estou seguindo se querer visita meu blog e se gostar segui ?www.menina-incrivel.blogspot.com

    ResponderExcluir
  7. Nossa amei o tutu, vou usar.
    amor, só avisando, sabe o menu do blog, sabe aquele tutorial que você usou, então eu peguei, e estou dando os devidos créditos, lá numa das páginas do blog, tem os créditos (se não quiser que eu use, é só falar, )

    beijos
    http://garotamarte.blogspot.com.br/

    ResponderExcluir
  8. Eu não uso a tecnologia do Blogger e sim a do Wordpress,mais achei o tutorial muito legal.Eu adorei o teu blog,tem um otimo conteudo.Bjs
    www.sonhonoblog.wordpress.com

    ResponderExcluir
  9. Anny Adorei o Tutu acho que vou usar.Nunca vi um tutu desse jeito. Beijos modaecia.net.tc

    ResponderExcluir
  10. Adorei, nunca vi o leia mais com hover que show *O* kkk' beijão,http://letsgoficial.blogspot.com.br/

    ResponderExcluir
  11. amei o tutorial!!

    http://editionskatyperrysonhos.blogspot.com.br/2012/06/concurso.html participe valendo um lay exclusivo por mim!

    ResponderExcluir
  12. Amei o tutorial, vou ver se uso no próximo lay.

    Kisses ♥
    www.bloggarotainocente.blogspot.com

    ResponderExcluir
  13. Amei o tutorial *-* Super lindo o efeito. Beijos!

    http://dreamsofagirl-blog.blogspot.com.br/

    ResponderExcluir
  14. Oi flor, estou aqui para dizer que foi criado o blog chamado bora denunciar onde a gente irá denunciar qualquer tipo de plagio bom espero que visite fizemos esse blog em função do bora plagiar beijão http://boradenunciar.blogspot.com.br/

    ResponderExcluir
  15. Amei o tuto!O efeito final é lindo!
    http://balaio-sonhos.blogspot.com

    ResponderExcluir
  16. Ótimo tutorial.

    adorei seu blog

    Eu vendo chaveiros e outras coisinhas que eu mesma faço ^-^
    da uma olhada lá, quem sabe você goste de algo
    ;)

    http://cutekurafuto.blogspot.com.br/

    ResponderExcluir
  17. otimo tutorial!ameei o blog,ele esta no blogrool do meu!bjs
    http://balaio-sonhos.blogspot.com

    ResponderExcluir
  18. Muito bom o tuto!
    É verdade, muita gente cria blog apenas para ser famosa, e acaba fazendo um blog ruim porque não escreve com gosto.
    Kissus e feliz dia dos namorados!
    Cherry Bomb || Fanpage

    ResponderExcluir
    Respostas
    1. Verdade, Liah. Que sorte, Alana! Até a Liah comenta aqui!

      Excluir
  19. Adorei o post ! Que pena que eu não consigo colocar leia mais no meu blog :-( . Estou seguindo!

    sweetgirls-sg.blogspot.com

    ResponderExcluir
  20. Hooy, flor !
    Adorei seu blog, ele eh fofo, demais, criativo, legal, as cores combinam, fala sobre coisas legais, tem um conteudo muito bom...!
    Enfim, me apaixonei *-*
    Quer me ajudar com minha meta de 90 seguidores?
    Se sim, aqui esta meu link:
    http://meublogblogueiro.blogspot.com.br/
    Ahh, e ja estou seguindo :)
    Um beijo e te espero la!

    ResponderExcluir
  21. Anny,otimo tutorial ;D,bem anny queria pedir uma coisa a você.meu blog está precisando de um layout novo.tem como você fazer pra min um novo?Eu queria bem teen do rosa da sua seleção colorida e de um marron bem legal.se poderia fazer?Se não tiver tempo,Eu entendo.
    Bj♥
    @Leetiicia_Lopes
    http://blog-allthelovers.blogspot.com.br/

    ResponderExcluir
  22. Adorei seu blog, muito lindo, amei tudo. Parabéns mesmo, vou sempre estar aqui (:

    ontendency.blogspot.com

    ResponderExcluir
  23. Oii flor,eu indiquei seu blog em uma post! confira lá!
    http://1cerejavermelha.blogspot.com.br/2012/06/blogs-da-semana.html
    Beijinhos! <3

    ResponderExcluir
  24. adorei =0
    e já coloquei no meu
    Emilie Escreve

    ResponderExcluir
  25. Amei esse efeito *u* Estou usando lá no blog, já te creditei ok?

    Kissus ~~> http://blog-letsbehappy.blogspot.com.br/

    ResponderExcluir
  26. Adooreei , vou fazer isto no meu blog !
    Beijos,passa la no meu blog?
    www.paradateen1.blogspot.com !

    ResponderExcluir
  27. Não funciona no meu blog esse tutorial D:
    Ele pega o link leia mais + a parte das postagens relacionadas.

    me-and-myfriends.blogspot.com

    ResponderExcluir
  28. Totalmente perfeito!!! Adorei o tuto *---*
    blogthistime.blogspot.com

    ResponderExcluir
  29. No meu blog não tem nenhum resultado.Que problema vc sugere?

    Beijos

    Jade Marlla

    ResponderExcluir
  30. ain posha, eu ja tentei em varios sites de blog colocar o link ''leia mais'' e eu não consigo faço tudo direitnho e nunca vai, porque sera ? :/

    ResponderExcluir
  31. olá, adorei seu blog!
    tentei colocar o leia mais no meu mas nao consegui = (
    venha nos visitar http://www.lasmuchachasfashion.blogspot.com.br/,
    e tb nossa fanpage https://www.facebook.com/profile.php?id=100004127287788, nós vendemos muitos acessórios lindos!

    ResponderExcluir
  32. Ketelin Natieli Wochner16/11/2012, 09:45

    Oi, adorei o tuto. Já coloquei no meu blog, mas como faço para por "Leia mais" ao invés de "Mais informações" ?

    vanille-vie.blogspot.com.br

    ResponderExcluir
  33. Mais um tuto que eu ameeeei! Estou editando e colocando no meu novo lay, quando terminar colocarei os devidos créditos =]
    Da uma olhadinha depois?
    http://caprichadasbr-oficial.blogspot.com.br/

    ResponderExcluir
  34. Adorei o tuto!vou fazer...Não muda o nome do blog não flor, ta perfeito assim..

    beijokas

    Brigadeironoglitter.tk

    ResponderExcluir
  35. Era o que eu estava procurando. Realmente eu estava enjoando colocar imagem
    Adorei o efeito e já estou usando
    Já coloquei na page de "Créditos" do meu blog
    Obg e abraços
    recantodafadaalice.blogspot.com.br/

    ResponderExcluir
  36. Como faço para por "Leia mais" em vez de "Mais informações" ? :(

    ResponderExcluir
  37. Finalmente consegui! Obrigada!

    ResponderExcluir
  38. No meu não funcionou T.T, mas é pq meu theme adora zoar com a minha cara :C!
    Mas, obrigada!
    Quase 4

    ResponderExcluir
  39. Fiz no meu blog e funcionou ^^

    Anny, queria sugerir um post. É uma dúvida que eu tenho há muito tempo. Quero saber como colocar o hack "leia mais" para abrir o restante do post na página inicial, como se fosse uma postagem estendida, sabe? Eu particularmente não gosto de ter que abrir outra página para ler o post todo. Se você puder postar como fazer isso, eu ficaria muito grata. bjs

    ResponderExcluir
  40. consegui personalizar o "leia mais". No efeito hover eu aumentei a largura, ai quando a pessoa passa o mouse acontece uma animação '-' Mas ainda não estou 100% satisfeito! u.u Vou personalizar mais algumas coisinhas e arrumar a cor...algo nela me incomoda '-'

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.