14/12/2014

3 Modelos de Leia Mais

Oi gente,gostaram da minha nova layout?? Trouxe hoje para vocês 3 modelos de leia mais feito pelo boguito Sweet of Cherry para vocês.
Vamos lá!


Vá em Modelo>> Editar HTML>> Aperte Ctrl+F e procure por:

]]></b:skin>

-

Acima dele cole o código do modelo que você escolheu

1º Modelo

  .jump-link  {text-align: right; /* posicionamento do leia mais */margin-top: 15px; /* espaço que fica entre o leia mais e a postagem */margin-bottom: 15px;}.jump-link a {padding:4px 2px 4px 2px;display: inline-block;margin-bottom:3px;margin-left:1px;margin-right:1px;font-size: 8px;color: #fff;font-family: "PF Arma Five";width:70px;text-align: center;background:  #ffcccc;border: 1px solid #ff7766;text-shadow: 1px 1px 0px #ff7766;display: inline-block;border-radius: 0px;-webkit-border-radius: 0px;-moz-border-radius: 0px;}.jump-link a:hover {padding:4px 2px 4px 2px;display: inline-block;margin-bottom:3px;margin-left:1px;margin-right:1px;font-size: 9px;color: #fff;font-family: "PF Arma Five";width:75px;text-align: center;background:#b8cad7;border: 1px solid #639ebc;text-shadow: 1px 1px 0px #639ebc;display: inline-block;border-radius: 0px;-webkit-border-radius: 0px;-moz-border-radius: 0px;transform: rotate(4deg) scale(0.904) skew(1deg) translate(0px);-webkit-transform: rotate(4deg) scale(0.904) skew(1deg) translate(0px);-moz-transform: rotate(4deg) scale(0.904) skew(1deg) translate(0px);-o-transform: rotate(4deg) scale(0.904) skew(1deg) translate(0px);-ms-transform: rotate(4deg) scale(0.904) skew(1deg) translate(0px);}}
-

Mude o que está em negrito

2º Modelo

.jump-link  {text-align: right; /* posicionamento do leia mais */margin-top: 15px; /* espaço que fica entre o leia mais e a postagem */margin-bottom: 15px;}.jump-link a {padding: 4px;color: #fff ; /* cor do texto */background: #ffcccc; /* cor do fundo */font-family: arial; /* tipo de letra */box-shadow: inset 0 0 2px #eee, 0 0 2px #ccc;  /*cor da borda*/-moz-border-radius:  1px; /* bordas arredondas */-webkit-border-radius:  3px;  /* bordas arredondas */border-radius: 3px;  /* bordas arredondas */}.jump-link a:hover {padding: 6px;margin:10px;Color: #fff; /* cor do texto no hover */Background: #b8cad7; /* cor do fundo no hover */-webkit-transition-duration: .90s;}
-
3º Modelo



.jump-link a {color: #fff;}.jump-link {font-family: silkscreen;font-size: 8px;padding: 3px;margin-bottom: 10px;width: 99%;line-height: 15px;background: #ffa5ad;border: solid 1px #ff8690;text-shadow: #ff8690 0px 1px 1px;text-align: center;border-radius: 0px;transition: 0.6s;}.jump-link:hover {-webkit-transition-duration: .90s;background-color: #b8cad7;border: 1px solid #639ebc;}
-

Mude o que está em negrito
Pronto!

2 comentários:

  1. Amei seu layout sabia, tuto bem explicado??? Sem querer ser pidona hahaha você pode postar essas setinhas de postagens mais recentes, inicio e proximas postagens? ACHEI muito fofo, bjus da Isa
    http://coroa-doce.blogspot.com.br/

    ResponderExcluir