Mostrando postagens com marcador Tutorial de Botões de Compartilhamento Fixos no Canto da Pagina. Mostrar todas as postagens
Mostrando postagens com marcador Tutorial de Botões de Compartilhamento Fixos no Canto da Pagina. Mostrar todas as postagens

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: