29 de setembro de 2013

Tutorial - Como colocar fundo na data do blog com efeito

||


Olá pessoas. Hoje é domingo, dia vago que eu tenho pra postar. =D
Primeiramente, quero agradecer aos 7 seguidores conquistados. Sei que parece poucos para alguns, mas mesmo assim estou muito agradecido pelos sete autores que estão participando do meu humilde blog. Valeu, de verdade. :)

Hoje eu trouxe outro tutorial. Inventei um código maluco, para adicionar um fundo na data do seu blog. O fundo muda de cor com um efeito bastante legal. 

Venha comigo, para aprender!
Bem, a data do blog é aquela que fica em cima das postagens, como na imagem abaixo:


Hoje eu vou ensinar como colocar um fundo na data, da cor que você quiser.

Para começar, vá em Design>Modelo>Editar HTML>Aperte Ctrl+F e pesquise pelo código ]]></b:skin>
Acima desse código, cole o outro código abaixo:
.main-inner h2.date-header {
background-color: #00FFFF; /* cor do fundo */
color: #000000; /* cor da fonte */
-webkit-transition-duration: 1.00s; /* tempo de chegada do efeito */
}

.main-inner h2.date-header:hover {
background-color: #5F9EA0; /* cor do fundo com o mouse em cima */
color: #FFFFFF; /*cor da fonte com o mouse em cima */
-webkit-transition-duration: 1.00s; /* tempo de chegada do efeito */
}
Depois disso, edite o código como você preferir:

Em background-color:, adicione o código da cor de fundo que você quer na sua data, sem o cursor(mouse) em cima.
Em color:, adicione o código da cor da fonte da data sem o mouse em cima.

No segundo background-color:, você irá adicionar o código da cor de fundo que você quer na sua data, com o cursor(mouse) em cima.
No segundo color:, adicione o código da cor da fonte da data com o mouse em cima.

Vai ficar mais ou menos assim(mas com as cores que vocês escolherem, é claro):

Sem o mouse em cima:

Com o mouse em cima:

Se tiverem dúvidas, me comuniquem(até porque as instruções acima ficaram meio confusas, mas acho que dá pra entender).

Bai, não esqueçam que amanhã tem links para o chá da semana!

Nenhum comentário:

Postar um comentário

Comentem leitores, isso ajuda muito os blogueiros, além de motivá-los a postar mais. :D
Antes de comentar, leia os tópicos a seguir:

-Quando comentar, evite usar palavrões para ofender alguém, ou a mim mesmo. Xingamentos e ofensas contra mim serão ignoradas(ou eu irei lhe dar uma resposta nada agradável =) )
-Comentários do estilo "Seguindo, segue de volta?" , até serão aceitos, mas já vou avisando que só sigo o seu blog, se GOSTAR.
-Obrigado por comentar, eu agradeço muito, de verdade. Caso eu não responda o comentários de vocês, não fiquem irritados, é que eu realmente não tenho tempo. Mas saibam que eu respondo sempre que possível!