Raphamundi

Todos nós que temos blogs já sabemos da importância das redes sociais para divulgar o conteúdo que publicamos. Mais ainda quando o próprio leitor quem divulga. Os botões de compartilhamento dever estar sempre presentes em nossos layouts para que o visitantes com um simples clique, envie seu artigo para o Twitter, FaceBook e Google Buzz, mas também assine seu Feed para continuar voltando. Aqui temos um ótimo gadget de botões flutuantes de redes-sociais.

A idéia desse Gadget é colocar os ícones de redes-sociais flutuando ao lado dos artigos do seu blog, de forma bem visível para que os leitores cliquem para divulgar seus posts. Aqui adicionamos 4 botões importantes: Twitter, FaceBook, Google Buzz e Feed.

Veja funcionando nesse teste: http://testandobloggerfb.blogspot.com/

Ou a imagem de exemplo:

icones-flutuantes

Para colocar em seu blog no Blogger (Blogspot), basta seguir os seguintes passos, só alterando o que for indicado.

ATENÇÃO: Lembre-se de testar antes em um blog de testes e faça backup de todo o seu blog para evitar riscos quando mexer no código-fonte.

Passo 1.
Abra o painel do Blogger e clique no menu "Design" ~> "Designer de modelo". Então agora clique em "Avançado" ~> "Adicionar CSS" como mostra a imagem abaixo:

adicionar-css-designer-blogger

Dentro desse espaço cole o seguinte trecho de CSS:

#share_scroller {
left:0;
position:fixed;
top:200px;
}

#share_button {
left:0;
position:fixed;
top:200px;
width:80px;
}

#shares {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-topleft:3px;
background-color:#ffffff;
border-color:#A5A5A5 #E8E7E7 #A5A5A5 #A5A5A5;
border-style:solid;
border-width:1px;
bottom:200px;
margin-top:10px;
position:fixed;
width:63px;
}

#shares .SMVote {margin:7px}
div.SMGap {background-color:#E3E3E3; height:1px; width:35px; margin:5px auto;}
/* FB button (shrink width) */
.fb_share_count_top {width:48px!important}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px!important}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px!important;}

Indicado de vermelho é o código que define a cor de fundo do elemento, caso você queira mudar. Mas só mexa nisso, em nada além.
Então clique no botão laranja, no canto superior direito, "APLICAR AO BLOG" e volte para o Blogger.

Passo 2.
Para aplicar definitivamente em seu blog, agora precisamos adicionar o HTML que faz tudo funcionar.

Ainda no menu "Design", clique no "Editar HTML" e procure pela seguinte linha:

<body>

Imediatamente ABAIXO disso, cole o seguinte trecho, só fazendo as mudanças indicadas:


<div id='share_scroller'>
<div id='share_button'>
<div id='shares'>
<div class='SMVote'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='SMGap'/>
<div class='SMVote'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='SMGap'/>
<div class='SMVote'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='SMGap'/>
<div class='SMVote'><a href='URL_do_Feed_do-seu-Blog'><img src='http://www.ferramentasblog.com.br/imagens/rss3.png'/></a></div>
</div>
</div>
</div>


Via

Raphamundi

Gadgets Flutuantes de Redes Sociais no Blog ou no Site

0 comentários:

Postar um comentário