domingo, 29 de julho de 2012

Tutorial de Botões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais


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 na Tutorial Master Blog -Cria Blog . Então vamos mostrar como deixar os botões das redes sociais sempre em destaque no seu blog.

Tutorial de Botões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais


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:

Nenhum comentário:

Postar um comentário