Ícones Sociais No Rodapé Dos Posts - Tutorial

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.

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

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”:





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(http://www.ferramentasblog.com.br/imagens/bt-facebook.gif);}
#boxServicos ul li.bt5 {background-image:url(http://www.ferramentasblog.com.br/imagens/bt-twitter.gif);}
#boxServicos ul li.bt6 {background-image:url(http://www.ferramentasblog.com.br/imagens/bt-newsletter.gif);}
#boxServicos ul li.bt7 {background-image:url(http://www.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.

Ajudou? Comente!