COMO COLOCAR REDES SOCIAIS FLUTUANTE AO LADO DAS POSTAGENS

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.

O Gadget da qual iremos inserir no blog é semelhante a este na figura abaixo:



Inserindo o código HTML



1º – Acesse o Painel de seu Blog e clique em "Editar HTML".

  Agora pressione as teclas CTRL+F e procure pela tag: ]]></b:skin> 

ACIMA dela cole 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;}


 Agora iremos procurar pela seguinte tag: <div class='post-footer-line post-footer-line-1'>

                                  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>

Agora iremos procurar pela seguinte Tag: </head>

                                 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
});
};
});



-----------------------------------------------------------------------------------------------------------------------

 Depois de ter feito todos os passos, clique em Salvar Modelo e pronto!!