Efeito Mover/Arrastar Imagens do Blog

► +A +/- -A
Olá Amigos leitores, na post de hoje venho ensinando como adicionar um efeito bastante legal, é o efeito mover e arrastar as imagens do seu blog com Prototype e Scriptaculous, com este efeito seu blog ficará atrativo e interativo, para que o leitor/visitante possa "brincar" com as imagens do seu blog, arrastando-as para todo o lugar.
Se achou interessante então siga o tutorial a seguir para instala-lo em seu blog.

Instalando

1. Faça o login no Blogger
2. Ao entrar no Blog, vá na opção Modelo
3. Em seguida na opção Editar HTML
4. E procure pela seguinte Linha:

</head>

5. E Acima da Tag que citei adicione o seguinte código:

<!-- Prototype e Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype e Scriptaculous--> 

Caso você já tenha o Prototype e o Scriptaculous instalados em seu Blog, Então não precisara instala-la novamente, então ignore este passo!

6. Clique em Visualizar e se estiver tudo certo clique em Salvar.


Usando Efeito nas imagens

1. Para adicionar o efeito nas imagens dentro do post, Basta adicionar o seguinte código na Aba HTML do post:

<img id="img" style="cursor:move; border:0px;" src="URL_IMAGEM"/> 
<script type="text/javascript">new Draggable('img');</script>

As partes destacadas de Azul, você deverá substituir pela as ids das imagens, como por exemplo: img, drag, img, e etc..
A Parte destacada de Vermelho, você terá que substituir pela a URL da imagem que você desejar

Demo/Exemplo


(Clique e Arraste a imagem e veja o efeito)
► Postagens Relacionadas:

12 Comentários

João Almeida disse...

Muito interessante!

23 de fevereiro de 2012 às 12:01
Caio Vinicius disse...

Sim, é mesmo. Obrigado pelo Comentário.

23 de fevereiro de 2012 às 12:08
Gilberto disse...

Cara ...... Que Massa!!!!!

24 de fevereiro de 2012 às 08:24
Caio Vinicius disse...

Também Acho :D. Obrigado pelo comentário.

24 de fevereiro de 2012 às 14:41
Fabiano Alves disse...

Ótimo efeito, logo estarei brincando com ele ^^
Thanks for sharing

25 de fevereiro de 2012 às 00:09
Caio Vinicius disse...

No problem :D , Volte Sempre.

25 de fevereiro de 2012 às 08:47
Izaque Liborio disse...

Muito legal esse efeito, parabéns muito bom mesmo.

25 de fevereiro de 2012 às 11:57
Caio Vinicius disse...

Obrigado Izaque, Volte Sempre.

25 de fevereiro de 2012 às 12:26
Yellow disse...

Tem como fazer esse efeito com video tbm?

6 de julho de 2012 às 17:47
Caio Vinicius disse...

Olá Yellow!


Por enquanto não consegui fazer isto! Mas estou tentando, quando e se conseguir atualizo a postagem! Fique ligado!
Até mais! Um Abraço!

6 de julho de 2012 às 18:14
Anonimy disse...

Não funciona no meu firefox!

31 de julho de 2012 às 21:15
Caio Vinicius disse...

Olá "Anonimy", Não está funcionando no Firefox porque ele não tem suporte para esse navegador, só o Google Chrome! Até mais, Abraços ;)

1 de agosto de 2012 às 08:28

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!