Widget - Redes sociais flutuante dinâmica para Blogger

Atualização: 25/06/2013

Olá pessoal, hoje temos um novo widget de redes sociais para blogger, que encontrei no template Pakdhe Johny, achei muito interessante e tenho que compartilhar. Esse é mais um dos muitos widgets disponíveis para fazer seu blog mais amigável. E esse script não é apenas um deles, mas um dos melhores. Ele é muito semelhante ao que podemos ver nos novos modelos que o Blogger introduziu.

Demonstração

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar Html". Logo em seguida procure por </head> e cole o código a seguir antes dela.

<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(); $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){}); }); }); </script>

2° passo: Com o editor HTML ainda aberto procure por <b:skin> e clique na setinha ► para expandir a edição. Agora procure por </b:skin> e logo acima cole o seguinte código:

.social-buttons { position: fixed; top: 130px; left: 0%; 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(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/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-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:160px; float:left; background-color: #3B5998; } .social-buttons #twitter-btn:hover .social-icon {width:160px; float:left; background-color: #62BDB2; } .social-buttons #google-btn:hover .social-icon {width:160px; float:left; background-color: #DB4A39; } .social-buttons #rss-btn:hover .social-icon {width:160px; float:left; background-color: #FF8B0F; } .social-buttons #pinterest-btn:hover .social-icon {width:160px; float:left; background-color: #D43638; } .social-buttons #youtube-btn:hover .social-icon {width:160px; float:left; background-color: #C4302B; } .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: 43px; margin-bottom: 2px; width: 43px; } .button-right .social-text { display: none; float: left; font-size: 80%; font-weight: bold; margin: 11px 0 11px 40px; white-space: nowrap; } .social-buttons .social-text { color: #FFFFFF; }
4° passo: Agora procure por <body> e cole o próximo código abaixo da tag encontrada.
<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 no Facebook</span></span></a><a class='itemsocial' href='https://twitter.com/USUÁRIO DO TWITTER' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Siga 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 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 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 no Youtube</span></span></a><a class='itemsocial' href='http://feeds.feedburner.com/NOME DO FEED' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Assine o RSS</span></span></a></div>
Realize as seguintes alterações antes de fechar:

Altere USUÁRIO DO TWITTER pelo seu usuário do Twitter.

Substitua NOME DO FEED por seu usuário no Feedburner.

Substitua URL GOOGLE+ por sua página/perfil no Google Plus.

Substitua URL DA FANPAGE por sua página no Facebook.

4° passo: Salve e pronto!

Deixe seu comentário e diga o que achou desse widget!

Share This :