24 de mar de 2013

Efeito Extreme na data do blog

Boa noite! Eu decidi que não vou fechar o blog, LOL mas estou pensando em trocar o nome, esse nome é muito grande, mais não vai ser por agora por causa do domínio não tem como trocar só se comprar outro e eu não tenho como comprar um por agora, então vamos aguardar... Me pediram na ask pra ensinar a fazer esse efeito da data, quando passa o mouse ela se move para fora, mostrando a data que o post foi púbicado. Quer aprender clica em Read More...


Não é um tutorial difícil, mas requer um pouco de atenção. Esse tutorial é de minha autoria, então se usarem ou repassarem por favor creditem ok?!

Primeiro, vá na configuração do seu blog em idioma e formatação e configure a data da seguinte maneira. 
dia/mês/ano
 Agora vá em Modelo> Editar HTML e procure por
 .main-inner h2.date-header {  font: $(date.font);  color: $(date.text.color);}
Apague todo o código, cole o seguinte código.

.main-inner h2.date-header {
width:96px;
height:18px;
margin-left:587px;
float: left;
text-align: center;
font-size: 11px;
padding: 10px;
background: url(LINK_DA_PRIMEIRA_FAIXINHA) no-repeat center;
color: #FFFFFF;
text-shadow:0 1px #ccc;
margin-top: 20px;
-webkit-transition-duration: .50s;
}
.main-inner h2.date-header:hover {
color: #ffffff;
background: url(LINK_DA_FAIXINHA_QUANDO_PASSA_O_MOUSE) no-repeat center;
-webkit-transition-duration: .50s;
margin-left:640px;
}
 Entendendo o código

margin-left: 96px; > Significa o tamanho da faixinha sem passar o mouse.
margin-left:96px; > Significa o tanto que a faixinha vai sair quando passa o mouse.
font-size: 11px; > É o tamanho da fonte/letra da data que fica dentro da faixinha.

Bom acho que deu pra entender qualquer dúvida comente.
_Guuh

6 comentários:

  1. Sempre quis saber, qual era esse feito, mais sempre tive vergonha de perguntar .-.' ~louca~~ Guuh que bom que nos iras fechar o extreme é o blog é lindo demais pra ficar fechado u.ú

    pinkmushrooom.blogspot.com

    ResponderExcluir
    Respostas
    1. Rsrs quando quiser saber algo pode perguntar ..
      Obrigado, primeira pessoa que me chama de Guuh aqui na blogosfera LOL >.<

      Excluir
  2. ahh que bom que não fechou o blog *u*
    esse efeito é muito bonito, eu gostii <3

    ResponderExcluir
  3. Esse efeito é muito bonito e fácil de se usar adorei ^^

    XOXO
    jovenclube(.blogspot.com.br)

    ResponderExcluir