Tutorial Imagem muda quando passa o mouse + estilos para data

                         

Yo minna-san vim com um tuto que tirei o HTML do Jenny-chan World sempre amei esse blog , foi um blog que me ajudou desde novato então ela criou meu primeiro lay e coisas parecidas então no tutorial dela ela ensina a como colocar efeito no cabeçalho nesse e em , qualquer lugar .Clique na imagem inicial e veja o efeito.Ficou curioso para saber o efeito e ver os estilos para data?


Basta  Isso  Adicionar um GADGED   HTML E cole o código :

<img src="URL da imagem que irá ficar normal" 
 onmouseover="this.src=&#39;URL da imegem ao passar o mousse&#39;" 
 onmouseout="this.src=&#39;Novamente a URL da imagem que ficará normal&#39;" 
 onclick="location=&#39;&#39;" 
 />

se querer colocar em uma Postagem Quando , for criar vai te em escrever clique em HTML e Cole o Código acima e visualize tudo certo beleza ? se puder visita o meu bloguito agora visite depois que vê o tutorial abaixo para visitar Clique AQUI se puder participe deste site siga o WORLD of Tutos e o meu blog então vamos lá
                                                                      Estilo para data :
Os estilos de datas feitas por Nen-chan ela mandou eu postar aqui esse tuto que esta também em meu blog.Obs: Se der erro no seu,não é culpadela,poisela testou 10 vezes nos meus blogs de testes,e deu tudo certo.Não a culpem!

/* Data  personalizada por World Of Tutos */
color: #000; /* Cor da Fonte */
margin-left: 70px; /*Distância,*/
background: #F77CAD; /* Cor de fundo */
float: right; /* Se preferir, troque right por left p/ a data ficar na esquerda */
font-size: 11px; /* Tamanho da fonte */
padding: 4px;
border: 1px dashed #000; /* Espessura,estilo e cor da borda */
-webkit-border-radius: 20px; /*Data Arredondada */
-webkit-border-top-left-radius: 20;/*Data arredondada*/
-moz-border-radius: 20px;
border-radius: 20px;
}

 font: Coming Soon; /*Fonte*/
    color: #F2BD0C; /*Cor da Fonte*/
    margin-left: -60px; /*Tire o - se não quiser um número negativo*/
    background: #EDFA5F;/*Cor do Fundo*/
    float: left; /*Troque left por right,se quiser na direita*/
    font-size: 14px; /*Tamanho da Fonte*/
    padding-bottom: 6px; /*Espaço de dentro*/
padding-top: 6px; /*Espaço do topo*/
padding-left: 4px; /*Espaço da Esquerda*/
padding-right: 3px; /*Espaço da Direita*/
    }

  /* Data da postagem personalizada por World Of Tutos */
color: #22DDF2;  /* Cor da Fonte */
margin-left: -69px;  /*Distância,retire o - se não quiser valores negativos*/
background: #fffaf0;  /* Cor de fundo */
float: left; /* Se preferir, troque left por right se quiser a data na direita */
font-size: 12px; /* Tamanho da fonte */
padding: 3px; /*Espaço de dentro*/
border-left: 5px double  #22DDF2; /* Local,espessura,estilo e cor da borda  */ /*Local: left=esquerda,right=direita*/
}

Para usá-las cole o código(da data) abaixo de :

.main-inner h2.date-header {

Kissus,se reblogarem,creditem