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