sexta-feira, 11 de janeiro de 2013

Efeito na equipe do blog

Hot-maybelline-barbie-black-favim.com-523746_large
Hooy gente ;P bom vocês pediram bastante esse tutorial pra mim, por isso vou ensinar como fazer o efeito que eu uso na equipe do blog. E por falar em equipe, espero que estejam gostando das meninas  que vão me ajudar a atualizar o blog 


Sobre o tutorial, não tem nada demais. Primeiro vocês precisam criar duas imagens:
                           
A 1° que será a imagem normal           E a 2° que será a imagem em hover

Agora vá no seu HTML e cole esse código acima de  ]]></b:skin>
.slide-up-boxes {width: 133px; display: inline-block; margin-left: 6px;}
.slide-up-boxes a {
display: block;
margin: 0 0 0px 0;
background: #fff;
height: 98px;
margin-bottom: 5px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 5px 2px -2px rgba(0,0,0,0.11);}
.slide-up-boxes h5 {
color: #937560;
text-align: center;
height: 109px;
text-shadow: 1px 1px 0px #eee;
letter-spacing: 5px;
text-transform: uppercase;
font: normal 11px/104px Arial;
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.slide-up-boxes a:hover h5 {
margin-top: -114px;
opacity: 0;}
.slide-up-boxes div
{position: relative;
color: #fff;
height: 114px;
padding: 5px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
text-decoration: none;}
.slide-up-boxes a:hover div {opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);} 
Visualize se estiver tudo ok (sem erros no HTML), salve.
Agora toda vez que quiser utilizar esse efeito use isso:

<div class="slide-up-boxes">
<a href="URL DO SITE">
<h5>
<img src="URL DA 1° IMAGEM" />
</h5>
<div>
<img src="URL DA 2° IMAGEM" />
</div></a></div>
Fácil né gente?! Espero que tenham gostado (:
:iconcutepandaismybf:
Bye Bye ~

57 comentários :

  1. Esse efeito é muitoo lindo *-*
    Ctrl C + Ctrl V .. aushauh
    Beeijinhoos

    ResponderExcluir
  2. Aaah eu amei esse efeito mas eu ACABEI de colocar o novo lay no meu blog se não eu usaria ;)

    Mas é muuito lindo!

    http://candy-village.blogspot.com.br/

    ResponderExcluir
  3. Estou gostando das novas postadoras <3
    Gostei do efeito!
    Jackie pooderia seguir?
    Kissus^^
    unicornio-voador.blogspot.com

    ResponderExcluir
  4. É muito lindo esse feito (:
    beeijos;*
    http://sooulteen.blogspot.com.br

    ResponderExcluir
  5. Oh Jackie eu queria saber como é que faz esse efeito de quando abre o blog e as imagens vão indo para seu lugar.
    portal-do-mundo.blogspot.com>>>>

    ResponderExcluir
  6. Que liamdo *-*
    perdidasnomundofashion.blogspot.com

    ResponderExcluir
  7. Amei o tuto Jackie, sabe que eu tava pensando em procurar ele na net mesmo?!Até sonhei com ele, depois que vi ele no seu blog!!
    Brigada Jackie. Beijos #May-Sun

    layrakauana.blogspot.com

    ResponderExcluir
    Respostas
    1. HUAHAUHAUAHAUH fico feliz que tenha gostado guria <3

      Excluir
    2. Ah Jackie eu fiz, mais não funcionou.
      Acho que por que o meu blog não é do modelo viagem né?!
      Mais mesmo assim eu amei, bj ^3^

      Excluir
    3. Eu acho que é pq vc usa o código de mudar a seleção de texto, não sei pq ele está interferindo em outros códigos fazendo com que não funcionem :(

      Excluir
    4. Sério então vou parar de usar o efeito agora mesmo, por que esse seu efeito é mais que divo <(U3U)>

      Excluir
    5. No meu caso foi ele que tava interferindo, mas espero que dê certo pra ti tbm <3

      Excluir
  8. O Efeito fica muito legal! Adorei o tuto Jackie! ^^

    Beijinhos, Paula! ♥
    ~Sweet Makeup~
    (clica no perfil pra visitar meu blog)

    ResponderExcluir
  9. jackie mais tipo , eu quero toda hora esse efeito e tambem não funcionou !!

    ResponderExcluir
  10. Obrigada meu anjo quebrei a cabeça o dia todo hoje tentando fazer ele, rsrsrs vc leu meus pensamentos. O blog ta lindo.

    ResponderExcluir
  11. Ameeeeeeeei o tutorial, muito lindooo, estava louca para aprender!

    Beijinhos cheios de gloss,
    Giulia Walt.
    modinhagirl.blogspot.com.br

    ResponderExcluir
  12. Jackie amei seu blog, muito fofo *-*. Não quero ser chata, mas... Se tiver um tempinho da uma passadinha lá no meu ? : http://isannajuliaa.blogspot.com.br/

    ResponderExcluir
  13. Achei q ficou super bonito esse efeito, gostei bastante. Quando agente acha q vc não pode fazer um layout melhor vc supera tudo e faz melhor do q os outros, ahsaushua.
    Podia fazer um tutorial de como colocou as imagens dos postadores no final do post ;)
    fashion em cores

    ResponderExcluir
    Respostas
    1. A brigada Fran *--*
      Eu também gostei muito desse meu atual layout mas sempre fico com a sensação de não ter ficado mais bonito que o antigo, acho que é paranoia né?

      Enfim, acho que esse tutorial vai te ajudar olha só>> http://jovemousada.blogspot.com.br/2012/11/tutorial-colocar-imagem-do-autor-da.html

      super explicadinho (foi o que usei aqui)... beijinhos Fran!

      Excluir
  14. Nossa que efeito é esse?
    Segui lá
    http://teen-e-life.blogspot.com.br/
    #-Býy

    ResponderExcluir
  15. aaaaaaaaaaaaaaaaah, gostei desse efeito, fica mt lindo ;D

    ResponderExcluir
  16. Jackie, fiou perfeito! O tuto funciona certinho e fica tudo fofinho!! Quando colocar a equipe no blog, com certeza vou usar!
    Agora, e esse design? Minha filha, você quer me matar só se for né? TÁ LINDO, PERFEITO, DIVO!!! Foio melhor design que você já fez, sério! E essa equipe sua ficou um show, todas as postadoras são super lindas e os posts delas são demais!!!
    Jackie, deixa eu te falar... queria me desculpar pela minha ausência aqui no blog, mas é que eu não tenho tempo!!! Mas eu passo aqui todo dia para ver as atualizações e queria dizer que você está super de parabéns, viu???
    Eu sou uma Jackie Dreamer (hã?) de s2!!!

    Bezos, Gabi Sena // gabi-sena.blogspot.com

    ResponderExcluir
    Respostas
    1. AAAAAAAAAAH BRIGADA GABI *--*
      Eu tbm adorei meu novo lay e a meninas que fazem parte da equipe realmente são incríveis :p

      Obrigada por ser tão fofa comigo, minha Jackie Dreamer oficial (:

      Excluir
  17. eu quero esse efeito sempre que alguem entrar no meu blog !! como faço ??

    ResponderExcluir
  18. Heey! Esse efeito é demias, tava procurando umdesses á um temPÃO!
    XOXO
    http://comentariosde1garotaqualquer.blogspot.com.br/

    ResponderExcluir
  19. Amei,vou postar no meu blog,com créditos,é claro.

    blog-j-a.blogspot.com.br

    ResponderExcluir
  20. assim amor que nem eu to entrando no seu blog muito perfeito e ta funcionando direitinho , como faço pra funcionar automatico ??

    ResponderExcluir
  21. Jackie, não consegui fazer direito. Entendi a parte de colar no HTML o primeiro código, mas o que faço com o segundo? Se puder responder, obrigada! (:

    ResponderExcluir
    Respostas
    1. O segundo é o código que faz o efeito aparecer amr... Tipo vc pode colar em algum HTML java script (:

      Excluir
    2. Ataa! Obrigada Jackie. Adoro o blog! (:

      Excluir
  22. Jackie, tipo, para colocar esse efeito nas imagens do post se usa o mesmo código ou muda algo?
    Beijos ;*
    http://cenariumfashion.blogspot.com.br

    ResponderExcluir
    Respostas
    1. O mesmo código!
      Mais você tem que repetir ele toda vez que quiser o efeito tá?

      Excluir
  23. Jackie eu n entendi a parte do url da imagem como assim aonde salva?
    wonderland-ofgirls.blogspot.com.br (está em reforma)

    ResponderExcluir
    Respostas
    1. amr não tem que salvar nada, vc só precisa colar a url da imagem nos locais indicados tá?

      Excluir
  24. naum funcionou to mt triste :( oq sera q eu devo ter errado? eu noa entendi a parte do url do site!

    ResponderExcluir
    Respostas
    1. Se o seu css tá carregado de códigos aí não funciona msm :c

      Amr a url do site vc coloca se quiser não é obrigatório ok?

      Excluir
    2. Este comentário foi removido pelo autor.

      Excluir
  25. jackie como vc faiz pra ficar alinhadinho em quatro olha só no meu blog nao ficou direito

    http://fofocasmonsterhighloves.blogspot.com.br/

    nem as imagens estao certas oq sera q aconteceu?

    ResponderExcluir
  26. Oie me apaixonei pelo efeito fui tentar fazer, mais ele corta parte da imagem (embaixo) e deixa sobrando um branco (em cima) eu acho que tem que ter algum problema de ajuste..(na minha opinião por que eu não entendo muito bem de código ehehe) se tiver um palpite ou até mesmo uma solução pra eu poder aproveitar esse efeito lindo ficarei muuito grata meesmo!! Beijos AMO seu blog!!
    http://atitudesdegarotaoficial.blogspot.com.br/

    ResponderExcluir
  27. então o meu problema é igual ao da Jubs (comentário acima) mais isso é por causa que tem que ajustar a largura e a altura da imagem .. tenho certeza que é isso, mais como eu também não sei mexer muito com HTML não conseguiu solucionar o problema :(
    obrigada pela atenção Vick
    apenasprincesinha.blogspot.com

    ResponderExcluir
  28. Jackie o segundo codigo me confundiu eu sei que tem que colocar em um HTML java etc então mais que url de segunda imagem ??

    ResponderExcluir
  29. Esse efeito é lindo, eu tentei tentei e não funcionou O_o!!!

    ResponderExcluir
  30. Onde q cola o 2 codigo??
    Mto obrigadah!

    ResponderExcluir
    Respostas
    1. Onde você quer usar o efeito.
      Pode ser em uma página do blog(na aba HTML) ou na sidebar(como HTMLjavascript)...

      Qualquer dúvida eu explico mais detalhado tá?

      Excluir
  31. Tentei fazer já umas 4/5 vezes e não consegui! Me Ajuda?

    ResponderExcluir
  32. OI jackie como faz pra ficar maior? pq fica cortando mesmo eu aumentando a altura e a largura *u*

    ResponderExcluir
    Respostas
    1. vc tem que ajustar no html do cod (dá um trabalho)
      eu por exemplo ajustei do tamanho que eu uso (:

      Excluir

.