Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Efeitos CSS Redes Sociais Widget Yara Georgia

Gadget Polaroid Ícones para Redes Sociais com CSS3

É-nos sabido que podemos fazer efeitos incríveis com CSS3, efeitos esses que antes, para serem obtidos, geralmente precisávamos de algum script e/ou plugin de jQuery.

Vamos ver agora um simples e elegante GADGET para exibir os ícones de redes sociais no seu blog usando apenas CSS3.

Demo

[becape]Antes de mais nada é sempre bom fazer um backup do seu template antes de fazer quaisquer modificações, para evitar possíveis transtornos.[/becape]

Entre no Layout do seu blog e adicione um gadget do tipo HTML/JavaScript. Insira aí o seguinte código:


<div id='social'>
<div id='icones'><ul>
<li><a href='#'><img src='http://1.bp.blogspot.com/-u3WKeJ8Yya4/UTSmz0c5yqI/AAAAAAAADAI/ROe1s1sABsw/s1600/delicious.png' /></a></li>
<li><a href='#'><img src='http://3.bp.blogspot.com/-L8QJcm4gAWM/UTSmz3s-NCI/AAAAAAAADAM/AZzTp_elcsA/s1600/feedburner.png' /></a></li>
<li><a href='#'><img src='http://3.bp.blogspot.com/-QB4FB1v8Cj0/UTSmz9SfS5I/AAAAAAAADAQ/jjT_x1C_tPI/s1600/facebook.png' /></a></li>
 <li><a href='#'><img src='http://3.bp.blogspot.com/-9vSZGHwF46k/UTSm0bc3c3I/AAAAAAAADAc/ZQklTHD7lCE/s1600/linkedin.png' /></a></li>
 <li><a href='#'><img src='http://3.bp.blogspot.com/-cEy4N8wYi0k/UTSm0VbhWwI/AAAAAAAADAg/0TcuUuLYNMI/s1600/rss.png' /></a></li>
<li><a href='#'><img src='http://2.bp.blogspot.com/-UWv6DlMOHAA/UTSm0byPCSI/AAAAAAAADAk/odEwyTW7wwg/s1600/flickr.png' /></a></li>
<li><a href='#'><img src='http://1.bp.blogspot.com/-YfO3jWePSIM/UTSm0xcbudI/AAAAAAAADAs/S3sy14i1THA/s1600/skype.png' /></a></li>
<li><a href='#'><img src='http://4.bp.blogspot.com/--pmEEnGL4p4/UTSm05Kp7UI/AAAAAAAADAw/Y5N73wRbT-c/s1600/twitter.png' /></a></li>
<li><a href='#'><img src='http://4.bp.blogspot.com/-8RHhZ1c7fyg/UTSm1Nlmz_I/AAAAAAAADA4/XU1Kl8h0gpE/s1600/youtube.png' /></a></li>
     </ul></div>
    </div>

Substitua as ocorrências de # pelos seus próprios links.
É recomendável que você baixe as imagens e as hospede onde achar melhor; e também é possível retirar ou incluir outros links, basta baixar os ícones diretamente por aqui.

[alerta]Este set de ícones não me pertence, eu apenas o encontrei aleatoriamente e tive a ideia do tutorial. Todos os direitos vão para o criador original.[/alerta]

Lembre-se apenas de editar o trecho da largura do container, destacado no CSS, caso queira incluir mais algum.

Após salvar, vá até o Designer de Modelo > Avançado > Adicionar CSS e cole o seguinte:


#social {
 width:700px; /* edite se for incluir mais links */
 position: fixed;
 top: 0px;
 left: 20px;
}
#icones {
 position: absolute;
 z-index: -1;
 margin-top: -57px;
 transition: margin-top 0.5s;
 -moz-transition: margin-top 0.5s;
 -webkit-transition: margin-top 0.5s;
 -o-transition: margin-top 0.5s;
}
#icones:hover {
 margin-top: 0px;
}
#icones li {
 margin: 0px;
 margin-top: -60px;
 padding: 0px;
 display: inline;
 z-index: 3000;
}
#icones img {
 opacity: 0.4;
 -moz-opacity: 0.4;
 -webkit-opacity: 0.4;
 -o-opacity: 0.4;
 transition: opacity .5s;
 -moz-transition: opacity .5s;
 -webkit-transition: opacity .5s;
 -o-transition: opacity .5s;
}
#icones img:hover {
 opacity: 1.0;
 -moz-opacity: 1.0;
 -webkit-opacity: 1.0;
 -o-opacity: 1.0;
}

 

O Designer de Modelo mostrará uma preview instantânea de como vai ficar.
Clique em Aplicar ao blog e pronto! Entre no seu blog e passe o mouse sobre um dos links para ver o efeito funcionando.

Bom, galera, espero que vcs tenham curtido o meu primeiro tutorial aqui no Mundo Blogger.
Até a próxima 😀

Yara é colaboradora no Mundo Blogger. Paulistana extraditada pela universidade, proudly Sistemas de Informação. Programadora por aspiração. Webdesigner por conveniência. Poliglota por excesso de miolos. Pseudocontadora por paraquedismo, compositora por insônia e escritora por compulsão. Fundadora/autora/editora/relações públicas/CEO no blog Schrei in Deutsch.

Sobre o autor | Website

Yara é colaboradora no Mundo Blogger. Paulistana extraditada pela universidade, proudly Sistemas de Informação. Programadora por aspiração. Webdesigner por conveniência. Poliglota por excesso de miolos. Pseudocontadora por paraquedismo, compositora por insônia e escritora por compulsão. Fundadora/autora/editora/relações públicas/CEO no blog Schrei in Deutsch.

Desculpe, os comentários deste artigo estão encerrados.

7 Comentários

  1. YASSUI FORTES disse:

    Super deu certo e adorei o efeito! Super obrigada!

  2. Eu ja tentei diversas vezes com diversos códios colocar Gadget de Rede Social no meu blog. Vejo muitas pessoas falando que conseguiram, mas ja perdi as contas de quanto tentei e não consegui kkkk’ Você acha que isso é um problema no meu Blogger, pq ja abri um blog para testar e também não vai 🙁 Por favor se vc souber oque é isso e oque posso fazer me avise! Obrigada, e adorei o Blog!

  3. Show mais, não ficaria muito bom no meu Blogger por ter template branco

  4. Excelente essa dica, sempre acesso o Mundo Blogger a procura de informações, e como resultado, sempre acho o que procuro, essa dica eu não tinha visto, estava ausente, mas no Mundo Blogger é assim o internauta não perde informações, vou aplicar em meu blog, se tudo der certo vamos ver os resultados! Fiquem com Deus muita paz e sucessos!

  5. Não leve a mal meu comentário, que é no bom sentido. Visitando aqui OMundoBlogger, o painel de ajuda do Blogger, Coisas da Meri, e alguns outros blogs dirigidos por mulheres, dedicadas ao assunto Blogger, tenho percebido um montão de mulheres inteligentes, bonitas, sensíveis,a senhorita Yara.G também. Oras, porque fico eu JOSÉ espalhando confete? Justifico: voces mulheres, são o motor do planeta, tudo gira em volta dessa mais bela criação de DEUS O SUPREMO ARQUITETO, as mulheres; e como não ficar entusiasmado e admirado por deparar com tanta inteligência e charme especialmente com sua auto descrição? Desejo-lhe sucesso, aliás, merecido.

    a. Estéfani JOSÉ Agoston GRIFAO

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.