Tutorial: Ícones flutuantes das redes sociais
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
13 comentários
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! ♥
ResponderExcluirBesos, Éh!
www.momentosassim.com.br
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!
ExcluirObrigada pela visita, volte mais vezes!
Vou conhecer seu cantinho!!!
bjus
Obrigada pela Dica
ResponderExcluirBeijinhos
Saraemlondres Blog !! Facebook !! Youtube
De nada Sara... disponha!
Excluirbjus
O tutorial é muito bom, seu blog é Mara. Parabéns!
ResponderExcluirBlogboynews.blogspot.com.br
Amei a dica!!! Vou colocar no meu Blog! Beijos Reh!!! <3
ResponderExcluirwww.paisdeprimeiraviagem27.com.br
Oi Reh amei o tutorial, tentei colocar mas não esta aparecendo, ta branco
ResponderExcluiro que eu faço?
Oii, tudo bem ?
ResponderExcluiramei 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
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
Excluirlink do tuto: http://www.renatamassa.com/2015/01/tutorial-menu-fixo-no-topo-do-blog.html
bjus
oi adorei o post.
ResponderExcluirqueria saber e se eu quiser adicionar outra rede social como que eu modifico para
que de certo
bjs, obrigado adorei
Olá aonde eu coloco o logo tipo? Não aparece
ResponderExcluirgostei muito, queria saber se você poderia me ajudar com as cores, gostaria de mudar a cor.
ResponderExcluirRê, não está aparecendo a logo das redes sociais, mas o código está funcionando. você sabe o que pode ser?
ResponderExcluirBeijos!
Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.