12/27/2014

~Efeito Shake (Versátil).

   ~Yo bolinhos com chantilly rosa!!Como vocês estão?Pois eu estou super bem e feliz com o blog e vocês!bom hoje estou trazendo um Tutorial super fácil,rápido e que vai deixar um efeito super legal e que você pode usar de diversas formas!O tutorial de hoje é do blog Just Like That.
                                                       
Hi de novo meus bolinhos docinhos espero que vocês estejam bem e animados pois teremos uma maratona de tutoriais,sim tutorial o dia inteiro (ficaram felizes né seus danados).
Adoro muito postar dicas de tutorias para vocês personalizarem seus blogs e até mesmo reblogarem (mais dando créditos claro).
Sei bem como é difícil para quem começou e nem sabe o que é ]]></b:skin,eu também era assim,ficava com medo de mexer em algo errado e ficava naquele modelo e layout básico,mas um dia eu disse vou aprender a há ter esses blogs personalizados!E pra quem já tá no mundo de Html e blogs já sabem bem lidar com essas coisas e sempre divão nos layouts e efeitos e seus blogs são super divos (como o Bunny Crazy,Cherry bomb,Kawaii World,Empire Kawaii etc.).
Mas voltando ao tema do post,o tutorial de hoje envolve efeito,gadgets e códigos mas relaxe é básico,fácil e rapidinho!Espero poder ajudar a vocês!
O efeito se chama ''Shake'' pois a foto com esse efeito se mexe,veja o efeito ::clicando aqui ::.
Esse efeito serve para a gadget de autores,blogs afiliados e muito mais,mais chega desse lero-lero e vamos ao tutorial:
1.Vá em modelo e clique em ''editar Html'' e aperte as teclas Ctrl+f,vai abrir uma caixa de pesquisa então cole nela e procure por:
]]></b:skin>
2.Após pesquisar vai aparecer o código procurado destacado em amarelo então acima dele cole isso:
 @-WEBKIT-KEYFRAMES SHAKE { 0% {TRANSFORM: ROTATE(0DEG); -WEBKIT-TRANSFORM: ROTATE(0DEG); -MOZ-TRANSFORM: ROTATE(0DEG); -O-TRANSFORM: ROTATE(0DEG); -MS-TRANSFORM: ROTATE(0DEG);} 25% {TRANSFORM: ROTATE(5DEG); -WEBKIT-TRANSFORM: ROTATE(5DEG); -MOZ-TRANSFORM: ROTATE(5DEG); -O-TRANSFORM: ROTATE(5DEG); -MS-TRANSFORM: ROTATE(5DEG);} 50% {TRANSFORM: ROTATE(-5DEG); -WEBKIT-TRANSFORM: ROTATE(-5DEG); -MOZ-TRANSFORM: ROTATE(-5DEG); -O-TRANSFORM: ROTATE(-5DEG); -MS-TRANSFORM: ROTATE(-5DEG);} 75% {TRANSFORM: ROTATE(5DEG); -WEBKIT-TRANSFORM: ROTATE(5DEG); -MOZ-TRANSFORM: ROTATE(5DEG); -O-TRANSFORM: ROTATE(5DEG); -MS-TRANSFORM: ROTATE(5DEG);} 100% {TRANSFORM: ROTATE(0DEG); -WEBKIT-TRANSFORM: ROTATE(0DEG); -MOZ-TRANSFORM: ROTATE(0DEG); -O-TRANSFORM: ROTATE(0DEG); -MS-TRANSFORM: ROTATE(0DEG);} } .SHAKE {-WEBKIT-TRANSITION: .9S; BORDER-RADIUS: 5PX;} .SHAKE:HOVER {-WEBKIT-ANIMATION: SHAKE .9S ALTERNATE EASE;}
Não precisa mudar e editar nada deixe assim!
3.Agora vá em Layout e clique em ''adicionar gadget'' e escolha a gadget ''HTML/Java Script'' e cole isso dentro da caixinha:
<A HREF="URL" TITLE="NOME"><IMG CLASS="SHAKE" SRC="URL DA IMAGEM" /></A>
Onde está escrito ''URL'' é pra você colocar o link do blog, que você quiser,onde está  ''URL DA IMAGEM'' é pra você colocar o código ou seja a url da imagem que você escolheu e onde está ''NOME'' é o que vai aparecer escrito no tooltip,ou seja o nome do blog,ou da pessoa ai depende de como você vai usar.
Após fazer isso tudo clique em ''Salvar'' e pontinho,coloque o mouse por cima da imagem que você escolheu,é isso espero que você tenha gostado e dado certinho no seu bloguito!
~Kisses Bolinhos

4 comentários :

  1. Vick faz um tutorial ensinando a fazer uma descrição hover?Tipo a gente chega perto da imagem e aparece uma descrição POR FAVOOOOR

    ResponderExcluir
    Respostas
    1. Ok Ana sem preocupações irei fazer este tutorial :)
      ~Kisses

      Excluir
  2. Oi Vick faz um tutorial ensinando a como personalizar o tooltip ;)
    PLEACE

    ResponderExcluir
    Respostas
    1. U-hum estava mesmo pensando em fazer esse tutorial :)
      Aguarde!
      ~Kisses

      Excluir