ZMedia Purwodadi
Página inicial Blogger Gadgets Redes sociais Tutorial

Atraente Botões de Rede Social Flutuantes para Blogger

• minutos de leitura
Índice

Você está procurando por uma incrível ferramenta de compartilhamento de mídia social flutuante para blogger?

Se sua resposta é sim, então você veio ao lugar certo aqui, porque neste post eu vou compartilhar um incrível widget botões de rede social flutuantes para blogs blogspot. 

Estes botões flutuantes certamente irá atrair mais visitantes e forçá-los a compartilhar sua página e conteúdo do site com os seus amigos e colegas. Os botões são totalmente flutuantes com efeito vibrar no foco do mouse, em palavras simples o gadget permanecerá estável, mas sempre que o usuário passar o mouse sobre ele, então todos os botões sociais automaticamente aumentarão seu comprimento para o lado esquerdo e diminuirá o seu tamanho com a atividade de vibrar quando o utilizador sair.  

Este Gadget contém os botões de compartilhamento mais importante para seu blog, tais como Facebook, Google Plus, Twitter, YouTube, Pinterest e RSS Feed; tendo simples cor preta, (muda de cor ao passar o mouse).

DEMO

Atraente Botões de Rede Social Flutuantes para Blogger

Como adicionar atraente Botões de Rede Social Flutuantes para Blogger

Este bonito Gadget de compartilhamento tem um design impressionante que se adapta a qualquer site. Em outras palavras, é um gadget de compartilhamento de conteúdo colorido com adequada codificação e personalização, portanto, esta ferramenta foi dividida em três passos simples, então você deve seguir todos os passos abaixo mencionados para usar este gadget em seu site.  

1. Vá ao Painel do Blogger >> Modelo >> Editar HTML  

2. Procure por ]]></b:skin>, e cole o código abaixo antes de  ]]></b:skin> 

.social-buttons{position:fixed;top:150px;width:45px;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;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkftivLipwGhEBeQDif1pJzvQsA2DIaic_eDEgiVeDA6V1UjF9XF02F-VOvHbQfYoBv7QtqOHyHFNQDHf-0U7qtcX-6bJ7ysoGTe-5PTmd-sqLkgjO2vm4bQj1VNFtwTubUDEKHZGfnCk/s1600/mas-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-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}
.social-buttons #facebook-btn:hover .social-icon{background-color:#3B5998}
.social-buttons #twitter-btn:hover .social-icon{background-color:#62BDB2}
.social-buttons #google-btn:hover .social-icon{background-color:#DB4A39}
.social-buttons #rss-btn:hover .social-icon{background-color:#FF8B0F}
.social-buttons #pinterest-btn:hover .social-icon{background-color:#D43638}
.social-buttons #youtube-btn:hover .social-icon{background-color:#C4302B}
.social-buttons a:hover .social-text{display:block}
.button-left .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;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:700;white-space:nowrap;margin:11px 40px 11px 0}
.button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:right;height:43px;margin-bottom:2px;width:43px}
.button-right .social-text{display:none;float:left;font-size:80%;font-weight:700;white-space:nowrap;margin:11px 0 11px 40px}
.social-buttons .social-text{color:#FFF}
.button-left #pinterest-btn span,.button-right #pinterest-btn span{background-position:11px -177px}
.button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px}

3. Agora procure por </head>, copie e cole o código abaixo logo acima de </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});  
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>
4. Agora procure por </body>, copie e cole o código abaixo logo acima de </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/#' rel='nofollow' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/#' rel='nofollow' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/#' rel='nofollow' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/#' rel='nofollow' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow us via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/#' rel='nofollow' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/#' rel='nofollow' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via RSS</span></span></a>
</div>

- Substitua  https://www.facebook.com/# por sua página no Facebook
- Substitua https://twitter.com/# pelo seu nome de usuário no Twitter
- Substitua https://plus.google.com/# pela sua página no Google Plus
- Substitua http://pinterest.com/# pelo seu nome de usuário no Pinterest
- Substitua https://www.youtube.com/user/# pelo endereço do seu canal no YouTube


5. Agora, depois de colar e personalizar todas as configurações acima basta clicar no botão "Salvar modelo" para salvar suas configurações.


Espero que você goste deste Atraente Botões de Rede Social Flutuantes para Blogger. Porque eu estava em busca de um Widget para compartilhar nas redes sociais atraente para blogspot e, finalmente, eu encontrei este gadget que serve para todos os tipos de sites, devido às suas características poderosas. Se você tem alguma dúvida, deixe o seu comentário na seção abaixo. Continuem visitando o meu blog para atualizações mais recentes e dicas.