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. 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

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram