Ícones sociais animados com CSS3 para Blogger


Todos nós sabemos a importância que se tem de um blog estar integrado as redes sociais. As mais comuns hoje em dia são as três principais, Google+, Facebook e Twitter. Estes meios de divulgação são necessários para a interatividade dos seus leitores com seu blog, além de trazerem um excelente retorno em visitas.

Quando você está no meio das redes sociais, você disponibiliza seu blog a milhões de pessoas. Está a aí uma das grandes importâncias de você estar nas redes sociais. Agora, vamos aprender a como adicionar ao nosso blog estes maravilhosos ícones animados em CSS3. Vamos lá?

Primeiro de tudo, faça o test-drive e veja como eles são, antes de adiciona-los ao seu blog:





Depois de ter gostado e se divertindo passando o mouse em cima dos ícones (rs), vá ao seu Blogger > Layout > Adicionar Gadget > HTML/JavaScript, e cole o código abaixo:

<center><p id="socialicons"><a href="http://www.facebook.com/seufacebook"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieqRkf-DIAfyfbA62hmk8_8oPz5Zv8gGJ2kfo0IJNUyvEBXzaECCxm0IGjIKdTgdh4SuVemSzZwZItVPRW0T3ShnL9MFQjNrjdd7CNDibRSWIsgwQg3UJiYaugqzNl-zXSHxpfoUtay3bw/s200/facebook.png" /></a><a href="http://www.twitter.com/@seutwitter/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ZyQQlxaUvulQCEshu2pzzzkHb8EDZDciaYxoT1A9kpUTSnPjcwvHeC8WJmlg75QoCNXanQbIvQ3PgcAqfFNU3aO9HaIh45Hjy5OqLdUrPtd07JpCty0OrnLLsLHojgVfBrgfxJytujfL/s200/twitter.png" /></a><a href="https://plus.google.com/u/0/suaiddogoogleplus"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0awOykZsveZmTeZ0-RMAF-23T3CLoR3I6LuQPkMVStS3cU0DpuCu7zcS8hKBqCuEQKJv0jitzerQmKcUQTQvc3kwdJdoNMda2EImUxleKEredurdab5zMC_QuR_IUp1gVlH_wZYJfNu7S/s200/google%252B.png" /></a><a href="http://feeds.feedburner.com/seufeed/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieNWxYXlcCybWAIzZfSziNARmBnwOHW4tl5_4EhvfazfCDFNSKKMMabzQcYVG532-HexhoyMUb3zNoSs0_08u597Bz7Gp4oemA1d9xyd-0o_ONru2NqMMT8uvGdUcDZOEtsIgpyqJCpQxg/s200/RSS.png" /></a><a href="http://www.youtube.com/seucanalnoyoutube/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-qUgzFoiLehbIDFdUad-pePS-3U1NtIM5qAtiwGoM7759UMfe4mtB9JqThyL2wNo-DwRYye2bXxBHqjWwVHRnudx9XPQRgLk5ke9LXydPeDCDifz8idjn4XQtjRpY-4wcA2yqz4ZNgPY/s200/youtube.png" /></a></p></center>

<style>p#socialicons img {
/* Ícones sociais animados com CSS3 */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#socialicons img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

/* Ícones sociais animados com CSS3 */
</style>

Faça as devidas alterações nas partes que estão em negrito, seufacebook, @seutwitter, suaidnogoogleplus, seufeed e seucanalnoyoutube, colocando suas informações. Aproveitem! ;)


Créditos: Helper Blogger.

11 comentários:

  1. Antonio,

    Se você utilizar o Feedburner, é só trocar a palavra "seufeed", que está destacada em negrito no código pelo nome do seu feed. Por exemplo, o do Redes e Blogger é assim:

    http://feeds.feedburber.com/redeseblogger

    Se você não utilizar o Feedburner, é só trocar o link inteiro pelo endereço do seu Feed.

    Se você quiser trocar as imagens, ou acrescentar mais, pode faze-lo da mesma forma que as outras. Tudo neste código é editável.

    Obrigado pela visita, volte sempre!

    Abraço!

    ResponderExcluir
  2. Muito boa Vídeo Aula !

    ResponderExcluir
  3. Obrigado, me ajudou muito... São muito legas os gadget

    ResponderExcluir
  4. você salvou meu blog (rsrs) Obrigado pelas dicas! Ficou perfeito no meu blog, não tive dificuldade nenhuma em add o gadget. Valeu amigo.
    www.karllosmagno.blogspot.com.br

    ResponderExcluir
  5. Coloquei, Mas N vai p nenhuma das Mhs paginas... e agora?

    ResponderExcluir
    Respostas
    1. Selma, tudo bem?

      Leia o último parágrafo do artigo e veja que é necessário alterar os links que estão aqui para os seus.

      Exemplo: http://www.facebook.com/seufacebook
      Altere para: http://www.facebook.com/SeuLink

      Espero ter ajudado!

      Excluir
  6. gostaria de colocar apenas o do face, you tube e g+, pois nao tenho o twiter da escola e nem feed...como fazer sou apenas curiosa no assunto... http://eeprofantonicobocaiuva.blogspot.com. obrigada

    ResponderExcluir
  7. Wilamis, no meu caso, eu gosta ria de colocar somente o gadget do TT e do face... como faria então? Desde já, brigadinha!

    ResponderExcluir
  8. otimo o meu deu certinho obrigada pela ajuda!!!

    ResponderExcluir

Visualizações dinâmicas

Arquivo do blog

Estamos aqui também

Copyright© 2010 - 2013 - Redes e Blogger - Todos os direitos reservados.

Redes e Blogger é orgulhosamente desenvolvido com Blogger


Termos de uso | Política de Privacidade | Mapa do blog

Template by Dicas Blogger | Modified by Wilamis Rogério