3 de dezembro de 2011

4

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.

4 Comentários:

Ezequiel da Silva disse... [Responder Comentário]

Boa dica Bruna, lembrando que é sempre muito importante disponibilizar a opção para nossos leitores divulgarem nossos posts, parabéns de novo!

Ricardo Caetano disse... [Responder Comentário]

Oi Bruna, esse efeito fica muito bom.. eu utilizo o efeito transition no CSS3 mas para mudar de uma cor para a outra.

Bruna T. Marques disse... [Responder Comentário]

@Ezequiel da Silva, obrigada pelo comentário. Com certeza, para isso é recomendável usar o "AddThis" que podemos divulgar nosso artigo em várias redes sociais.

@Ricardo Caetano, obrigada pelo comentário. Esse efeito que você utiliza, realmente dá um aspecto muito elegante ao blog.

Claudio Sanches disse... [Responder Comentário]

Esta meio errado e faltando coisas ai neste código.

Primeiro de tudo, CSS3 de verdade não tem ai.
O que seria CSS3 é o "transition" mesmo, sem nenhum prefixo.
Esses outros com prefixos são linguagens proprietárias e estão longe de ser o ideal para a web.

Porém em um futuro próximo não vai mais existir nenhum desses prefixos e ser usado apenas o "transition".

Outra coisa, esse "All", apesar de CSS não ser uma linguagem Case sensitive, recomendo você utilizar tudo em caixa baixa.

O CSS não pode ir dentro do gadget/widget, pois o style irá ficar dentro do <body> do corpo HTML, o que é incorreto segundo as diretrizes do W3C.

O correto é colocar antes do </head>.

Enfim a forma correta de escrever esse código seria:

<style>
.minhasredes3 {
padding: 15px;
}

.minhasredes3 a {
transition:all 1s ease; /* CSS 3 */
-webkit-transition:all 1s ease; /* Google Chrome e Safari */
-o-transition:all 1s ease; /* Opera */
-moz-transition:all 1s ease; /* Mozilla Firefox */
opacity:0.5;
}

.minhasredes3 a:hover {
opacity: 1;
}
</style>

Não existe a necessidade de dar "transition" na imagem também, pois a condição foi dada para o link que envolve a imagem.
Desta forma já funciona e ai esta comentado para que cada linha serve.

Sobre o HTML:

É de total importância que toda imagem no corpo HTML tenha atributo "alt".
Este atributo é obrigatório segundo as diretrizes da W3C.
Serve para indicar um texto caso a imagem não seja carregada, ele pode ser lido por leitores de telas usados por deficientes visuais e também é usado para indexar imagens no Google Images.

Forma correta de usar a imagem:

<img src="http://dl.dropbox.com/u/49685791/rss-icon.png" alt="Feed" />

Postar um comentário

Parcerias são feitos em suas respectivas páginas.
- Se deseja falar com nossos autores, criticar ou sugerir, solicite nosso
Formulário de Contato
- Evite divulgar o seu blog nos comentários para que ele não seja excluído por nosso autor.
- Não utilize linguagem vulgar e tente falar sobre algo que esteja ligado ao artigo.

Licença Creative Commons
Free Page Rank Tool