clique aqui


BLOGS QUE ADMIRO ACIMA E OUTROS LINKS ABAIXO

06/11/2012

Tutorial: Personalizando o "Leia Mais"


 Hayoo..hayoo como vão vocês meus doces de coco? Trago mais um tutorial para vocês, os creditos vão para o blog/site Kawaii World. O tutorial de hoje e como personalizar o "Leia Mais" em forma de um botão simples, todo mundo já sabe como colocar uma imagem mas achei esse bem diferente.


Vá em seu HTML e procure pelo: ]]></b:skin>

Assim que o achar acima dele coloque esse codigo:

.jump-link  {
text-align: left; /* posicionamento do leia mais */
margin-top: 5px; /* espaço que fica entre o leia mais e a postagem */
}
.jump-link a {
padding: 4px; /*acolchoamento entre o fundo e o texto */
color: #000000; /* cor do texto */
background: #dfdfdf; /* cor do fundo */
font-family: verdana; /* tipo de letra */
-moz-border-radius:  6px; /* bordas arredondas */
-webkit-border-radius:  6px;  /* bordas arredondas */
border-radius: 6px;  /* bordas arredondas */
}



20 comentários:

  1. Adorei o tuto, consegui fazer e deu certooo! Conheci seu blog hj e ja me apaixonei! Amei demais!
    Aceita afiliação? Ja seguindo aqui!
    Beijooooooks!
    http://moda-teensworld.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ohayoo Lari, fico contente que tenha lhe ajudado. Aceito sim afiliação irei lhe colocar nos meus afiliados, e sigo sim.

      Excluir
  2. muito perfeito fiz outro blog rs mas é só meu Carolina P.
    Aqui → http://loves-colors.blogspot.com.br/

    ResponderExcluir
  3. Não consegui ://. O "leia mais" ficou grudado no post, não sei como arrumar

    ResponderExcluir
    Respostas
    1. Ola Louise desculpe a demora para responder, basta mexer nesta parte é ela que faz a separação dele e do texto das postagens.

      margin-top: 5px; /* espaço que fica entre o leia mais e a postagem */

      Excluir
  4. Gostei, muito util ;)
    Visita lá vai?!
    http://black---cherry.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada :3 faço sim uma visita.

      Excluir
  5. não consegui encontrar esse código no meu html, mesmo usando o ctrl+f, onde mais posso inserir esse código?

    ResponderExcluir
    Respostas
    1. Tem certeza Mari? Ele é um dos códigos principais no blog é mais fácil de achar. Verifique se não colocou espaço antes dele. Mas para adiantar procure por:

      .mobile .tabs-inner .PageList .widget-content .pagelist-arrow {

      e cole abaixo dele.

      Excluir
  6. Ajudou bastante.. Seu blog é lindo..

    Visita? New Moon

    ResponderExcluir
    Respostas
    1. Por nada e obrigada por gostar. :3

      Excluir
  7. Anônimo12/5/14

    Amei o tuto. Era o que eu estava precisando. Bjs
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  8. Amei! Super ajudou. Queria só aumentar a fonte, tem como? rs
    Beijos

    http://coisasdajuuh.blogspot.com.br/

    ResponderExcluir
  9. Amei seu post, fiz e deu tudo certinho *-*
    Mas queria saber como se coloca o LEIA MAIS no centro T^T
    Se puder me ajudar agradeço ^_^
    Vaga para Afiliados ? *-*

    ResponderExcluir
    Respostas
    1. Ao invés de left ou right, escreva center
      Espero ter ajudado.

      Excluir
  10. Oi amooooore!!!
    Amei o post me ajudou demaiissss! (como pode ver, eu amo repetir letras nas palavras, mas tudo bem) Eu estava procurando esse tuto a um tempãooo!
    Gostaria de saber se você aceitaria um pedido de afiliação!
    O link do blog está aí em baixo!
    Kissess!

    vidadanovata.blogspot.com - Vida da Novata

    ResponderExcluir
    Respostas
    1. hihihi tudo bem eu tbm repito bastante, que bom que gostou do tuto. Claro aceito sim vou avisar no seu blog

      Excluir