Í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:
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.
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.
Antonio,
ResponderExcluirSe 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!
Muito boa Vídeo Aula !
ResponderExcluirshow muito loko os gadgets.vlw
ResponderExcluirObrigado, me ajudou muito... São muito legas os gadget
ResponderExcluirvocê salvou meu blog (rsrs) Obrigado pelas dicas! Ficou perfeito no meu blog, não tive dificuldade nenhuma em add o gadget. Valeu amigo.
ResponderExcluirwww.karllosmagno.blogspot.com.br
Coloquei, Mas N vai p nenhuma das Mhs paginas... e agora?
ResponderExcluirSelma, tudo bem?
ExcluirLeia 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!
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
ResponderExcluirotimoooo
ResponderExcluirWilamis, no meu caso, eu gosta ria de colocar somente o gadget do TT e do face... como faria então? Desde já, brigadinha!
ResponderExcluirotimo o meu deu certinho obrigada pela ajuda!!!
ResponderExcluir