Efeito gild + fanfiction


Yoo~
Como vocês estão? Hoje a postagem vai ser breve e curta. Bom, primeiro quero pedir pra vocês pedirem algo na ask, porque eu criei o blog com esse objetivo, e aqui tá muito parado :D
Também queria divulgar minha primeira fanfiction, que está ali do lado direito do cabeçalho, cliquem nela e vocês serão redirecionados para a história.
Agora, vamos falar sobre o tema principal, esse efeito super divo. Como aqui no goodies do blog só tem menus, resolvi trazer um efeito muito útil para imagens de welcome, afiliados, blogorrol, enfim, ele se chama efeito Gild.
Créditos: [www]
Like preview: [www]
Esse efeito foi personalizado um pouco, mas está bem facinho de entender.


Vá em modelo, editar html, e depois de <b:skin> cole esse código:

 @-webkit-keyframes gild {
50% {transform: rotate(10deg) scale(0.636);
-webkit-transform: rotate(10deg) scale(0.636);
-moz-transform: rotate(10deg) scale(0.636);
-o-transform: rotate(10deg) scale(0.636);
-ms-transform: rotate(10deg) scale(0.636)}
50% {transform: rotate(-10deg) scale(0.636);
-webkit-transform: rotate(10deg) scale(0.636);
-moz-transform: rotate(-10deg) scale(0.636);
-o-transform: rotate(-10deg) scale(0.636);
-ms-transform: rotate(-10deg) scale(0.636);}
99% { opacity: 0.0;}
100% {-webkit-transform: rotate(0deg); opacity: 1;}
}
.gild: {display: inline-block; border-radius: 5px; position: absolute; padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; }
.gild:hover {-webkit-animation: gild .5s alternate linear;
-webkit-transition:5s;}
Salve. Agora vá em layout, adicionar um gadget HtmlJavaScript e cole esse código:

<a href="LINK"><img src="LINK DA IMAGEM" class="gild"></a>
 Salve. Vizualize, e se der algo errado, repita o processo.
 Depois trago mais tutoriais. E não se esqueçam, visitem minha fanfiction e peçam pela ask.
Kissus...

20 comentários:

  1. Fica muito fofo esse efeito no blog!
    Bjs
    luisadub.blogspot.com

    ResponderExcluir
  2. Adorei o efeito e vou ler a sua fic :]
    kissus ;3
    >> ncnosekai.blogspot.com

    ResponderExcluir
  3. muito legal , adorei o tuto
    www.mymomentsz.blogspot.com

    ResponderExcluir
  4. Respostas
    1. Onwwt *--* obrigada, mas porq não deixou o link do seu?

      Excluir
  5. Adorei o tutorial,é super útil,talvez eu use no meu layout novo :)
    littl-things.blogspot.com

    ResponderExcluir
  6. Esse efeito é realmente muito lindo e útil. Adorei o tutorial, com certeza vou tentar usa-lo em um layout meu!
    http://jupseds.blogspot.com.br/ Seguindo, retribui? ;*

    ResponderExcluir
  7. serio, gamo em blogs que meio que fazem esses tutoriais, acho super interessante. Também achei o blog lindo viu!!

    já to seguindo tbm *--*

    então beijinhos, bia caspirro

    http://www.pontoemcomum.com/

    ResponderExcluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ