Afiliados

6.9.13

Big Tutorial: Leia Mais e Data personalizados

Bom dia/Boa Tarde/Boa Noite -q~~
Ontem eu acordei com dor de garganta, dor de cabeça e febre, mas olha que bom, estou na semana de provas e tive que ir para a escola! Nossa que ótimo -n então, aí eu acordei hj e minha febre ainda tava alta, tá uma maravilha -parey
Ontem eu recebi um pedido pelo chat do Facebook -q e bom, talvez ele fique meio longo por que vou postar o Leia Mais e a Data. Vou dividir o tutorial em partes.

I. @font-face
Tô meio que com receio de postar este tutorial por que ele é do K. World, mas ele tá fechado, vou postar.
Cole acima da tag ]]></b:skin>:
@font-face {
font-family: "nomedafonte";
src: url('URLdafonte');
}
Não salve ainda, hospede a fonte que você vai querer usar.
Como? 
Vá no arquivo de fontes do seu computador, (no windows 7 ele está no Painel de Controle) copie a fonte que vai querer usar e cole ela em um lugar fácil de achar. Hospede sua fonte, recomendo aqui, mas precisa ter uma conta no tumblr, agora copie o código que apareceu ali embaixo e cole no 'URLdafonte', no nome da fonte você escreve o nome que você vai por no código, como fontepixel, vai ficar mais ou menos assim.
@font-face {
font-family: "fontepixel";
src: url('http://static.tumblr.com/taltaltal.ttf');
}
Depois de editar o código, salve.

II.  Leia Mais
Eu não lembro de onde eu peguei esse tutorial, só sei que modifiquei quase todo ele -q sauhuash ~parabains pra tú, parabains~
Bom, ainda no ]]></b:skin>, cole:
.jump-link  {
text-align: right; ~posicionamento do leia mais~
margin-top: 5px; ~mude para subir ou descer o leia mais~
margin-left: -40px; ~mude para ir para direita ou esquerda~
margin: -2px -11px .65em -11px;
}
.jump-link a {
padding: 4px;
color: #fff;
background: #cor;
border:1px solid #cor2; ~para criar o efeito, deixe a cor da borda um pouco mais escura que a cor de fundo~
text-shadow: 0px 1px 2px #c7c7c7;
box-shadow: 0px 1px 3px #ccc;
font-family: littlepixel; ~aqui entra o @font-face~
font-size: 8px; ~normalmente as fontes pixeis ficam boas entre 8px e 10px~
border-radius: 6px 0 0 6px;
-webkit-transition: all 0.5s linear;
}
.jump-link a:hover { ~hover: quando passa o mouse~
padding: 4px;
color: #fff;
background: #corhover;
border:1px solid #corhover2;
text-shadow: 0px 1px 2px #c7c7c7;
box-shadow: 0px 1px 3px #ccc;
font-family: littlepixel;
font-size: 8px;
border-radius: 6px 0 0 6px;
-webkit-transition: all 0.3s linear;
}
Salve.

III. Data
 Procure no seu HTML por .main-inner h2.date-header { apague tudo que está dentro desta tag e substitua por:
.main-inner h2.date-header {font-family: littlepixel;color: #fff;margin-left: 20px;background: #ebbca8;border:1px solid #dbb19f;text-shadow: 0px 1px 2px #c7c7c7;box-shadow: 0px 1px 3px #ccc;float: left;font-size: 8px;padding: 4px;-webkit-transition: all 0.5s linear;}.main-inner h2.date-header:hover {font-family: littlepixel;color: #fff;margin-left: 20px;background: #c1c5d0;border:1px solid #A7ACB8;text-shadow: 0px 1px 2px #c7c7c7;box-shadow: 0px 1px 3px #ccc;float: left;font-size: 8px;padding: 4px;-webkit-transition: all 0.5s linear;}
E Salve.
 Acho que nunca tinha feito um tutorial tão grande -q mas acho que ficou bom, ou não -q se tiver alguma dúvida, pode perguntar nos comentários, bye <3

6 comentários:

  1. Melhoras e boa sorte com as provas u3u
    Adorei o tutorial! *-*
    Beijos ~
    unlocked-land

    ResponderExcluir
    Respostas
    1. Obrigado, vou precisar, hj é prova de matemática #mds .-.
      Obrigada *u* ficou meio grande demais masok ashasuh

      Excluir
  2. Adorei os tutoriais, são muito fofos *o*

    Beijos, da tia Marie. || s-ilvercoin.blogspot.com.br ♥

    ResponderExcluir
  3. Não vou poder dizer se gostei ou não porque não tem review /: Mas tenho certeza que é lindo, não sei se é igual ao seu blog, se for, é divo demaisss! Beijos, fico te esperando lá no blog ♥ www.justgirl-oficial.blogspot.com (segue?)

    ResponderExcluir
    Respostas
    1. É igual a o do meu blog xD
      Thanks *uuuuuuuuuuu* vou visitar, pérae asusauh

      Excluir

Olá! Se você vai comentar esse post, estou aqui para dizer obrigado \o\ -n
1. Não peça tutoriais/goodies aqui, peça na minha ask (link no primeiro gadget)
2. Quer fazer uma crítica do blog? Por favor, que ela seja CONSTRUTIVA
3. Não aceito selinhos nem nada deste tipo.
4. Comente sobre o post
5. "Seguindo, segue de volta", vou ver ser blog e se eu gostar sigo, simplesmente.
6. Deixe o link do seu blog abaixo do comentário, ou avise se tiver que clicar no seu perfil para vê-lo para que eu possa visitá-lo
Seguiu essas regrinhas? Estarei muito feliz em receber seu comentário *u*