03 março, 2014

Tutorial: Data Personalizada no blog


Olá galerinha,

Hoje começa a semana de tutoriais do blog. Bom eu vou ensinar a vocês como personalizar a data do blog, eu aprendi a fazer no blog Menina Diva Da Moda

Ela tem umas bordinhas arrendondadas:



 e quando passa o mouse por cima ele fica sem a borda arredondada :







Você pode editar as cores do seu jeito. Vamos ao tutorial!

Primeiro pesquise por:


]]>

Depois cole este código em cima da tag que encontrou

@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 */
}


Nas cores destacadas de verde modifique como quiser. Foi isso e espero que tenham gostado. Até a próxima. 



 photo novaassinatur_zpsf067b3ff.png

18 comentários :

  1. nossa o layout ficou lindo e adorei o tuto
    Vivi ensina a colocar o gadget Status que voçe usa :33
    beijos

    http://caprixoteen.blogspot.com.br/2014/03/se-voce-nao-e-uma-robo-rsrss.html

    ResponderExcluir
    Respostas
    1. Ok vou fazer o tutorial e te aviso. Beijos

      Excluir
  2. Adorei a dica !
    coisasuteisoufuteis.blogspot.com.br
    facebook.com/coisasuteisoufuteis

    ResponderExcluir
  3. Amei o tutorial o resultado fica lindo ^3^

    Bjos ~ Poderia retribuir a visita ?Cave Crazy

    ResponderExcluir
    Respostas
    1. Que bom que gostou do tutorial. Eu tentei entrar no blog, mas disse que não existia. Beijos

      Excluir
  4. Amei , mais como faço para a data subir , pqê estar encima do titulo do post .

    ResponderExcluir
    Respostas
    1. Onde está margin-top: 10px; aumente o número até que chegue o resultado que você queira. Beijos

      Excluir
  5. Como faço pra colocar do lado esquerdo igual ao seu blog?
    http://dicas-das-bff.blogspot.com.br/

    ResponderExcluir
  6. Adorei a dica mas o meu esta ficando atrás da área de postagem, como faço para trazer para frente?
    Meu Blog: Neldi.com
    Meu Instagram: @neldioliveira

    ResponderExcluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
  8. Este comentário foi removido pelo autor.

    ResponderExcluir
  9. Obrigada! Vou tentar fazer
    Você pode dar uma olhada no meu blog e se puder seguir? Beijos

    ResponderExcluir
  10. Noossaa, amei demais.. parabéns, um tuto bem fácil.
    http://andressaagnel.blogspot.com.br/

    ResponderExcluir
  11. Olha eu gostei do muito tutorial, mas uma dica, quando fui pesquisar tinha 3 ]]> então da próxima vez eu acho melhor especificar um pouco melhor qual seria o código :) , e eu adorei o blog

    ResponderExcluir
  12. Olá! Parabéns pelo blog, conteúdo muito bom. Obrigada por disponibilizar. Como faço para centralizar a data embaixo do título? Mudei o float para center, mas fica uma faixa grande em vez de ficar do tamanho da data. Obrigada desde já. Beijos!

    ResponderExcluir


- Aceito críticas, mas sem xingamentos;
-Aceito parcerias
- Deixe o endereço do seu blog para que eu possa retribuir;
- Se seguir o blog eu retribuo.
- Volte sempre!