Dicas para Blogs e Sites

Achar as melhores formas de divulgar o blog nas redes sociais é muito importante para todos os blogueiros e neste sentido recebemos vários comentários perguntando sobre como fixar os botões de compartilhamento no canto da pagina como fazemos atualmente aqui no Dicas para Blogs. Então vamos mostrar como deixar os botões das redes sociais sempre em destaque no seu blog.

Na verdade apenas usamos juntas duas coisas já conhecidas dos blogueiros:
Fixar botões no canto da pagina
Botão para as redes sociais - AddThis



O código para colocar os botões fixos no canto da pagina fica deste jeito:

<div style="background-color:#FFFFFF; border-right:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; left:0px;padding:2px">Gostou? Compartilhe !!!<br/>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script></div>
</div>

Para colocar no seu blog entre em design, adicionar gadget, html/javascript e cole o código. Não importa a localização do gadget na sua pagina, pois o próprio código posiciona no canto da pagina.

Agora veja algumas alterações você pode fazer para personalizar esse acessório:

Alterar bordas e cor de fundo
background-color:#FFFFFF; border-right:1px solid #000000;border-top:1px solid #000000;
Você só precisa alterar o código da cor FFFFFF (veja aqui Código das Cores) e também o estilo das bordas que você encontra mais detalhado neste tutorial sobre Colocar ou alterar as bordas

Mudar o posicionamento na pagina

bottom:0px; left:0px;
Esse código posiciona o gadget na sua pagina então de trocar bottom por top ele aparece na parte de cima da pagina e mudando a palavra left por right o gadget aparece do lado direito.

Além de usar esse código com o AddThis como mostramos aqui poderia ser com qualquer outro botão de divulgação, por exemplo:

Colocar Botão +1 do Google no Blog
AddInto - Botão das Redes Sociais para Wordpress, Blogger, Firefox e muito mais
Botão Curtir e Enviar do Facebook Juntos

Ou até mesmo um link para assinar seu feed ou Receber atualizações por email (clique no link e receba as atualizações do Dicas para Blogs no seu email). Então o código ficaria assim:

<div style="background-color:#FFFFFF; border-right:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; left:0px;padding:2px">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=dicaparablog&amp;loc=pt_BR">Receber atualizações por email</a>
</div>

Claro que usando o link da sua pagina de atualizações por email (veja aqui como fazer para Enviar Atualizações por Email do seu blog) e as alterações de cor de fundo, bordas e posicionamento podem ser feitas da mesma maneira que já citamos acima.

Como já dissemos você pode usar esse código para fixar qualquer coisa no canto da pagina do seu blog, mas recomendamos usar coisas que ocupem pouco espaço já que isso é fixo na pagina se você usar uma imagem muito grande pode atrapalhar a visualização do seu blog.

Marcadores: Acessórios, Códigos, Gadgets, Mais visitas, Redes Sociais, Sites Úteis