WIDGET DE REDES SOCIAIS PARA BLOG

Olá pessoal, hoje estarei ensinando a vocês como adicionar um widget de redes sociais  em seu blog, sei que existem muito widgets de redes sociais espalhados pela web, aqui mesmo no Personalizar o Blogger eu já escrevi diversos tutoriais sobre o assunto, mas é sempre bom termos uma opção a mais que possa dar uma aparência ainda mais agradável ao nosso layout.

Particularmente eu gosto muito desses widgets, pois acredito que quanto maior for a interação do blog com as redes sociais melhor será para a conquista de novos leitores e seguidores do seu conteúdo, por isso vamos ao tutorial.

• Leia Também: Widget postagem recente em formato de banner 728x90
• Leia Também: Criar Templates – Curso de HTML e CSS do básico ao Avançado
• Leia Também: As redes sociais e os seus benefícios

Veja um Modelo Aqui

Acesse o painel do Blogger, escolha a opção Layout, adicionar Gadget do tipo HTML/JAVASCRIPT e adicione o código abaixo, não esqueça das alterações.

<style>
.social-box { margin-bottom: 10px; overflow: hidden; }
.social-box img { float: left; }
.social-box-text {
position:relative;
float:right;
padding:4px 10px 6px 10px;
width:212px;
background:#FFF;
border:1px solid #d2d2d2;
-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.social-box-descrip { font-family:'PT Sans'; font-size:16px; color:#777; display:block; margin-bottom:1px; }
.social-box-count { color:#999; font-size:11px; }
</style>
<div class="social-box">
<a href="URL DA FANPAGE DO FACEBOOK" target="_blank"><img border="0" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iDE3JGlyCwq4ZjrAd5DubcYFmbS3Eo6JLJPTmNLPKSj4vCwIHQSVn8-_J6ck_ShtIyvoFFr8xZtaR1Wo3Yf3Dv6jDX0Un98WhfYn_HqK3z5oiAJrflUegPBMddRZmPQBuwOQB9a59TDU/s48/facebook.png" width="48"></a>
<div class="social-box-text">
<span class="social-arrow">
<span class="social-box-descrip"><a href="URL DA FANPAGE DO FACEBOOK" target="_blank">Siga-nos via Facebook</a></span>
<span class="social-box-count">Curta nossa página no Facebook</span> </span></div>
</div>
 
<div class="social-box">
<a href="https://twitter.com/USUÁRIO DO TWITTER" target="_blank"><img border="0" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjetHio-b-8noTtlovoXMxj9-4LvWDrzZsV-s4u4bhLGCwS4qwzwMu_PSbOz2jcsuznx-oJA4pRUNDATPsRdEukj9H7aDq4s3ZAjCzeto-rWXxQ7eexMx35TAyBRostXlQONMln3cA7bHNN/s48/twitter.png" width="48"></a>
<div class="social-box-text">
<span class="social-arrow">
<span class="social-box-descrip"><a href="USUÁRIO DO TWITTER" target="_blank">Siga-nos no Twitter</a></span>
<span class="social-box-count">Siga-nos nosso perfil no Twitter</span>
</span></div> </div> <div class="social-box">
<a href="URL DO FEED" target="_blank" expr:href="http://www.mulheresfantasticas.com.br/feed"><img border="0" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLCZrMZ-otvmanilig3cgjtxauknaYuU3zBMi2QMtnjHgB1-IReG_0crf-WGXXKmzM8qPQVs20Ru1gDRtUQpQ-E6wJUL8OEA72tPWEX35UrYpjQ7adpK_9pPSIJtIcmy41PZuptPQccgG/s48/rss.png" width="48"></a>
<div class="social-box-text">
<span class="social-arrow">
<span class="social-box-descrip"><a href="URL DO FEED" target="_blank">Assine o RSS Feed</a></span>
<span class="social-box-count">Assine e acompanhe-nos via Feed</span> </span></div>
</div>

OBS: Não deixe de alterar as partes destacadas em vermelho pelo que está sendo pedido.

O que achou deste Widget? Teve alguma dificuldade em adicionar ao blog?
Comente e deixe sua opinião, e não esqueça de compartilhar nas redes sociais.