Coloque o Efeito HeartBeat no seu blog.

| | Comentários: 13


O Efeito HeartBeat é muito fofo, pois ao passar o mouse na imagem, ela pulsará igual a um coração.Você poderá colocar na lateral do seu blog ou na sua postagem.


HeartBeat


Olá, meus amigos queridos do coração!!

Chegando com uma dica muito fácil de fazer no seu blog, se você quiser dar um efeito em alguma imagem na sua postagem ou na lateral do seu blog.O efeito se chama HeartBeat. Esse efeito faz com que a imagem que você escolheu, bata igual a um coração, quando o mouse fica em cima dela.

Quer ver como fica esse efeito? Então vem comigo!!

Clique em Códigos Fáceis e veja o efeito HeartBeat na postagem e na lateral do blog.

 Antes de começar o tutorial, aconselho sempre fazer o backup do seu layout ( cópia ), caso algo dê errado.Não sabe fazer? Aprenda clicando aqui


Vamos ao Tutorial: 

 Entre no painel do seu blog, clique em MODELO e depois em EDITAR HTML. Dentro da caixinha de códigos do seu blog, procure por esse trecho: ]]></b:skin>


Acima desse trecho, cole o código abaixo:


@-webkit-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
@-moz-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
@-o-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
.efeito-heartbeat-isa {-webkit-transition: .5s; border:solid 2px #E42D8A;border-radius: 10px;box-shadow: 1px 1px #caebe6;}.efeito-heartbeat-isa:hover {-webkit-animation: efeito-heartbeat-isa .5s alternate infinite linear;border:solid 2px #DC1B7A;} 




SALVE

Efeito na lateral do blog:

 

Depois volte para o seu painel e clique em Layout, Adicionar um gadget e clique em HTML/JAVASCRIPT. Clique dentro da caixinha o código abaixo:

<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a> 

Coloque o endereço da imagem na parte em vermelho ( dentro das aspas ). Seu efeito ficará na lateral do seu blog.

 Para pegar o endereço de uma imagem, ela deverá está hospedada em qualquer site de imagens ou você pode publicá-la em um blog de testes e pegar o código.Leia: Google Fotos: Novas funções no trabalho com imagens.

Efeito dentro da postagem:  

 

Se você estiver fazendo uma postagem e quer colocar o efeito dentro, dê uma parada aonde você quer colocar o efeito e clique no botão HTML da sua postagem. Você verá vários códigos, que é da sua postagem que está sendo escrita. Copie o mesmo código acima e faça igual como na lateral do blog.

<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>

 Se quiser colocar mais imagens, copie o código quantas vezes quiser.

Leia também: Conheça o Efeito Just Jump.


                       
                                                   
                                                                           

13 comentários:

  1. ░░▄███▄███▄
    ░░█████████
    ░░▒▀█████▀░
    ░░▒░░▀█▀
    ░░▒░░█░
    ░░▒░█
    ░░░█
    ░░█░░░░███████
    ░██░░░██▓▓███▓██▒
    ██░░░█▓▓▓▓▓▓▓█▓████
    ██░░██▓▓▓(◐)▓█▓█▓█
    ███▓▓▓█▓▓▓▓▓█▓█▓▓▓▓█
    ▀██▓▓█░██▓▓▓▓██▓▓▓▓▓█
    ░▀██▀░░█▓▓▓▓▓▓▓▓▓▓▓▓▓█
    ░░░░▒░░░█▓▓▓▓▓█▓▓▓▓▓▓█
    ░░░░▒░░░█▓▓▓▓█▓█▓▓▓▓▓█
    ░▒░░▒░░░█▓▓▓█▓▓▓█▓▓▓▓█
    ░▒░░▒░░░█▓▓▓█░░░█▓▓▓█
    ░▒░░▒░░██▓██░░░██▓▓██
    ████████████████████████
    █▄─▄███─▄▄─█▄─█─▄█▄─▄▄─█
    ██─██▀█─██─██─█─███─▄█▀█
    ▀▄▄▄▄▄▀▄▄▄▄▀▀▄▄▄▀▀▄▄▄▄▄▀.....★MaRiBeL★

    http://yomismaokk.blogspot.com.es/

    ResponderExcluir
  2. Oi magda td bem?
    Gostei da postagem e do efeito beijos

    ResponderExcluir
  3. Como sempre mais uma excelente dica para o blog, gostei muito da dica do efeito HeartBeat, é mais uma sugestão para enriquecer o blog, bjs.

    ResponderExcluir
  4. Olá Magda,boa noite!
    O efeito parece bem interessante,mas será que não deixa o blog lento?
    Bjs.

    ResponderExcluir
  5. Boa Noite Magda!Este efeito HeartBeat é muito legal,fiquei pensando em uma imagem de rosa,acho que fica legal,depois vou tentar.Dica maravilhosa!Bjss

    ResponderExcluir
  6. Olá Magda Bom dia olha vou colocar no blog esse efeito fica muito legal eu já vi em outros blogs que visitei e é bem fácil de colocar obrigado por compartilhar com a gente beijos da Ju Tavares

    ResponderExcluir
  7. Olá Magda!
    Sempre com uma excelente postagem para nós, tutorial super fácil. Parabéns!

    Bjokas da Vaci :*

    ResponderExcluir
  8. Olá,
    Mesmo não estando participando do SUPER COMENTÁRIOS, esta semana, prometi que viria visitar e comentar todos os links.
    Parabéns pelo prost acima!!
    Avisa aí que o BLOG DO PARCEIRO esteve aqui:

    http://josenidelima.blogspot.com.br/

    ResponderExcluir
  9. Uauuuuuuuuuu que dicas maravilhosa amada! como sempre você nos ajudando! muitooooooooooo, muitooooooooooo obrigado por compartilhar, beijinhosssssssssss

    ResponderExcluir
  10. Mais uma dica maravilhosa para o nosso cantinho!!
    bjus

    ResponderExcluir
  11. Adorei a dica Magda! Vou tentar fazer no meu blog :)
    Parabéns!

    Super beijo.

    ResponderExcluir
  12. É bem diferente de tudo que eu já vi em efeitos de imagens, gostei ...
    Valeu por mais essa dica super legal Magda!

    Bjos
    Minda ❤ 😍

    ResponderExcluir

Eu agradeço a todos por comentarem no meu blog e assim que for possível, estarei respondendo aos comentários de todos.Bjsss!!