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?
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;
}
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.
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.
Adorei o tuto! Lindo blog, seguindo, segue de volta? Bjs amora *-*
ResponderExcluirhttp://mycuteplacee.blogspot.com
seguindo!
ExcluirAdoreeei o tutorial
ResponderExcluirAmeeei o blog, seguindo aqui
♥ Bjuus | sweetworldbr.blogspot.com
seguindo bjos
ExcluirBem legal esse tuto!Bem explicadinho!
ResponderExcluir=D
ExcluirBem legal esse tuto!Bem explicadinho!
ResponderExcluirKisses.
ester-macedo.blogspot.com
Lindo seu blog e amei o tuto seguindo aqui.
ResponderExcluir~Beijos e se puder seguir
crazy--designer.blogspot.com.br
ótimo tutu! adorei o resultado haha' ^^
ResponderExcluirBjoos Nhaaack --> My Candy Space (acesse pelo meu perfil)
Adorei,o meu é personalizado assim ^^
ResponderExcluirhttp://catchingfeelings-love.blogspot.com.br/
Bom gosto! haha
ExcluirBem legal,a cara do seu blog :)
ResponderExcluirTe 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 :)
Amei o tutorial fica lindo mesmo sem imagem, aceita afiliação? Beijos
ResponderExcluiramantesdemoda.blogspot.com.br
Aceito sim!
ExcluirVou te colocar na elite agora mesmo!
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 ?
ResponderExcluirAki o link do blog
http://blog-princesadescolada.blogspot.com.br/
Claro, passo sim!
ExcluirAdorei a postagem, fico feliz que tenha voltado.
ResponderExcluirQue bom que gostou,obrigada!
Excluir