17.2.12

Tutorial: Personalizar a data do post igual a do GU

| |
Favim.com-26340_large

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  Editar HTML  Dê CTRL+F e procure por :

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

Driiih disse... [Responder comentário]

Fica muito bonito! Amei o tutorial! :D
http://pinkpimenta.blogspot.com/