Ícones para Redes Sociais Fixadas no Canto do Blogger Com Efeito JQuery

Nesta postagem compartilho com vocês estes excelentes botões de compartilhamento fixados no canto da tela com efeito JQuery - que é o efeito que se expande ao pararmos o cursor do mouse sobre o botão. Você pode ver uma demostração ao lado do nosso site.

Para colocar no blogger... Entre em "Layout" - "Adicionar um Gadget"e cole o seguinte código

<style>
/* Ícones para Redes Sociais Fixadas no Blogger by DicasHot
body .social_site {cursor: pointer;height: 64px;left: -140px;overflow: hidden;position: fixed;width: 200px;z-index: 10000;}
body .social_closed {left: -170px;}
body .social_open {left: 0;}
body .social_site .icon {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7nAejoGFUa5TEUsaOiQAHKQDNke8BRVyR2mrCKoHZ3XxX_P-UQB2o4u7mdC-DFfMK3V7n6HXfeQnHb3_jM6ruY_osUUsjycvNIVp78PFUo6mUW6e_onxEyCyhOFmgxg27NdSQfYT7OEw/s1600/social-sprite.png") repeat scroll 0 0 transparent;float: right;height: 64px;width: 60px;}
body .social_site .tray {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7nAejoGFUa5TEUsaOiQAHKQDNke8BRVyR2mrCKoHZ3XxX_P-UQB2o4u7mdC-DFfMK3V7n6HXfeQnHb3_jM6ruY_osUUsjycvNIVp78PFUo6mUW6e_onxEyCyhOFmgxg27NdSQfYT7OEw/s1600/social-sprite.png") repeat-x scroll 0 0 transparent;float: right;height: 64px;width: 140px;}
body .social_facebook {top: 205px;}
body .social_facebook .icon {background-position: 60px -74px;}
body .social_facebook .tray {background-position: -15px -74px;}
body .social_facebook .tray p {
display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_facebook .tray p a, body .social_facebook .tray p a:active, body .social_facebook .tray p a:visited {
color: #FFF;text-shadow: 1px 1px 0px #077EAB; -webkit-text-shadow: 1px 1px 0px #1F366B; -moz-text-shadow: 1px 1px 0px #1F366B;display: block;font-size: 10px;width: 100%;text-decoration:none;}
body .social_users {top: 340px;}
body .social_users .icon {background-position: 60px -6px;}
body .social_users .tray {background-position: -15px -6px;}
body .social_users .tray p {display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_users .tray p a, body .social_users .tray p a:active, body .social_users .tray p a:visited {
color: #FFF;text-shadow: 1px 1px 0px #313131; -webkit-text-shadow: 1px 1px 0px #2c2c2c; -moz-text-shadow: 1px 1px 0px #2c2c2c;display: block;font-size: 10px;margin-top: 0l;width: 100%;text-decoration:none;}
body .social_gplus {top: 273px;}
body .social_gplus .icon {background-position: 60px 71px;}
body .social_gplus .tray {background-position: -15px -141px;}
body .social_gplus .tray p {display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_gplus .tray p a, body .social_gplus .tray p a:active, body .social_gplus .tray p a:visited {color: #FFF;text-shadow: 1px 1px 0px #313131; -webkit-text-shadow: 1px 1px 0px #2c2c2c; -moz-text-shadow: 1px 1px 0px #2c2c2c;display: block;font-size: 10px;margin-top: 0l;width: 100%;text-decoration:none;}
</style>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<script type='text/javascript'>
window.onload = function socialButtons() {
       $('.social_site').hover(function() {
           $(this).stop().animate({
               left: '0px'
           },
           'fast')
       },
       function() {
           $(this).stop().animate({
               left: '-140px'
           },
           'fast')
       })
   }
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'pt-BR'}
</script>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
<div class='social_site social_users' id='social_link_users'><a><div class='icon'></div></a>
<div class='tray bg_denovo'><p><a>Siga-nos no Twitter:</a></p>
<p id='users_online_box'>
<a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a></p>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div></div>
<div class='social_site social_facebook' id='social_link_facebook'><a><div class='icon'></div></a>
<div class='tray bg_denovo'>
<p><a>Curta-nos no Facebook:</a></p>
<div class='fb-like' data-href='https://www.facebook.com/Dicashot‎' data-layout='button_count' data-send='false' data-show-faces='false' data-width='450' style='margin-left: 30px; margin-top: -20px;'></div></div></div>
<div class='social_site social_gplus' id='social_link_gplus'>
<a href='#' target='_blank' title='Google+'><div class='icon'></div>
</a>
<div class='tray bg_denovo'>
<p><a>Dê um +1 no nosso Blog:</a></p><p id='g_plus_box' style='margin-top: -1px;margin-left: 12px;'><g:plusone></g:plusone></p></div></div>

Apenas coloque a URL da sua página no Facebook na parte destacada de AZUL e pronto!!!

Tendo feito isto está terminado.

Deixe seu comentário!!!

Carregando atualizações...

Ícones para Redes Sociais Fixadas no Canto do Blogger Com Efeito JQuery

DESTAQUES DO MÊS