01/10/2016

| |

Conheça o Efeito Just Jump.

O Efeito Just Jump é uma animação em imagens, que pode decorar a lateral do seu blog e deixá-la bem fofa!!




Olá, meus amigos queridos!!!

Chegando com uma dica muito legal para você: COLOQUE O EFEITO JUST JUMP NA LATERAL DO SEU BLOG.

Esse efeito é só decorativo,pois anima a lateral do blog, quando o mouse fica em cima dele.Veja como ficou no meu blog de testes:





Antes de colocar o efeito, faça um BACKUP do seu layout.Não sabe fazer? Clique aqui e aprenda.



Como colocar:


Entre no seu painel do blog, clique em MODELO e depois em EDITAR HTML. Tecle juntas as teclas CTRL+F e cole dentro da caixinha de pesquisa o código:  ]]></b:skin> e depois dê o ENTER.



Acima de ]]></b:skin> cole o seguinte código:


.jump-isa:hover{-webkit-transform: translatey(-50%) rotate(-360deg) scale(1.3); border-radius: 50px;}
.jumping-isa img{width: 50px;box-shadow:0px 0px 0px #ccc;-webkit-transition-duration: .80s;}
.jumping-isa:hover img {opacity: 0.4;-webkit-transition-duration: .80s;}
.jumping-isa img:hover {opacity: 1;-webkit-transition-duration: .80s;}

Na parte em vermelho do código, você poderá alterar o número e aumentar a imagem.Na minha eu coloquei 300.Vai depender da largura da sua barra lateral. 

Veja acima:
Clique em SALVAR MODELO.
Agora vá para LAYOUT+ADICIONAR UM GADGET+HTML/JAVASCRIPT e cole o código abaixo:

<div class="jumping-isa">


<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>
</div>


Na parte em vermelho, mude conforme está sendo pedido.Em NOME, dê um nome para a imagem e em URL DA IMAGEM, coloque o endereço da imagem,para isso, ela deve estar hospedada em algum site e imagens ou publicada em algum blog.Você poderá colocar as imagens em um blog de testes e publicar.Assim você terá o endereço da imagem, clicando com o botão direito e copiando.



Sobre o Autor:
Magda moreira Meu nome é Magda Moreira, sou professora e atualmente estou fazendo o curso de Pedagogia.Sou blogueira de coração e uma curiosa da internet.Meu blog Agenda dos Blogs tem como objetivos:Divulgação de blogs gratuitamente e elaboração de projetos e tutoriais voltados aos blogueiros.

10 comentários:

  1. Oi tudo bem? Enviei para você um artigo super legal, infográficos sobre Outubro Rosa do meu email novo prof.rosioliveira1@gmail.com caso não tenha recebido é só solicitar. Obrigada

    ResponderExcluir
  2. Muito legal o efeito Just Jump, é uma forma de animar o blog, muito boa essa dica, deixa o blog mais animado, bjs.

    ResponderExcluir
  3. Boa Tarde Magda! Este efeito Just Jump é uma dica bem legal,deixa o blog decorado e mais alegre dependendo da imagem que colocarmos fica show,gostei.Bjss

    ResponderExcluir
  4. Ola magda amo suas dicas elas tem me ajudado a melhorar sempre o blog. Voce explica super bem. bjs

    ResponderExcluir
  5. Até que dá um toque especial ao blog, eu gostei muito dessa novidade!
    Obrigada por compartilhar o código Magda!

    Bjos
    Minda ❤ 😍

    ResponderExcluir
  6. Vou tentar amiga mas , não agora pois , estou super atrasada nas postagens devido ter ficado muito tempo sem computador , bjs e obrigada por mais essa dica !

    ResponderExcluir
  7. Adorei!!
    Suas dicas são sempre ótimas!
    bjus

    ResponderExcluir
  8. que top Magda este tutorial como muitos que tem trazido adorei

    ResponderExcluir
  9. Oi magda td bem? Gostei demais.
    Eu sou meia medrosa em mexer no html kkkk
    Bjs

    ResponderExcluir

Deixe um comentário, que ficarei muito feliz!!!!!
Abraços á todos!!!!