
Oi lindas
Eu estava querendo postar um tutorial mas estava em dúvida se postava o da data ou o do titulo dos gadgets, até que percebi que estilo para titulo de gadget é o que não falta então vou fazer o tutorial da data ok?
Este tutorial mostra como fazer a data ficar assim, igual a do Garota Unbroken, do ladinho do titulo do Post.
Mas antes, quero avisar o Garota Unbroken completou mais de 100 comentários! Eba! Na verdade 107.
Enfim, para ver o tutorial, clique em Continue Lendo (Domo Kuns do Domo World berram: clica clica clica!)
Primeiro de tudo, vá em Design


.main-inner h2.date-header {
Deve estar igual ou parecido com a imagem
![]() | ||||||||||||||||||||||||||||||||
Ignorem essas mini letrinhas, coisa do bendito programa que faz os prints Então depois de color: $ (date.text.color); cole o seguinte código fazendo as alterações necessárias: |
background-color: #E8E8E8; /* Fundo */
border-top: 1px dashed #FF0000; /* Estilo da borda de cima*/
border-left: 1px dashed #FF0000; /* Estilo da borda esquerda */
border-right: 1px dashed #FF0000; /* Estilo da borda direita */
-webkit-transition:0.4s;
display:inline;
float:right; /* Onde a data vai ficar */ /* Deixe assim se sua barra de postagem é na direita ou mude para left se sua barra de postagem é na esquerda */
}
O resultado é esse:
Agora, também existe outro estilo. Que é esse:
![]() |
Não liguem, é meu blog de testes e hospedagem de imagens |
Para conseguir esse efeito procure por main-inner h2.date-header {
Deve estar assim ou parecido:
.main-inner h2.date-header {
font: $(date.font); color: $(date.text.color);
Substitua o que está em negrito por esse código fazendo as alterações necessárias:
font: verdana; /* Fonte da letra */
color: #000; /* Cor da letra */
text-shadow: 0px 0px 2px #000 /* Sombra da letra */
background-color: transparent; /* Não altera aqui se quiser um efeito igual ao da imagem */
-webkit-transition:0.4s;
display:inline;
float:right;
}
E prontinho, espero que tenham gostado do tutorial. Qualquer dúvida é só comentar ok? Ah, e a página de Goodies está um pouco bagunçada mesmo, mas que quando tiver tempo arrumo tudinho ok?
Beijão
1 pégasos voaram para o Olimpo:
Fica muito bonito! Amei o tutorial! :D
http://pinkpimenta.blogspot.com/