BARRA COM BOTÕES PARA COMPARTILHAR NAS REDES SOCIAIS

Coloque em seu blog botões para compartilhar nas redes sociais abaixo dos posts de um jeito simples, prático e eficiente.

Compartilhar nas redes sociais é hoje uma das melhores maneiras de divulgar seu blog. Devido ao crescimento gigante e cada vez com mais adeptos, você poderá expandir seus trabalhos a diversos horizontes e fazer com que cheguem ao seu público-alvo desejado.  Seja lá qual for a rede social favorita, a conectividade com o mundo, a facilidade de entrar em contato e fazer novas amizades além de muitas outras facilidades que nos proporcionam fará com que suas postagens deem uma alavancada.

Seu blog não pode ficar fora desse meio, e por isso, deve conter além de widgets que direcionem para as páginas nas redes sociais é também necessário botões para que os visitantes compartilhem suas postagens nas mesmas. Aqui nesse post, informaremos como colocar uma barra com botões para compartilhar nas principais redes sociais e divulgar ainda mais seus trabalhos.

 

Essa Barra contém uma cor de fundo fixa, mas totalmente personalizável, e os botões com as cores predominantes de cada rede social correspondente. Além disso os botões contém um efeito hover, ao passar o mouse sobre os mesmos ficarão com uma borda que aparece com uma transição mais lenta que dá uma visualização bem legal.

Recomendamos que antes de fazer qualquer alteração no código, faça um backup do template.

1º Passo: Acesse seu Blogger, vá em "Modelo" e clique em "Editar HTML".

2º Passo: Clique no código do template, pressione as teclas "CTRL+F" pesquise por  

]]></b:skin>

3º Passo: Logo ACIMA da tag encontrada cole o seguinte código:

 

             /*sharing bar social networks-------------*/ .widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;} .widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;} .widgetshare a:hover {box-shadow: 0 0 5px #00ff00; border: 1px solid #e9fbe9;} .fcbok { background: #3B5999; } .twitt { background: #01BBF6; } .gplus { background: #D54135; } .digg { background: #5b88af; } .lkdin { background: #005a87; } .tchno { background: #008000; } .ltsme { background: #fb8938; }

4º Passo: Pesquise agora por <div class='post-footer'>

Atenção - Você poderá encontrar dois trechos de código iguais, caso encontre opte pelo segundo.

5º Passo: Logo ABAIXO do trecho encontrado cole o seguinte código:

             <b:if cond='data:blog.pageType == "item"'> <div style='clear:both;'/> <div class='post-share-buttons'> <div class='widgetshare'> # Compartilhar : <a class='fcbok' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'>Facebook</a> <a class='twitt' expr:href='"http://twittter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Twitter</a> <a class='gplus' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Google+</a> <a class='lkdin' expr:href='"http://www.linkedin.com/cws/share?url=" + data:post.url' rel='nofollow' target='_blank'>Linkedin</a> <a class='tchno' expr:href='"http://technorati.com/faves?sub=addfavbtn&add=" + data:post.url' rel='nofollow' target='_blank'>Technorati</a> <a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url' rel='nofollow' target='_blank'>Digg</a> <script> //<![CDATA[ var uri = window.location.href; var ttle = document.title; document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>"); //]]> </script> </div></div><span class='reaction-buttons'> <b:if cond='data:top.showReactions'> <table border='0' cellpadding='0' width='100%'><tr> <td style='font-size:12px;padding-top:2px;' valign='top'><span class='reactions-label'><data:top.reactionsLabel/></span></td> <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td> </tr></table></b:if> </span> </b:if>

Atenção - Esse widget está configurado para aparecer somente nas páginas das postagens. Caso desejar que apareça também na página inicial, remova os trechos destacados em AMARELO.

6º Passo: Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

7º Passo: Acesse seu blog e veja como ficou.

Se você realizou todos os passos corretamente, a barra com botões para compartilhar nas redes sociais já estará totalmente adaptada a seu blog e suas páginas já estarão com opções para expandi-las ainda mais pela web e com a possibilidade de trazer o retorno desejado.