Tutorial: Ícones flutuantes das redes sociais

12:27


Ola meu povo!!!
Hoje trago para vocês mais um tutorial bem simples pois não precisa mexer no html do seu blog...
Sabe aqueles ícones de redes sociais  flutuantes? Pois é... 
Esse tipo de Gadgets é muito bacana, porque  mesmo quando o visitante do seu blog desce toda barra de rolagem os ícones descem junto, sendo sempre visualizado, tendo assim mais chances de ser seguido também pelas redes sociais.

Esse tutorial peguei no site Prodeveloper, fiz apenas algumas alteraçoes deixando apenas os icones do facebook, twitter e Google plus ( pois sao as redes mais usadas) ,  tirei o tumblr e o Rss... nesse codigo nao tinha o youtube.


Bom entao vamos la...

Acesse o Blogger e vá em "Layout".

Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".

Dentro do conteúdo do gadget, cole o código a seguir:



<style type='text/css'>
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #cccccc;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }

</style>

<div id='social-sidebar'> <ul>
<li><a class='entypo-facebook' href='URL FACEBOOK' target='_blank'>
<span>facebook</span></a></li>

<li><a class='entypo-twitter' href='https://twitter.com/USUÁRIO DO TWITTER' target='_blank'>
<span>Twitter</span></a></li>

<li><a class='entypo-gplus' href='URL GOOGLE+' target='_blank'>
<span>google+</span></a></li></ul></div>




Subistitua as URL das redes selecionadas, 
No inicio do codigo onde tem "background: #cccccc;" substitua pela cor de fundo desejada (no caso desse codigo esta conza claro)

Se voce gostou desse tutorial, deixe um comentario  para que eu fique sabendo. 
Ah... e nao se esqueça de seguir o blog para ficar por dentro das novidades!!!

Quer ver mais Tutoriais Bacanas para seu Blog? Clique Aqui

Você pode gostar também

10 comentários

  1. Tutorial super útil, flor! Muito obrigada! Pretendo utilizar logo logo em meu blog! E aliás, seu blog é lindo, viu? Amei as cores leves que usou! Parabéns e sucesso! ♥
    Besos, Éh!
    www.momentosassim.com.br

    ResponderExcluir
    Respostas
    1. Que bom que foi útil para vc Ellen... essa è minha intenção compartilhar aquilo que ajuda no crescimento do nosso blog, e sem duvida as redes sociais contam muito!
      Obrigada pela visita, volte mais vezes!
      Vou conhecer seu cantinho!!!
      bjus

      Excluir
  2. O tutorial é muito bom, seu blog é Mara. Parabéns!

    Blogboynews.blogspot.com.br

    ResponderExcluir
  3. Amei a dica!!! Vou colocar no meu Blog! Beijos Reh!!! <3

    www.paisdeprimeiraviagem27.com.br

    ResponderExcluir
  4. Oi Reh amei o tutorial, tentei colocar mas não esta aparecendo, ta branco
    o que eu faço?

    ResponderExcluir
  5. Oii, tudo bem ?
    amei o tutorial já usei em meu blog, eu queria saber se dava para você fazer um tutorial de menu fixo, sem usar o html , tem como ?
    adoraria se fosse com o gadget HTML/Javascript

    ResponderExcluir
    Respostas
    1. Oie linda, nesse link tem outro tutorial que usa codigo na gadget, porem quanlquer menu no topo sera necessario ultilizar codigos no html, quase inevitavel rsrsrs
      link do tuto: http://www.renatamassa.com/2015/01/tutorial-menu-fixo-no-topo-do-blog.html

      bjus

      Excluir
  6. oi adorei o post.
    queria saber e se eu quiser adicionar outra rede social como que eu modifico para
    que de certo
    bjs, obrigado adorei

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda