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 :)

8 comentários:

  1. Legal o tutorial, gostei, e bem fácil também.

    http://mundodeliina.blogspot.com.br/

    ResponderExcluir
  2. Adoro esse modelo de data, fica muito fofo!!
    Kiss
    with-you-s2.blogspot.com

    ResponderExcluir
    Respostas
    1. Irei colocar no meu no proximo lay talvez -qq

      Excluir
  3. Awn, essa data fica linda ♥ Graças à Miki, né, u-u Adorei, viu *OO*

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
  4. Esse Tutorial é bem útil, fica lindo o resultado :D

    xoxo♥

    Crazy Girl ~

    ResponderExcluir

- Requests tem de ser feito na minha Ask, mas não me importo de serem feitos pelos comentários.

- Não façam comentários merdosos, ex: Poha, lindo, vai te fuder, ou seja, os sem lógicas! Mas eu permitos gírias.

- Se quiser que eu retríbua é só pedir, deixando o link do seu blog!

- Aceito "seguindo, segue de volta?", não acho nada errado nisso!

- Eu leio e respondo todos os comentários possíveis!