Widget Redes Sociais com Contadores de Usuários no Blogger


Coloque no blog uma nova versão do widget que mostra quantos usuários já curtiram suas páginas nas redes sociais.

Quando criamos um blog, precisamos complementá-lo com os widgets necessários para o melhor funcionamento dos objetivos aos quais ele foi criado. Para isso, precisamos definir quais serão as prioridades e não enchermos de códigos que não ajudam o visitante na navegabilidade por suas páginas e ainda acabam por deixa-las pesadas.

Os mais procurados são os widgets para redes sociais e não por acaso, pois, um blog que não esteja integrado a elas está bem atrás de seus concorrentes e perdendo a oportunidade de poder expandir suas postagens a cada vez mais interessados. Como todos gostamos de deixar nossos blogs com um visual mais elegante, colocar widgets para redes socais que contenham um design diferenciado ajuda e muito na divulgação por chamar a atenção para aquele ponto dentro das páginas.

Widget redes sociais com contadores com novo visual

Para ajudar a você com o design de seu blog, trazemos um widget que adaptará a qualquer tipo de conteúdo. Nele, suas páginas nas principais redes sociais serão exibidas com um novo e inédito visual desenhado especialmente para todos que gostam de fazer referência a quantos usuários já curtiram nas mesmas.

O estilo desse widget já é bem especial, mas caso você não tenha gostado das cores não se preocupe, no tutorial também mostraremos como personalizar com outras cores que desejar. Também já falando sobre o visual do mesmo, você notará que no widget também conterá um efeito ao passar o mouse que torna ele ainda mais atraente e bastante leve pois sua formatação é em CSS que o deixará livre de qualquer conflito com outros itens de seu blog.


OBSERVAÇÃO: Nesse widget a configuração dos números de seguidores nas redes sociais deve ser feita manualmente.

Colocar Widget Redes Sociais com Contadores no Blog

>> Acesse seu Blogger e vá em "Layout".

>> Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".

>> Dentro do conteúdo do gadget, cole o seguinte código:

<style>
.social-box{
width:280px;
padding:10px 9px;
margin:0;
overflow:hidden;
background-color:#f2f2f2; 
border:1px solid #f2f2f2;
text-align:center;
}
.social-box a:hover{text-decoration:none}
a.social-item-box{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;margin:0;padding:4px 0;background-image:url("http://3.bp.blogspot.com/-B3e6qSMxVa0/VHC5d69wKAI/AAAAAAAABHo/MYGQ7nRMxzs/s1600/icons-redes-sociais.png");background-repeat:no-repeat;}
.social-item-outer{background:#f8f8f8;margin:0 0 0 8px;overflow:hidden;float:left;display:inline-block;}
.social-item-outer:hover{background:#fff}
.social-item-outer:nth-child(1):hover{box-shadow:0px -2px 0px #E50700 inset;}
.social-item-outer:nth-child(2):hover{box-shadow:0px -2px 0px #0084C5 inset}
.social-item-outer:nth-child(3):hover{box-shadow:0px -2px 0px #6CAC00 inset;}
.social-item-outer:nth-child(4):hover{box-shadow:0px -2px 0px #00C3B7 inset;}
.social-item-outer:hover{box-shadow:0px -2px 0px #FF8168 inset;}
.social-item-outer:first-child{margin-left:0px;}
.facebook-box{background-position:3px 0px;}
.rss-box{background-position:-219px 0px;}
.twitter-box{background-position:-72px 0px;}
.googleplus-box{background-position:-145px 0px;}
.counter{margin:60px 0 0 0;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500;}
.social-title{color:#888;font-size:11px;}
</style>
<div class="social-box">
<div class="social-item-outer">
<a class="social-item-box facebook-box" href="http://www.facebook.com/" target="_blank">
<div class="counter">76.098</div>
<span class="social-title">Fans</span>
</a>
</div>
<div class="social-item-outer">
<a class="social-item-box twitter-box" href="http://twitter.com/" target="_blank">
<div class="counter">9.987</div>
<span class="social-title">Seguidores</span>
</a>
</div>
<div class="social-item-outer">
<a class="social-item-box googleplus-box" href="http://plus.google.com/" target="_blank">
<div class="counter">7.987</div>
<span class="social-title">Seguidores</span>
</a>
</div>
<div class="social-item-outer">
<a class="social-item-box rss-box" href="http://feeds.feedburner.com/" target="_blank">
<div class="counter">3.980</div>
<span class="social-title">Inscritos</span>
</a>
</div>
</div>

Configuração:

* Em LARANJA, ajuste a largura do widget.
* Em AZUL, cor de fundo do widget.
* Em ROSA, cor da borda do widget.
* Em VERMELHO, substitua pelos links das páginas das redes sociais correspondentes.
* Em AMARELO, números de usuários, ajuste de acordo com cada uma.
* Em VERDE, nome referente a usuários, ajuste de acordo como desejar.

>> Clique em "Salvar", arraste o gadget para o local desejado e clique em "Salvar Organização".

>> Vá em seu blog e veja como ficou.

Rápida instalação e configuração aliadas a um novo estilo visual fazem desse widget um diferencial para ser utilizado em seu blog sem preocupações, com um código limpo em que a leveza de carregamento ajudará numa melhor navegabilidade por suas páginas sem perder a elegância aos olhos de quem visita.

Deixe seu comentário, ele é a motivação do nosso trabalho.
Proxima
« Anterior
Anterior
Proxima »