Barra flutuante para seguir nas redes sociais #1 | Quero Dicas | Tutoriais para seu blogs


Barra flutuante para seguir nas redes sociais #1


Quer um barra elegante para o seu blog? Que bom, esta é ótima para você.

A diversos modelos de barras flutuante de redes sociais para ser colocada no blog. Hoje, eu estarei compartilhando uma dessas inúmeras.
Ela fica na lateral esquerda do blog, tendo uma ótima visibilidade para seus visitantes. Vamos ao tutorial?


    Código 1






1 - Primeiramente, faça um backup do seu template. Não sabe como fazer um backup? Não tem problema, clique aqui e aprenda.

2 - Acesse o HTML do seu blog e procure pelo código 


 </head>
 

3 - Acima de </head>, cole o código abaixo

 <script> 
$(window).load(function(){ 
$('.social-buttons .social-icon').mouseenter(function(){ 
$(this).stop(); 
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
}); 
$('.social-buttons .social-icon').mouseleave(function(){ 
$(this).stop(); 
</script> 
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
}); 
}); 

 

    Código 2

1 - Ainda no HTML, procure o código

 </body>
 

2 - Cole acima de </body>, o código disponível que está abaixo

 <div class='social-buttons button-right hidden-phone hidden-tablet'>

<a class='itemsocial' href='URL DA FANPAGE' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Curta-nos no Facebook</span></span></a>
<a class='itemsocial' href='URL DO TWITTER' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Siga-nos no Twitter</span></span></a>
<a class='itemsocial' href='URL GOOGLE+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Siga-nos no Google+</span></span></a>
<a class='itemsocial' href='URL DO PINTEREST' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Siga-nos no Pinterest</span></span></a> 
<a class='itemsocial' href='URL DO YOUTUBE' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Siga-nos no Youtube</span></span></a>
<a class='itemsocial' href='URL DO FEED' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Assine nosso RSS</span></span></a>
</div>

 

Personalizando o código

• Onde estiver escrito 'URL DA FANPAGE', coloque o endereço correspondente a sua rede social.
Exemplo: 
<a class='itemsocial' href='https://www.facebook.com/Quero.Dicas' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Curta-nos no Facebook</span></span></a>

• Onde estiver escrito Curta-nos no Facebook, escreva o mais desejar, como "Curta no FaceBook", ficando no final assim.
Exemplo:
<a class='itemsocial' href='https://www.facebook.com/Quero.Dicas' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Curta no Facebook</span></span></a>

    Código 3

1 - Procure por:

 ]]></b:skin>
 

2 - Acima dela, cole o código disponível que está abaixo


 .social-buttons { 
position: fixed; 
top: 200px; left: 0%; /* Altura */
width: 45px; /*margem da lateral */

z-index: 9999; 
} 
.button-left { 
left: 0; 
} 
.button-right { 
right: 0; 
} 
.social-buttons #twitter-btn .social-icon, 
.social-buttons #facebook-btn .social-icon, 
.social-buttons #google-btn .social-icon, 
.social-buttons #rss-btn .social-icon, 
.social-buttons #pinterest-btn .social-icon, 
.social-buttons #youtube-btn .social-icon { 
background-color: #33353B; /*Cor dos botões */
background-image: url(http://4.bp.blogspot.com/-_OnAnqxOm4o/U_rAx6T_9vI/AAAAAAAAGLg/fowl3louwHU/s1600/3mas-icons.png);} 
.button-left #facebook-btn span { 
background-position: right 10px; } 
.button-left #twitter-btn span { 
background-position: right -35px; } 
.button-left #google-btn span { 
background-position: right -127px; } 
.button-left #rss-btn span { 
background-position: right -80px; } 
.button-left #pinterest-btn span { 
background-position: 11px -177px; } 
.button-left #youtube-btn span { 
background-position: 11px -223px; } 
.button-right #facebook-btn span { 
background-position: 12px 10px; } 
.button-right #twitter-btn span { 
background-position: 11px -35px; } 
.button-right #google-btn span { 
background-position: 10px -127px; } 
.button-right #rss-btn span { 
background-position: 11px -80px; } 
.button-right #pinterest-btn span { 
background-position: 11px -177px; } 
.button-right #youtube-btn span { 
background-position: 11px -223px; } 
.social-buttons #facebook-btn:hover .social-icon {width:190px; float:left; 
background-color: #3B5998; /* Cor Hover do botão */
} 
.social-buttons #twitter-btn:hover .social-icon {width:190px; float:left; 
background-color: #62BDB2; /* Cor Hover do botão */
} 
.social-buttons #google-btn:hover .social-icon {width:190px; float:left; 
background-color: #B22222; /* Cor Hover do botão */
} 
.social-buttons #rss-btn:hover .social-icon {width:190px; float:left; 
background-color: #FF8B0F; /* Cor Hover do botão */
} 
.social-buttons #pinterest-btn:hover .social-icon {width:190px; float:left; 
background-color: #FA8072; /* Cor Hover do botão */
} 
.social-buttons #youtube-btn:hover .social-icon {width:190px; float:left; 
background-color: #FF0000; /* Cor Hover do botão */
} 
.social-buttons a:hover .social-text {width:160px; float:left; 
display: block; 
} 
.button-left .social-icon { 
-moz-transition: background-color 0.4s ease-in 0s; 
-webkit-transition: background-color 0.4s ease-in 0s; 
background-repeat: no-repeat; 
display: block; 
float: left; 
height: 43px; 
margin-bottom: 2px; 
width: 43px; 
} 
.button-left .social-text { 
display: none; 
float: right; 
font-size: 1em; 
font-weight: bold; 
margin: 11px 40px 11px 0px; 
white-space: nowrap; 
} 
.button-right .social-icon { 
-moz-transition: background-color 0.4s ease-in 0s; 
-webkit-transition: background-color 0.4s ease-in 0s; 
background-repeat: no-repeat; 
display: block; 
float: right; 
height: 53px; 
margin-bottom: 2px; 
width: 43px; 
} 
.button-right .social-text { 
display: none; 
float: left; 
font-size: 90%; 
font-weight: bold; 
margin: 11px 0 11px 50px; 
white-space: nowrap; 
} 
.social-buttons .social-text { 
color: #FFFFFF; /* Cor do texto */
} 


 

Personalizando este código
Aqui é mais demoradinho, mais com calma e paciência a gente chega lá. (risos)

 top: 200px; left: 0%;  /* Altura */ - É a altura que você quer que fique quando acessarem o seu blog. Você pode deixar mais acima do seu cabeçalho ou, mais para baixo.

• width: 45px; /*margem da lateral */ - É o afastamento da barra do lado esquerdo.

• background-color: #33353B; /*Cor dos botões */ - É a cor "fixa" do fundo da barra.

 background-color: #3B5998; /* Cor Hover do botão */ - É a cor quando o mouse passa em cima.

OBS: Neste mesmo trecho do código, você poderá alterar o tamanho da caixa que se expande ou, para mais ou para menos. Veja na imagem.

 color: #FFFFFF; /* Cor do texto */ - É a cor que o texto aparece.
• Não mexa no restante do código, a não ser, que você saiba o que está fazendo.


• Caso você não queira uma das redes, como exemplo "Pinterest" é só excluí-la. 
Mais exclua o código completo e em todos eles (  em, ]]></b:skin> e </body> ) que tenha o nome da rede social que você não deseja ter.

Salve e Pronto!Agora deixe seus visitantes te seguirem nas redes sociais.

Tabela de cores HTML - Flextool

Os créditos da barra lateral é do site Creating Website. Eu dei uma modificada para que ela fosse aceita na plataforma Blogger. Espero que goste e qualquer dúvida, deixe nos comentários.

Gostou? Deixe seu comentário, e em caso de dúvidas é só perguntar. Beijinhos
Me Contrate!

2 comentários

Clique e deixe seu comentários
sexta-feira, 15 janeiro, 2016 ×

como colocar num site? quando passo o mouse não muda.

Resposta
avatar
admin
segunda-feira, 18 janeiro, 2016 ×

Olá Vanessa. Se seguiu o passo a passo e ele não está abrindo, infelizmente, ele deve estar entrando em conflito.
Minha dica é: Tente novamente prestando atenção se copiou corretamente os códigos e se está nos locais corretos.
Espero que tenha ajudado.
Beijinhos ♥

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.