Olá galera do 'Blogando de verdade' neste tópico ensinarei a como por botões das redes sociais para compartilhar o mesmo. Isso é excelente, pois possibilita que os leitores divulguem nossos artigos em outros locais, tais como: Twitter, RSS, Orkut, Google Buzz, Facebook (mania do momento) e etc.
Existem muitos modelos de botões de redes sociais. Porém o que vou ensinar é um dos mais completos.
Vamos lá, mãos a obra: 1º faça login do Blogger, clique em layout, figura abaixo
Depois HTML/javascript e cole o código abaixo:
<div style="position:fixed; bottom:20%; margin-left:-98px; float:left;width:60px;background-color:#ffffdf;padding: 5px;border:1px solid #000;border-right:none"><center><div class="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></center></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script>
</div>
Não importa o lugar onde o gadget ficará posicionado, você poderá deixar em qual configuração optar.
Como editar a posição dos botões da redes sociais no seu blog.
Position:fixed; bottom:20%; margin-left:-98px: posição dos botões... então altere a altura na página 20% e o posicionamento horizontal modificando o valor -98px, aqui o valor é negativo ou seja o sinal de subtração (menos) faz parte do posicionamento.
float:left: lado que aparece a caixa.
width:60px: largura da caixa.
padding: 5px: margem entre as bordas da caixa e os botões.
background-collor:#fffdf: cor do fundo da caixa de botões de compartilhamento. Leia mais sobre cores
border:1px solid #000:border-right:none: neste trecho tiramos um lado da borda para parecer que a caixa de botões pareça com nosso layout.
Ficará assim:
Espero ter ajudado, e lembrando se tiver dúvidas, sugestão ou comentários, post em baixo.
Obrigado!
Leia mais...
Existem muitos modelos de botões de redes sociais. Porém o que vou ensinar é um dos mais completos.
Vamos lá, mãos a obra: 1º faça login do Blogger, clique em layout, figura abaixo
Depois HTML/javascript e cole o código abaixo:
<div style="position:fixed; bottom:20%; margin-left:-98px; float:left;width:60px;background-color:#ffffdf;padding: 5px;border:1px solid #000;border-right:none"><center><div class="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></center></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script>
</div>
Não importa o lugar onde o gadget ficará posicionado, você poderá deixar em qual configuração optar.
Como editar a posição dos botões da redes sociais no seu blog.
Position:fixed; bottom:20%; margin-left:-98px: posição dos botões... então altere a altura na página 20% e o posicionamento horizontal modificando o valor -98px, aqui o valor é negativo ou seja o sinal de subtração (menos) faz parte do posicionamento.
float:left: lado que aparece a caixa.
width:60px: largura da caixa.
padding: 5px: margem entre as bordas da caixa e os botões.
background-collor:#fffdf: cor do fundo da caixa de botões de compartilhamento. Leia mais sobre cores
border:1px solid #000:border-right:none: neste trecho tiramos um lado da borda para parecer que a caixa de botões pareça com nosso layout.
Ficará assim:
Espero ter ajudado, e lembrando se tiver dúvidas, sugestão ou comentários, post em baixo.
Obrigado!
