Todos sabemos da importância de fazer uma boa divúlgação do nosso blog para que tenhamos algum retorno, por isso vou mostrar aqui como colocar um Box Flutuante de redes sociais no seu blog para que seus leitores compartilhem com os amigos os conteúdos que eles gostarem. Para colocar esse Box em seu Blog é simples.
As redes sociais que estão presente no Box são:
Facebook.
Twetter.
Google +1.
Para começar entre no painel do seu Blog e clique em Modelo. Sempre bom lembrar que antes de começar a editar o html do seu template você deve salvar uma cópia do seu Modelo.
>> Salvar uma cópia do template do Blog
Após isso clique em Editar html e marque a opção Expandir modelos de widgets.
Feito esses passos procure agora pela tag </head> Use as teclas de atalho CTRL+F do seu teclado para procurar.
Importante: Agoara é hora de colocar o script Jquery, se você ja usa esse script não precisa colocá-lo novamente mesmo que a versão seja diferente.
Para que funcione corretamente o Box Flutuante vamos hospedar o script dentro do template, para hospedar o script dentro do template proimeiro cole o sguinte codigo logo acima da tag </head>.
Depois de copiado e colado o script agora você deve colocar o seguinte código também logo acima da tag <head>.
Feito tudo está pronto é só slavar e ver como ficou, lembrado que se você quiser da uma personalizada no seu Box Flutante é só trocar as marcações abaixo.
Amarelo: Aqui se refere a cor das bordas do Box.
Verde: Aqui é a cor de fundo do Box.
Azul: Aqui é a distancia que ele fica da parte superior do post, quanto maior for esse número mais longe ficará do topo.
Vermelho: Aqui é a distancia entre o Box e o corpo das postagens quanto menor o número negativo mais perto das postagens ele vai ficar.
Agora é só usar a criatividade ou se preferir pode deixar original mesmo.
As redes sociais que estão presente no Box são:
Facebook.
Twetter.
Google +1.
Para começar entre no painel do seu Blog e clique em Modelo. Sempre bom lembrar que antes de começar a editar o html do seu template você deve salvar uma cópia do seu Modelo.
>> Salvar uma cópia do template do Blog
Após isso clique em Editar html e marque a opção Expandir modelos de widgets.
Feito esses passos procure agora pela tag </head> Use as teclas de atalho CTRL+F do seu teclado para procurar.
Importante: Agoara é hora de colocar o script Jquery, se você ja usa esse script não precisa colocá-lo novamente mesmo que a versão seja diferente.
Para que funcione corretamente o Box Flutuante vamos hospedar o script dentro do template, para hospedar o script dentro do template proimeiro cole o sguinte codigo logo acima da tag </head>.
<script type='text/javascript'>Agora você trocar o código marcado em vermelho pelo script. Clique aqui para pegar o script.
//<![CDATA[
Código do Script Aqui
//]]>
</script>
Depois de copiado e colado o script agora você deve colocar o seguinte código também logo acima da tag <head>.
<script type='text/javascript'>Agora no próximo passo procure pela tag </body> e logo acima dela cole o seguinte código.
$(function() {
var offset = $("#aw-box").offset();
var topPadding = 60;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#aw-box").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#aw-box").stop().animate({
marginTop: 0
});
};
});
});
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'pt-BR'}
</script>
<style type='text/css'>
#floating-aw {width:60px;}
#aw-box {border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:absolute; top:100px; float:left; margin:0 0 0 -90px; text-align:center;}
#aw-box div {margin:0 0 5px;}
</style>
<script src='http://connect.facebook.net/pt_BR/all.js#appId=102576646508501&xfbml=1' type='text/javascript'/>Feito os passos acima agora procure por esse trecho: <div class='post-footer-line post-footer-line-3'> e logo abaixo dessa linha cole esse código.
<b:if cond='data:blog.pageType == "item"'>A marcação em vermelha se refare ao usúario do twitter então é só trocar pele seu nome de usúario.
<div id='floating-aw'>
<div id='aw-box'>
<div><a class='twitter-share-button' data-count='vertical' data-related='Alternativa WebMasters:Aprende como criar um Blog - Blogger [ Alternativa WebMasters ]' data-via='wesley_extreme' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></div>
<div><g:plusone size='tall'/></div>
<div><div id='fb-root'/><fb:like expr:href='data:post.url' font='arial' layout='box_count' send='true' show_faces='false' width='54'/></div>
</div>
</div>
</b:if>
Feito tudo está pronto é só slavar e ver como ficou, lembrado que se você quiser da uma personalizada no seu Box Flutante é só trocar as marcações abaixo.
<style type='text/css'>Conheça algumas cores na Tabela de cores Html
#floating-aw {width:60px;}
#aw-box {border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:absolute; top:100px; float:left; margin:0 0 0 -90px; text-align:center;}
#aw-box div {margin:0 0 5px;}
</style>
Amarelo: Aqui se refere a cor das bordas do Box.
Verde: Aqui é a cor de fundo do Box.
Azul: Aqui é a distancia que ele fica da parte superior do post, quanto maior for esse número mais longe ficará do topo.
Vermelho: Aqui é a distancia entre o Box e o corpo das postagens quanto menor o número negativo mais perto das postagens ele vai ficar.
Agora é só usar a criatividade ou se preferir pode deixar original mesmo.
