Tumblr_lvj4tb5gix1r08pi8o1_500_large

Oba, oba, estou entrando de férias, faltei hoje e ontem sai mais cedo, amanhã ultimo dia, e estou fazendo muitas e muitas novidades para o blog, se Deus quizer, vagas para postadoras :D Chega de enrola, enrola, a Chassy Cher me pediu para usar o truque daqui do blog, quando passo o mouse por cima do cabeçalho ele fica todo coloridinho, e eu vou ensinar esse efeito...


Cabeçalho normal:

Cabeçalho ao passar o mouse:


O efeito é do mesmo código desse tutorial aqui, basta adicionar a tag linda maravilhosa e perfeita :hover ao css.
Vou explicar isso direito...
No meu HTML o cabeçalho seria representado assim:

#header-wrapper {
  background:url("http://static.tumblr.com/mrycy6g/0hels1ofz/colors.png");
  background-repeat: no-repeat;
  width:1000px;
  height:200px;
  margin:0;
  text-align:center;
  padding-top:20px;
  }
 Que vai de acordo com o blog. Para adicionar eu copiei esse código, colei mais uma vez no HTML, só que eu adicionei a tag :hover e mudei a imagem ! Simples, né ?!
Olha como ficou:
#header-wrapper {
  background:url("http://static.tumblr.com/mrycy6g/0hels1ofz/colors.png");
  background-repeat: no-repeat;
  width:1000px;
  height:200px;
  margin:0;
  text-align:center;
  padding-top:20px;
  }
#header-wrapper:hover {
  background:url("http://static.tumblr.com/mrycy6g/bbgls1ogw/colors.gif");
  background-repeat: no-repeat;
  width:1000px;
  height:200px;
  margin:0;
  text-align:center;
  }
Mas é claro que assim é no meu HTML...
Vou explicar de acordo de vários HTML...
No Da Evelyn's place, Reneide Criações, é a mesma tag que você vai copiar, colar e modificar (#header-wrapper).
Quando for um dos layouts do Ecleticus (For you), Trechy Teen ou até da mesma base, a tag á se modificar é #mainwrap.
Agora quando é do blogger é outra história.
Coloque essa tag:
.header-inner {background-image: url("http://static.tumblr.com/mrycy6g/0hels1ofz/colors.png"); background-position: left; width: 452px; min-height: 144px; _height: 144px; background-repeat: no-repeat; }
.header-inner:hover {background-image: url("http://static.tumblr.com/mrycy6g/bbgls1ogw/colors.gif"); background-position: left; width: 452px; min-height: 144px; _height:144px; background-repeat: no-repeat;}
Acima dessa tag:
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
E retirar a tag:


<b:widget id='Header1' locked='true' title='inspired by vickys.com.br (Cabeçalho)' type='Header'/>


Onde ta em negrito você irá colocar a altura da imagem em height e min-height e a largura em widht.
Mas atenção, modifique de acordo com o html, as imagens de acordo com o cabeçalho, etc...
Pois, se não fica desproporcional, então o resto e a criatividade é com vcs !
Beijos, espero que tenham gostado.. EVELYN !

7 coments:

Camilla Demézio disse... Reponder {}

Amei o tuto,mas uma duvida...Se você fizer isso no header,ele demora mais para carregar?

http://meumundomudando.blogspot.com/

Beel disse... Reponder {}

:l Oi florzinha adorei aqui e já estou seguindo!

Segue la tbm?
www.blogdabeetina.blogspot.com

Karen Guzzatti Konig disse... Reponder {}

:l ooi floor , ja estou te seguindo,
adorei seu blog , mt mt legal !
#milbeijinhos
Da uma passadinha la no meu blog
http://karenbarbiepink.blogspot.com

Chassy Cher disse... Reponder {}

Esse tutorial é super útil *-----------*
Vou usar no próximo lay do Sweet Poison ;D

http://blog-sweetpoison.blogspot.com/

Iana Paulinhaaaa-World Girl-Official disse... Reponder {}

Amei o tuto linda, vc é mt inteligente! ainda não tinha visto, nuss faz tempinho que não passo aqui né? agora vim visitar, não esquece de me visitar amor... kisses -->>http://ianapaulinhaaaa.blogspot.com/

Christiano Augusto disse... Reponder {}

Queria saber como faço pra colocar esse efeito, sendo que o meu cabeçalho não aparece, pois fiz o upload no menu design, agora não acho no código. Simplesmente não aparece, parece que as imagens enviadas por lá, não vão para o código. é isso? como faço?
att; christianojp@gmail.com

Priscilaf. disse... Reponder {}

muito legal, no próximo layout quem sabe.
http://cappuccinoeaconta.blogspot.com.br/

Postar um comentário

:a   :b  :c  :d  :e :f  :g  :h  :i  :j  :k  :l  :m  :n  :o  :p  :q  :r  :s  :t  :u

Comentar não dói!