12/01/2013

Tutorial - Data Personalizada !



                                              Hii Dear !

Bom dia Amoras ! , Tão gostando dos Posts Da Minny ?? Espero que sim né .. Hoje vim postar Um Tutorial como colocar a data personalizada Hover , Eu acho essa data super fofinha *--* , Querem Saber Como colocar no seu blog ? estão no canto certo , ahsuahsuahs , Bom tá aqui o tutorial : 


Sua data ficará assim:




Primeiro, vá até Configurações > Formatação > Formato da data, e ajuste a data como na imagem:
"Dia Mês Ano"
Salve, em seguida vá até seu HTML (Design > Editar HTML e na nova interface: Modelo > Editar HTML > Prossseguir) e procure por:
.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}
Então substitua esse código por:

.main-inner h2.date-header {
float: left; /** data no lado esquerdo, pode mudar para right **/
width:55px;/** largura **/
height:55px;/** altura **/
overflow:hidden;
font-size:15px;/** tamanho da fonte **/
color: #fff !important;/** cor da fonte **/
text-align:center;/** alinha o texto **/
margin-bottom: -65px; /** desce **/
margin-left: -80px; /** margem pra esquerda **/
padding: 8px 2px 0px 2px; /** espaço interno: topo, direito, embaixo, esquerdo **/
-webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/
background: #FF6C91; /** cor do fundo **/
}
.main-inner h2.date-header:hover {
background: #E9B4BB; /** cor do fundo hover **/
}
Bem facil né ? onde tem os cantos em rosa , mudem pela cor do fundo e pela cor ao passar o Mouse , Usem a Tabela de cores aqui ! 

Créditos - {♥}

2 comentários:

  1. HAHA' Amo esse tuto, sempre mto util, finalmente vc tah de volta neh?!
    Beijos! NNHHAACK!

    rascunhosdecaneta.blogspot.com

    ResponderExcluir
    Respostas
    1. Finalmente , ASHUASHUASHUA ! , Estava Sentindo Sua falta Por Aquii .. ^^ Beijões !

      Excluir