filmetub: Redes Sociais com Efeito CSS3

sábado, 3 de dezembro de 2011

Redes Sociais com Efeito CSS3

Olá Pessoal, hoje iremos aprender como colocar um menu com 3 botões de redes sociais, eles são o Twitter, Facebook e também o Feed. Os botões possui efeitos em CSS3, tendo como efeito de rotação e opacidade. Esses botões são essenciais para o seu blog, ao passara o mouse por cima dos botões você terá um efeito muito atraente para o seu blog.
Veja o demo: http://demo3ub.blogspot.com/

Vamos ao Tutorial:
1º - Vá no Painel de Controle de seu blog e clique na Guia Layout (Design → Elementos de Página).
2º - Clique em Adicionar um Gadget e selecione a opção HTML/JavaScript.
3º - Cole o código abaixo:

     <style>
     .minhasredes3 {
    padding: 15px;
    }
     .minhasredes3 a {
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;    opacity: 0.5;    }     .minhasredes3 a:hover {    opacity: 1;    }     .minhasredes3 img {    -webkit-transition:All 0.2s ease;    -moz-transition:All 0.2s ease;    }
    </style>     <div class="minhasredes3">    <a href="URL DO PERFIL DE SEU TWITTER"target="blank" title="Siga-me no Twitter"><img src="http://dl.dropbox.com/u/49685791/twitter-icon.png"/></a>    <a href="URL DO PERFIL DE SEU FACEBOOK"target="blank"title="Me adicione no Facebook"><img src="http://dl.dropbox.com/u/49685791/facebook-icon.png"/></a>    <a href="NOME DE SEU FEED"target="blank"title="Assine nosso Feed"><img src="http://dl.dropbox.com/u/49685791/rss-icon.png"/></a>    </div>
Lembre-se: 
  • URL DO PERFIL DE SEU TWITTER: Substitua essa parte pelo link do perfil de seu Twitter.
  • URL DO PERFIL DE SEU FACEBOOK: Substitua essa parte por todo o link do perfil de seu Facebook ou pelo link da página de seu Blog.
  • NOME DE SEU FEED: Substitua essa parte pelo nome do feed de seu blog. Exemplo: http://feeds.feedburner.com/UtilizandoBlogger (no caso NOME DE SEU FEED é: UtilizandoBlogger).
4º - Feito as modificações, clique em "Salvar".

Este código é de Códigos Blogger, mas com pequenas alterações.

Nenhum comentário:

Postar um comentário