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:
Os ??px são o tamanho de linhas e margens. Preste bem atenção na hora :)
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'); }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.
.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 */
}
Os ??px são o tamanho de linhas e margens. Preste bem atenção na hora :)
Legal o tutorial, gostei, e bem fácil também.
ResponderExcluirhttp://mundodeliina.blogspot.com.br/
obrigada~
ExcluirAdoro esse modelo de data, fica muito fofo!!
ResponderExcluirKiss
with-you-s2.blogspot.com
Irei colocar no meu no proximo lay talvez -qq
ExcluirAwn, essa data fica linda ♥ Graças à Miki, né, u-u Adorei, viu *OO*
ResponderExcluirBeijos,
Juu-Chan do Nescau com Nutella.
sim sim KKKKKKKKK
Excluir-kissus-
Esse Tutorial é bem útil, fica lindo o resultado :D
ResponderExcluirxoxo♥
Crazy Girl ~
obrigada~
Excluir