Personalizar o link leia mais

|
404158_385809148120185_1250220036_n_large
Olá! Resolvi trazer um tutorial depois de tanto tempo sem postar um. Eu já mostrei aqui como colocar uma imagem no lugar do link leia mais, mas existe outra forma de personalizar esse link tão importante em nossos blogs. Com este tutorial, você poderá mudar a cor, fonte, e até colocar uma imagem de fundo. Confira!

Antes do tutorial, queria dar alguns recados para vocês. Devem ter percebido que não tenho postado com muita frequência não é? Isso é resultado da combinação Pouco tempo + Internet lenta + livro viciante. Meu tempo já é pouco, aí a internet me faz demorar muito para postar e ás vezes perco a noção do tempo lendo um livro incrível que assim que eu terminar de ler vai ser assunto de resenha aqui.

Minha solução para não deixá-los sem post: Programar as postagens. Eu não gosto de fazer isso, mas vi que vocês estão reclamando da minha ausência, então o farei. O único problema é que responderei menos comentários ainda, mas prometo que vou ler todos e responder os que eu puder.
Agora vamos ao assunto principal:

Tutorial
Vá no modelo HTML do seu blog, e procure pelo seguinte código: ]]></b:skin>
Cole logo acima, o seguinte código:
.jump-link {
float: right; /*Escolha para ficar alinhado á direita (right) ou esquerda (left)*/
line-height: 18px; /*Altura da linha, mude de acordo com o tamanho da fonte*/
background: url('link-da-imagem-de-fundo') no-repeat;
width: 200px; /*Largura da imagem*/
height: 32px;/*Altura da imagem*/
margin-right: -20px; /*Margem direita*/
margin-bottom: 30px; /*Margem inferior*/
padding-left: 0px; /*Ajuste para posicionar o texto*/
padding-right: 0px; /*Ajuste para posicionar o texto*/
}
.jump-link a {
font-family: Arial;
font-size: 14px;
font-weight: normal;}
.jump-link a:hover {
color: #000;
text-decoration: none;}

Entendendo
As partes do código que estão em negrito são importantes para alinhar a imagem que você usar no fundo. As margin right e bottom vão determinar a posição do link como um todo, puxando mais para a direita e colocando um espaço abaixo dele. Já os padding right e left vão ajudar a alinhar o texto dentro da imagem. Basta modificar os valores para ver a diferença que eles fazem, e logo você entenderá :)

Extra
Como bônus, trouxe algumas imagens para vocês usarem como fundo. Creditem tanto se usarem as imagens, como só o tutorial.
jump-link-cb-1jump-link-cb-2jump-link-cb-3jump-link-cb-4jump-link-cb-5jump-link-cb-6jump-link-cb-7



Espero que tenha sido útil para vocês, Kissus!


86 comentários

  1. Respostas
    1. ¬¬ não vai começar essa coisa de primeiro, segundo aqui também não né?

      Excluir
    2. Só podia ser orkuteiro.

      Excluir
    3. #Desenterrando... Isso mesmo...Que coisa mais Orkut "First" Affs

      Excluir
  2. Ótimo tutorial Liah, ótimo como sempre!
    Vaish, internet lenta é fogo mesmo... Ás vezes a minha fica tão lenta que nem a página do google abre =w='

    Quero saber qual é o livro que estás á ler! Deve ser ótimo *O*
    Bjos <3

    http://onigiriwarai.blogspot.com/

    ResponderExcluir
    Respostas
    1. Aika, o simples ato de limpar o cache já deixa o computador mais rápido. Quando o cache passa de 500MB já começa a complicar. Instale o CCleanner ou outro de sua preferência e sinta a diferença. Faça também uma desfragmentação de disco, pelo menos uma vez por mês. Talvez você já faça isso e é mesmo a internet a "marvada". Grande abraço!

      Excluir
    2. Obrigado Gilmar! O cachê estava chegando á 2Gigabytes, se não me engano. Eu uso o CCleanner, mas ás vezes eu me esqueço e bate aquela preguiça .. E o computador daqui tá lento por ser meio velho mesmo. Mas obrigada mesmo assim :3

      Excluir
    3. Fácil coloca em configurações, limpar dados e cookies e coloca limpar tudo ou só seleciona o cache

      Excluir
  3. Útil ? foi mais do que util kkk- ameeei demais o tutorial, nossa que saudades dos seus posts, não some não hein ?

    siteiloveit.blogspot.pt
    espero sua visita :)

    ResponderExcluir
  4. Amei, sempre quis saber como se fazia isso. >.<
    Favoritei *u*

    ResponderExcluir
  5. Nossa, adorei o tutorial! Super útil.

    Kissus,
    waverlyplace.tk

    ResponderExcluir
  6. Amei o tuto.Vou usar no lay que estou fazendo.
    Original Girls

    ResponderExcluir
  7. Ameeeeeeei, simplesmente divino tava quase morrendo atrás desse tutorial, obrigado Liah *-*

    ResponderExcluir
  8. Gostei *-* vou ver se eu consigo fazer lá no blog.
    A programação de postagens não é má ideia não, tô fazendo isso lá no blog, por não ter como usar a internet frequentemente.
    Beijo!
    Elfa do PhotoScape

    ResponderExcluir
  9. Que saudades de seus tutorais lia *_____________* amei esse! Vou usar no próximo Layout!]

    californiadreams2.blogspot.com.br

    ResponderExcluir
  10. Nossa, Liah no seu outro layout eu reparava no "Continue Lendo" e tentava adivinhar como você fazia aqui, e agora já tenho a resposta (acho)
    Amei o tuto e acho que foi usá-lo no meu próximo lay.
    Está rolando um sorteio de uma paleta lá no blog, participa?
    Link:http://modaetutorial.blogspot.com.br/2012/11/sorteio-paleta-macrilan-em-parceria-com.html
    Beijos

    ResponderExcluir
  11. tentei usar, mas não foi...fiz td direitinho =\


    http://facebook.com/brogandome/
    http://brogandome.blogspot.com/
    http://saorimonroecobain.tumblr.com
    @carolposeidon

    ResponderExcluir
  12. Tava nececitando desse tutorial. Flor. Aceita afiliação? (blog no perfil)

    ResponderExcluir
  13. Meu layout tá quase ficando pronto.Então tá faltando alguns ajustes como esse e muitos outros.Depois deixo o link dele aqui

    ResponderExcluir
  14. Eu adorei o Tutorial Liah, vou usar no meu próximo Layou ^^

    Estou esperando você la no meu blog♥

    Crazy Girl || Clique no meu Perfil para Visitar ~

    ResponderExcluir
  15. Ah, Liaah , eu queria pedir que você ensinasse como fazer esse menu tipo o seu, eu achei lindo !! Ensina ?? *u*

    ResponderExcluir
  16. Liah,que saudades de seus tutos!Beijos ótimo tuto!

    ResponderExcluir
  17. Adorei o tuto!!! Kissus!!
    pqngarota.tk

    ResponderExcluir
  18. awn, eu tava procurando esse tuto pro meu novo layout ><
    ah, eu quero a continuação daquele texto que você postou ): muito perfeito, haha
    Beijos linda :*

    capuccinoeacetona.blogspot.com

    ResponderExcluir
  19. Não sabia personalizar o jump link desse jeito, que bonito que fica!
    Liah, eu não reclamei da sua ausência, porém fiquei com saudades e preocupada me perguntando se você estava começando a desistir. Eu visito aqui todos os dias, mais de uma vez, eu amo o CB demais. E sei como é ler livros viciantes, você perde a noção do tempo.
    Beijos!
    CherryCupcaskull.blogspot.com

    ResponderExcluir
  20. muito bom e as imagens para usar no leia mais sao lindas. bjs

    ResponderExcluir
  21. Que lindo o tutorial, e o resultado é perfeito *-*
    Amei Liah.
    Beijo;
    semuser.blogspot.com

    ResponderExcluir
  22. Como eu adoro os seus tutoriais! me tornei fã desse blog maravilhoso! Obrigada pelas dicas! bjss

    http://www.rosanautas.com/

    ResponderExcluir
  23. Gostei muito do tutorial! E as imagens como fundo então... nem se fala.
    bj grande gata
    lovingmay.blogspot.com

    ResponderExcluir
  24. Ameii o tuto, muito legal. Visita e segue meu blog por favor ? brigada.

    teen-fashionmodas.blogspot.com

    ResponderExcluir
  25. Ótimo tutorial e ótimas imagens!
    blogthistime.blogspot.com

    ResponderExcluir
  26. oi linda que ser postadora no meu blog,eu to precisando muito de auguem pra me ajudar com as postagens e eu pensei se você pudesse querer e eu to aqui perguntando se você gostaria de fazer parte da equipe do meu blog.

    http://atrevidasnocapricho-oficial.blogspot.com.br/

    se você quiser me manda o seu E-mail

    ResponderExcluir
  27. Que lindas as imagens *-* Vou usar no meu próximo lay >.<
    umadoceimperfeicao.blogspot.com

    ResponderExcluir
  28. Liah, teus tutoriais são perfeitos! Estava mesmo precisando dessa dica!

    blog-sweetpoison | blogspot

    ResponderExcluir
  29. MEU DEEEEEEEUS COMO O LAYOUT DAQUI ESTÁ LINDO! FAZ TEMPO QUE NÃO VISITO AQUI; Criei recente um blog com uns amigos, sobre livros, resenhas, dicas, debates e tal. ficaria feliz se fizesse uma visita! *-* Blog: Literamore

    ResponderExcluir
  30. Caramba Adália, que massa o tutorial! Parabéns ♥

    Poxa gata, esqueceu que eu existo? Não visita mais, comento faz algumas postagens e você não retribui... )=

    Beijos!

    Sugar Dance ♥ (clique no perfil)

    ResponderExcluir
  31. Amei, deu para entender certinho ! Amei tambe o novo lay, ficou maravilhoso !

    http://mustacheofteens.blogspot

    Esse blog tambem é novo e superfofo =>

    http://pensando-em-mais-rabiscos.blogspot.com.br S2

    ResponderExcluir
  32. Liah, estão plagiando o Cherry Bomb! Olha esse post do blog Candy Town com mais informações e até uma campanha contra:
    http://candytown-blog.blogspot.com.br/2012/11/campanha-todos-contra-o-plagio.html

    ResponderExcluir
  33. adoreeei o tuto ! isso que eu estava precisando ...........

    ResponderExcluir
  34. Ótimo tuto! *u*
    Kisses

    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  35. Pessoal, só tem um pequeno errinho, na parte da URL DA IMAGEM, AO INVÉ DE APENAS UMA ASPA (') É NECESSÁRIO DUAS (") TANTO NO COMEÇO DA URL QUANTO NO FIM; BEIJOOS

    ResponderExcluir
  36. ah que chato, só o meu que não dá certo, eu fiz certinho, alguém ai pode me ajudar?
    Email:
    janete-gm2011@hotmail.com
    Blog:
    http://sweet--thing.blogspot.com.br/

    ResponderExcluir
  37. Sempre caprichando !!
    Ameii!

    ResponderExcluir
  38. Caraaca, esse blog é sempre divo *o*
    Ameei demais !

    http://love-you-and-me-love.blogspot.com.br/

    ResponderExcluir
  39. Não sei mecher com html mas to tentando. adorei diiimaaaaais a dica !
    Antes de terminar o comentário, queria te pedir um favor. Eu tenho meu blog(sobre maquiagem, unhas e afins) a mais ou menos 4 meses, e eu amo ele, amo escrever nele, acho que eu sou outra pessoa depois da criação dele. Mas muitas coisas estão em desanimando, ja publiquei ele muito, mais muito nas redes sociais, e ninguém liga.Eu tenho certeza que meu conteúdo está legal, estou fazendo de tudo pra melhora-lo cada dia mais,para cativar minhas leitoras.Ja pensei em fechá-lo,mas é tanto amor por aquele cantinho, que eu não consigo rs. Sem embromar mais eu quero te pedir para você dar uma visitada, comentar algum post, e se poder segui-lo.Eu tenho certeza que você sabe como é gratificante você olhar e ver que tem um comentário lá,isso é muito importante. Obrigada por ler,estou muito grata.UmBeijo Enorme, e muito sucesso nesse seu blog lindo viu?
    tocadechocolate.blogspot.com

    ResponderExcluir
  40. Adorei o Tuto. . e a meia as faixinyas. .
    vou usar e já coloquei os créditos
    adoro pegar tuto do seu blog^^
    poderia seguir meu bloginyo. . .ú ù

    I love you,I hate you
    i-love-you--i-hate-you.blogspot.com.br/

    ResponderExcluir
  41. Ei será que você poderia me dar uma supeeeeeerrr ajuda,eu sou iniciante em fazer blogs e eu fui mexer nesses codigos HTML e fiz uns rolos lá,eu arrumei um pouco mas eu acho que eu estou precisando de umas aulinhas.
    Será que você poderia fazer um tuto ensinando a fazer layouts,codigos HTML,template,tipo o seu modelo antigo.Por favor.

    ResponderExcluir
  42. As imagens para usar no leia mais são D+D+.
    Muito LINDO!

    ResponderExcluir
  43. aí meu Deus! era isso que eu queria, eu queria um leia mais diferente, amei esse! irei usar sim no layout que estou fazendo só que hoje acho que não vai dar pq eu coloco o link no html aí quando vou salvar as configurações fica carregando e nunca que salva dá uma raiva tentei uma pancada de códigos e toda vez que ia salvar dava nisso ¬¬ raiva danada, amei o tuto! super útil

    ResponderExcluir
  44. Blog novo, por favor seeg ? http://cr4zy-world.blogspot.com.br/

    ResponderExcluir
  45. Adorei o tutorial!! as imagens de fundo para o leia mais são muito lindas, obg Liah pelo tutorial, gostei muito :)

    ResponderExcluir
  46. Salvou o design do meu blog Liah, parabéns!

    Beijos, xoxo
    garota-unbroken.blogspot.com

    ResponderExcluir
  47. Sou horrivel mexendo com html, mas ainda sim vou tentar ver se eu consigo. Obrigada pelo post Liah !

    ResponderExcluir
  48. Liah,obrigado por me ajudar. Já dei seus créditos no meu blog,beijos feliz natal, e um prospero ano novo!

    http://rabiscos-em-paris.blogspot.com.br/

    ResponderExcluir
  49. No meu não pegou... pena! Obrigada!

    ResponderExcluir
  50. Help me, como vou colocar o fundo a imagem o bonus que você colocou?

    ResponderExcluir
  51. Oi Liahdalia (liah/adalia) vou te chamar assim ok?

    Tentei botar mais não co segui acho que é porque ñ botei o tamanho da letra certa :( mas tudo bem, eu continuo com as minhas letras (risos)...

    Bjusss (o_o)

    ResponderExcluir
  52. boom, pelo fato de eu não saber mecher com html , não consegui mais to tentando =D

    http://thiings-of-girlls.blogspot.com.br/

    ResponderExcluir
  53. A imagem não aparece no meu o que faço???

    ResponderExcluir
  54. oi estou precisando da sua ajuda não entendi direito :S

    ResponderExcluir
  55. Adorei !

    https://www.facebook.com/MaryMundiMix

    www.marymundimix.blogspot.com

    ResponderExcluir
  56. Não deu certo no meu, eu fiz tudo direito, mas não consegui. :/

    ResponderExcluir
  57. Tava Dando Uns Bugs, Mas Consegui,

    Tive Que Modificar o Codigo html do Template Pra Dar Certo.

    Olha: http://baixaogratis.blogspot.com.br

    ResponderExcluir
  58. Nossa o meu não Funcionou mais o Blog está maravilhoso parabéns Liah!!

    ResponderExcluir
  59. Ótimo post! Ajudou muito! Peguei o molde de lei mais ok? Beijos

    ResponderExcluir
  60. Lindooo post! Seu blog me ajuda muiitoo... Beijos

    ResponderExcluir
  61. No meu não funcionou! !:\

    http://adreamygirll.blogspot.com.br/

    ResponderExcluir
  62. Oi, o tutorial, está ótimo mas, tem um pequeno problema, esse problema é que eu fui tentar fazer isso, mas logo no início não deu, eu fui ver o HTML, e eu fiquei procurando por ]]> mas, não tinha esse código, só tinha o código porém, com esse ]]> não, e eu achei arriscado fazer com esse fato, ou é esse o código mesmo? Grata por uma resposta.

    ResponderExcluir
  63. Liah Peguei a Ultima Plaquinha, Bjs Adorei Seu Blog *----*
    http://quase-anjos-o-melho.blogspot.com.br

    ResponderExcluir
  64. Amei as faixinhas, pena que nenhuma combinou com o meu blog! :(
    http://caminhadaliteraria.blogspot.com.br/

    ResponderExcluir
  65. Olá! Muito útil seu tutorial! Só não conseguir visualizar as suas imagens modelo =(

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...