23 de nov. de 2013

Personalizando o leia mais sem imagem


Quem tá feliz levanta a mão!!  \o/
Espero que não seja só eu que levante a mão heim...

Gente, o post de hoje vai ser sobre como personalizar o leia mais sem imagem.
O resultado fica show (da para ver que eu curto, porque aqui no blog é assim rsrs).
O  tutorial em si é pequeninho mas eu vou explicar todos os detalhes o que pode deixar o post gigante...^^
Não reparem,ok?

Aviso: é sempre bom baixar seu template antes de aplicar tutoriais

Vá em Design, e em Editar HTML, e procure por: ]]></b:skin>

Cole esse código em cima da tag encontrada:



.jump-link  {
text-align:  Right; /* Lugar do Leia Mais */
margin-top: 10px; /*  O espaço entre o Leia mais e a postagem */
margin-left: 100px; /* O espaço entre o Leia mais e a postagem */
}
.jump-link a {
padding: 5px;
color: #fff; /* Cor da Letra */
background: #ac9485; /* Cor do fundo */
font-family: Verdana; /* Tipo de Letra */
font-size: 20px; /* Tamanho da fonte */
box-shadow: 0px 0px 5px #796d62; /* A sombra */
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:5px;
border-top-right-radius:0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:0px;
margin-left: 100px;
margin-right: -20px;
}




Personalizando

Agora personalize o código seguindo as instruções:


text-align:  Right; /* Lugar do Leia Mais */

significa que o leia mais ficará a direita.
Troque RIGHT por LEFT caso queira ele á esquerda.



margin-top: 10px; /*  O espaço entre o Leia mais e a postagem */
margin-left: 100px; /* O espaço entre o Leia mais e a postagem */


É a posição do leia mais em relação do leia mais em relação ao post 
(mude os números para move-lo)


-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:5px;
border-top-right-radius:0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:0px;


é o código da borda. Se você quer a borda retangular apague esse código todo mas se você quer uma borda diferente substitua o código original por um que você pode fazer nesse site.



As demais coisas que eu não expliquei é porque ou esta bem explicado no código ou porque não precisa mexer.

18 comentários:

  1. Adorei o tuto! Lindo blog, seguindo, segue de volta? Bjs amora *-*
    http://mycuteplacee.blogspot.com

    ResponderExcluir
  2. Adoreeei o tutorial
    Ameeei o blog, seguindo aqui
    ♥ Bjuus | sweetworldbr.blogspot.com

    ResponderExcluir
  3. Bem legal esse tuto!Bem explicadinho!
    Kisses.

    ester-macedo.blogspot.com

    ResponderExcluir
  4. Lindo seu blog e amei o tuto seguindo aqui.


    ~Beijos e se puder seguir

    crazy--designer.blogspot.com.br

    ResponderExcluir
  5. ótimo tutu! adorei o resultado haha' ^^
    Bjoos Nhaaack --> My Candy Space (acesse pelo meu perfil)

    ResponderExcluir
  6. Adorei,o meu é personalizado assim ^^
    http://catchingfeelings-love.blogspot.com.br/

    ResponderExcluir
  7. Bem legal,a cara do seu blog :)

    Te espero no meu blog,se não segue ainda,por favor siga?
    E inscreva-se no meu canal de videos :)

    http://garotaunica10.blogspot.com.br

    http://www.youtube.com/GarotaUnicaBlog

    Beijos :)

    ResponderExcluir
  8. Amei o tutorial fica lindo mesmo sem imagem, aceita afiliação? Beijos

    amantesdemoda.blogspot.com.br

    ResponderExcluir
  9. Amei o post me ajudou muito , eu tenho um blog de moda passei um tempo sem usa , estou vontando a usa-lo se der minha linda dá uma visitinha la ?

    Aki o link do blog
    http://blog-princesadescolada.blogspot.com.br/

    ResponderExcluir
  10. Adorei a postagem, fico feliz que tenha voltado.

    ResponderExcluir

Deixe o link do seu blog, retribuo a visita ;)