Box Flutuante de Redes Sociais ao Lado das Postagens

Neste post irei falar aqui no DicasHot a respeito de como colocar em seu blog um deste Gadgets seguidores de redes sociais personalizadas no seu blog; 

Geralmente não se vê muito destes Gadgets em blogs, mas, se vê mais em sites profissionais como, por exemplo, wordpress.

Mas, se você quizer colocar este gadget em seu blog é muito fácil.

1º – Acesse o Painel de seu Blog e clique no Botão Editar HTML.

2º – Em seguida clique em Editar Modelo selecione a caixa ” Expandir modelos Widgets” .

3º – Agora pressione as teclas CTRL + F (atalho de busca na página) e procure pela seguinte Tag:

]]></b:skin>

4º ACIMA dela adicione o seguinte código:

#box{border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:absolute; top:300px; float:left; margin:0 0 0 -100px; text-align:center;}
#box div{margin: 10px 0;}

5º – Agora iremos procurar pela seguinte Tag:

<div class='post-footer-line post-footer-line-3'>

6º – E ABAIXO dela adicione o seguinte código:

<b:if cond='data:blog.pageType == "item"'>
<div id='floating-box'><div id='box'>
<div><a class='twitter-share-button' data-count='vertical' data-via='bcf_oficial' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></div>
<div><g:plusone size='tall'/></div>
<div><fb:like expr:href='data:post.url' font='arial' layout='box_count' send='true' show_faces='false' width='54'/></div>
</div>
</div>
</b:if>

7º – Agora iremos procurar pela seguinte Tag:

</head>

8º – E ABAIXO dela adicione o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
     var offset = $("#box").offset();
     var topPadding = 210;
     $(window).scroll(function() {
         if ($(window).scrollTop() > offset.top) {
             $("#box").stop().animate({
                 marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#box").stop().animate({
                 marginTop: 0
             });
         };
     });
 });
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<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'/>

Tendo feito isto, clique em salvar e pronto!!!