Tutorial → Data das postagens personalizadas

Hoje, depois de muito tempo eu trouxe um tutorial

 

Bom, quando começar minhas aulas eu irei trocar de template do meu blog. Minhas aulas vão começar dia 16. Na verdade vai começar dia 12, mas só vou no dia 16! Então até lá irei bolar um joginho bem legal a vocês para disponibilizar o tema Kyary Pamyu Pamyu e irei colocar um tema do Detroit Metal City. Acho que eu vou curtir muito aquele template *p* ~le babando.... Acho melhor parar com minhas boboseiras -q

 

Bom gente, esse vai ser um modelo bem legal. É um modelo de data personalizada, aprendi no Miki Candy. Ele tem umas bordinhas arrendondadas, e quando passa o mouse por cima ele fica sem a borda arredondada e o melhor de tudo é que você pode editar as cores do seu jeito :) Pode mudar o efeito também, mas o básico eu irei colocar aqui para vocês ^_^ É super fácil, simples e bem prático. Na minha próxima postagem acho que vou colocar algumas piadas ou câmeras escondidas japonesas. - Leia mais.


Abra no seu HTML, tecle ctrl + f e procure:

]]></b:skin>

Acima do código que achou cole:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.main-inner h2.date-header {
font-family: silkscreen;
margin-right: -59px; /* Altere o valor até que fique do tamanho certo */
margin-top: 10px;
float: right;
font-size: 8px;
padding: 5px;
color: #fff; /* Cor da Letra */
background: #bc8fbc; /* Cor do fundo */
text-shadow:#767676 0px 1px 1px;
box-shadow: 2px 2px 3px #ccc; /* Sombra */
border-top-left-radius:0px;
border-top-right-radius:10px;
border-bottom-left-radius:0px;
border-bottom-right-radius:10px;
-webkit-transition-duration: .50s;
}
.main-inner h2.date-header:hover {
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
font-family: silkscreen;
-webkit-transition-duration: .50s;
background: #DB7093; /* Fundo hover */
}

O que está em negrito são as cores, você pode ajustar as margens, já tem todas as explicações aí no próprio código.
Os ??px são o tamanho de linhas e margens. Preste bem atenção na hora :)