1.1.14

Leia mais - tuto inventado por mim


#deprimida porque descobri que o Cherry Bomb não terá mais posts

Mais um post: personalizar o leiam mais
Neste caso, será o modelo que uso aqui no blog, onde podem utilizar uma imagem, mas personalizá-la, com hover e colocando onde quiserem - o que fica muito melhor, acho eu. É quase como personalizar e ajustar uma ribbon, sendo que a fonte é personalizada à parte. Ah, eu falei no Cherry Bom porque hoje fui lá, para verificar se eu tinha adaptado este tuto do que lá ensinam - eu já uso faz muito tempo, por isso não me lembrava. Mas sim, é parecidinho com o que lá está. Vamos ver? 

Prévia:


Tutorial:

Procure por:
/b:skin
Acima cole:
.jump-link {
background: url(URLDAIMAGEM) no-repeat;
margin: 10px 0px -7px 250px;width: 200px;
height: 50px;
-webkit-transition-duration: .60s;
}
.jump-link:hover {
background: url(URLDAIMAGEMEMHOVER) no-repeat;
-webkit-transition-duration: .60s;
}
.jump-link a {
width: 200px;
height: 50px;
padding: 30px 0px -30px 30px;font-family: silkscreen;
font-size: 30px;
text-align: center;
color: transparent;}

Ok, agora explicando: 

A fonte, personalizada em "jump-link a", está transparente porque eu já tinha escrito a palavra na imagem, mas se você não escreveu, use alguma cor, nem que seja preto, #cccccc. 

A altura e largura da imagem estão de acordo com a minha, e a margem foi a que eu escolhi para centrar o leia mais. O padding, na última chaveta, também. Altere conforme precisar.

E o background não tem muito que se lhe diga. Você simplesmente tem de criar a sua imagem e substituir e a url, como se faz com uma ribbon ou algo do tipo. Em breve trarei alguns modelos que usam este tutorial, assim já vem tudo ajustado devidamente e basta copiarem e colar.

Ja nee ^^

1 comentário:

  1. woow nunca vi um lay tão lindo na minha vida (*O*)
    li alguns tutoriais seus e vou usá-los no meu lay do dia dos namorados.
    Se quiser visitar meu blog eis aqui o link
    meuladojapones.blogspot.com não sou tão boa quanto você mas faço o que posso hehe
    ja ne!

    ResponderEliminar