Ícones sociais no rodapé dos posts

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Divulgar toda forma de contato dos leitores com o seu blog é fundamental para manter o seu blog crescendo. Hoje as redes sociais dominam, especialmente o Twitter e o Facebook, mas também é importante ganhar assinantes de Feed e de Newsletter para suas atualizações. Veja como adicionar ícones dessas redes no rodapé dos posts.

icones-feed-facebook-twitter

A imagem acima ilustra como seria o resultado. Agora veja nesse tutorial como aplicar isso no seu blog.

Já ensinamos outros modelos de ícones e rodapés para posts do seu blog. Recomendo que veja esses também e teste todos para ver qual fica melhor no seu layout:

Para fazer testes, lembre-se de fazer um backup completo do seu blog e recomendamos que você tenha um blog só para testes:

O que vou ensinar é bem simples de fazer. Os ícones só são exibidos quando os posts são abertos individualmente e aponta para as redes sociais e sistema de Feed e newsletter, ótimos para fidelizar seu público alvo.

Abra o painel do Blogger e clique no menu “Design” ~> “Editar HTML” e marque a caixa “Expandir modelos de widgets”:

design-editar-html-widgets-blogger

Agora procure pela linha de código “]]></b:skin>” e imediatamente ANTES, cole o seguinte trecho de CSS sem alterar nada:

#boxServicos {
clear:both;
margin:0 auto;
width:540px;
}
#boxServicos ul {
height:30px;
margin-bottom:10px;
}
#boxServicos ul li {
float:left;
line-height:30px;
margin-right:30px;
padding-left:40px;
font-size:14px;
color:#fff;
background-position: center left;
background-repeat:no-repeat;
}
#boxServicos ul li a {
color:#000;}
#boxServicos ul li.bt4 {background-image:url(https://ferramentasblog.com.br/imagens/bt-facebook.gif);}
#boxServicos ul li.bt5 {background-image:url(https://ferramentasblog.com.br/imagens/bt-twitter.gif);}
#boxServicos ul li.bt6 {background-image:url(https://ferramentasblog.com.br/imagens/bt-newsletter.gif);}
#boxServicos ul li.bt7 {background-image:url(https://ferramentasblog.com.br/imagens/bt-rss.gif);}

Agora procure por alguma dessas duas linhas (qualquer uma delas, por isso tem que testar):

<div class=’post-footer’>

ou

<div class=’post-footer-line post-footer-line-1′>

E imediatamente DEPOIS disso, cole o seguinte trecho HTML, só alterando o que está indicado de vermelho:

<!-- Icones sociais -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='boxServicos'>
<span class='border'/>
<ul>
<li class='bt4'><a href='URL-Página-Facebook' target='_blank'>Facebook</a></li>
<li class='bt5'><a href='http://www.twitter.com/NOME-Twitter' target='_blank'>Twitter</a></li>
<li class='bt7'><a href='URL-do-Feed' target='_blank'>Feed</a></li>
<li class='bt6'><a href='URL-da-Newsletter' target='_blank'>Newsletter</a></li>
</ul>
</div>
</b:if>
<!-- Icones sociais -->

Feito essas adições de códigos, clique em “Salvar Modelo” e veja o resultado no seu blog.

Agora é só esperar os cliques e conquistar mais seguidores para o seu blog.

Outros gadgets e códigos para seu blog:

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

13 Comentários

  1. Muito bom, gostei muito do estilo dos ícones.

    Se me permite, gostaria de deixar apenas uma pequena observação: Você citou acima que os ícones seriam exibidos internamente nos posts, porém acho que você esqueceu de acrescentar a condicional responsável por isso.

    Valeu Marcos. Grande abraço!

    Responder

  2. Olá Marcos,só gostaria de avisar que se alguém estiver tendo problemas,mesmo depois de ter feito tudo certinho,e não conseguir salvar o seu modelo,pode ser um problema com a url do feedbunner na newsletter.

    Para resolver este problema basta encurtar a url/o link da newsletter com qualquer site que realize esse procedimento.

    Marcos,acredito que você teve esse mesmo problema,pois percebi que a sua url da newsletter está encurtada.Eu consegui resolver esse problema depois de observar o que você fez com a url.

    Muito obrigado pela dica!
    Valew!

    Responder

  3. @Allison,
    Bem destacado esse detalhe que não coloquei no post.
    Com nem todos usam o FeedBurner, não detalhei isso. Mas infelizmente o link padrão deles dá um erro que não entendi pq acontece. Simplifica a solução apenas encurtando a URL.

    Responder

  4. Muito bom Marcos, parabéns pelo seu tutorial.
    Para dar mais estilo, também podemos colocar o a:hover, colocando background de uma cor qualquer.
    Ficaria semelhante ao botão de "postagem mais antiga" do seu blog.

    Responder

  5. Olha , não sou de comentar mais o novo layout está extraordinário .
    E fora que o Ferramentas Blog já se estabeleceu como um dos melhores que blogs que visito .
    Parabéns Marcos .

    Responder

  6. Aqui no meu template tinha as duas linhas…

    Fiquei meio na dúvida e decidi colocar em baixo da primeira, deu certo!

    Obrigado, estava procurando um Gadgets parecido com este!!

    Responder

  7. Pingback: Novo gadget do Blogger “Seguir por e-mail”: Newsletter padrão do Blogger | [ Ferramentas Blog ]

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.