Cubo de imagens animado

      ,       Sem comentários   
Cubo de imagens animado
Olá e bem-vindo ao Mult-focos. Vamos ver neste post como adicionar um cubo de imagens animado no seu blog. Este ornamento em forma de cubo é composto por seis imagens 200x200 pixels e pode ser útil para você destacar imagens em seu blog.
Veja um demo clicando no botão abaixo ou em Result no Box de códigos.

DEMO

Como adicionar no blog
  •  Ir para o painel do blogger->layout 
  • Clique em Adicionar um Gadget. 
  •  Na janela Adicionar um gadget->HTML/JavaScript. 
  •  Copie o código JS abaixo e cole-o dentro da caixa de conteúdo. 
  •  Salvar o gadget. Arraste o gadget e reposicione-o onde você quer mostrá-lo. 
  •  Clique no botão Salve (canto superior direito).
Configurações
  • Copie o código JS e cole em um bloco de notas e faça as modificações em: URL DA IMAGEM. 
  • As imagens são de 200x200 em um total de seis. 
Isto é tudo.

<h1>Cubo de imagens animado Mult-focos</h1>

<div class="cube">
        <div class="loader6"><img src="https://lh3.googleusercontent.com/-k0KJJhE0lN8/VFIZ62Lf8nI/AAAAAAAAH6I/ygHAy4YJKXw/s200-no/aranha.jpg"/></div>
        <div class="loader5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPKlur4Uv_kV_5RIHzQ9bTs3MIbRwGOh-DC3G_TUsHaD5LJWLKrD7OhaurKVGgk_Gk7R4CNuG96Dkcwo6bUYOzjEJS497u4t5reG-BrZtkOn3SXavqM3tALkjDHUpEy1BqgduLWbgkqTnQ/s200-no/Globo.jpg"/></div>
        <div class="loader4"><img src="https://lh3.googleusercontent.com/-OX4wsfa9mR8/VFIaOfLjhxI/AAAAAAAAH60/By-UOM18YAk/s200-no/ma%C3%A7%C3%A3.jpg"/></div>
        <div class="loader3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjItvcrIVhBJnTCBCK-Gbj8SyCRD9REo_aKkpsc728W8Irtwia16H9VhGTRE7vLZ0ecABZxA51JI6ecfNxGO67bGkvSuAKCWP5wdWbqDzNnRqFdIc0qFhHRaPAu8BnVsl-Jg983j2_uCgZt/s200-no/morcegos+voando.jpg"/></div>
        <div class="loader2"><img src="https://lh5.googleusercontent.com/-uwpB7zTPlU0/VFIahx7zZSI/AAAAAAAAH7c/0paMxJhXzJo/s200-no/p%C3%B4r%2Bdo%2Bsol.jpg"/></div>
        <div class="loader1"><img src="https://lh4.googleusercontent.com/-jY4EBIWI3Rw/VFIasLsP49I/AAAAAAAAH7w/gwSdP_ea5U8/s200-no/rel%C3%A2mpago.jpg"/></div>
</div>

See the Pen fmdAj by Mairink (@Oemes) on CodePen.




Postado por Mairink Oemes

0 comentários:

Postar um comentário

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter