Botões de Redes Sociais e Assinatura Nas Postagens do Blogger

Use botões de Redes Sociais e Assinatura em suas postagens e aumente a divúlgação e interação de seu blog.

Atendendo ao pedido do leitor Damião Marcos vou disponibilizar o código para colocar os botões de redes sociais e assinatura no final dos artigos. Lembrando que é sempre impôrtante dar opções complementares aos leitores para que assinem, curtam ou sigam seu blog, uma boa divúlgação é um grande passo para que um blog consiga conquistar seu espaço nessa grande blogosfera. Os botões são esses que você vê abaixo.

O código é muito simples e pode ser colocado dentro de sua postagens em qualquer parte, seja no inicio, meio ou no final como uso aqui. Para deixar de forma mais completa vou mostrar também como colocar fixamente no final dos artigos, assim você não precisa introduzir o código toda vez que for fazer uma postagem.

<div id="redes-sociais-postagens">

<li><a href="http://gplus.to/alternativablogger" title="Seguir no Google Plus" target="_blank" rel="nofollow"><img border="0" src="http://i1212.photobucket.com/albums/cc447/wesleyextreme/alternativa%20extreme%20menu/seguir-plus-ganhar-dinheiro-alcanar-sucesso.png" /></a></li>

<li><a href="http://www.facebook.com/AlternativaBlogger" title="Curtir no Facebook" target="_blank" rel="nofollow"><img border="0" src="http://i1212.photobucket.com/albums/cc447/wesleyextreme/alternativa%20extreme%20menu/curtir-facebook-alternativa-para-o-sucesso.png" /></a></li>

<li><a href="http://www.twitter.com/alternativablg" title="Seguir no Twitter" target="_blank" rel="nofollow"><img border="0" src="http://i1212.photobucket.com/albums/cc447/wesleyextreme/alternativa%20extreme%20menu/seguir-twitter-blog-de-sucesso.png" /></a></li>

<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=AlternativaBlogger" title="Assinar Por Email" target="_blank" rel="nofollow"><img border="0" src="http://i1212.photobucket.com/albums/cc447/wesleyextreme/alternativa%20extreme%20menu/assinar-feed-rss-dinheiro-e-blog.png" /></a></li>
</div>

Nos  locais marcados em vermelho você deve alterar pelo seu Id ou Url.

<style>
#redes-sociais-postagens{
 background:#f5f5f5;/* Cor do fundo */
 width:100%;
 height:160px;
 padding-bottom:5px;
 padding-top:5px;
 }

#redes-sociais-postagens li{
 float:left;
 list-style:none;
 margin-left:20px; /* Espaço entre os botões */
 display:block;
 padding:5px 5px 0px 5px;
 border-bottom: 3px solid #3d69fa;/* Cor da borda */
 border-right: 2px solid #3d69fa;/* Cor da borda */
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 }
#redes-sociais-postagens li:hover {
 background:#fff;/* Cor ao passar o mouse */
 box-shadow:#939394 3px 2px 3px;
 }
</style>

Lembrando que as margins entre os botões devem ser editadas conforme o tamanho do corpo da postagem do seu blog, e ambos tanto o HTML quanto a CSS são colocados dentro de cada postagem.

Esse é o código para os botões de redes sociais que uso dentro das postagens, assim posso escolher onde quero coloca-lo. Agora se você deseja por de forma fixa no final dos artigos  você deve ir até o painel do blogger >> Modelo >> Expandir  modelos de widgets e procurar pele seguinte código:

<div class='post-footer-line post-footer-line-1'>

Após encontra-lo você deve copiar o código HTML e coloca-lo acima dessa linha, lembrando de colocar a tag b:if para que não seja mostrado fora das postagens. O código ficará assim.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="redes-sociais-postagens">

Código dos botões aqui

</div>
</b:if>

Já o código CSS você deve copiar apenas o que se encontra dentro da tag <style> e coloca-lo acima de: ]]></b:skin> que é onde fica toda a CSS do Blogger.

Após isso é só salvar e ver como ficou. Eu aconselho a colocar diretamente dentro das postagens assim você pode escolher o local mais apropriado para chamar a atenção do seus visitantes, mas ai vai da sua escolha.

Pondere também ver outros de nossos artigos.

          . Qual a Diferença entre Mídias Sociais e Redes Sociais
          . Super Gadget de Seguidores do Twitter Com Fotos Para Blogger
          . PopUp de Subscrição Rss e Redes Sociais Para Blogger
          . Como Colocar Caixa Curtir do Facebook No Blog - Like Box
          . Box Flutuante de Redes Sociais Para Blogger
          . Setas de Navegação Entre Postagens Para Bloger - Floating NextPrev
          . Caixa de Assinatura Rss Via Email Personalizada

Não deixe de fazer parte de nossos fãs e seguidores usando os botões abaixo, e claro assinem nossa newslatter para receber gratuitamente todas nossas atualizações direto em seu email.

Até mais!