WIDGET REDES SOCIAIS COM CONTADORES

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.

COMO GANHAR DINHEIRO NA INTERNET COM O GOOLGE ADSENSE

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 visual desenhado especialmente para todos que gostam de fazer referência a quantos usuários já curtiram nas mesmas.

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

Instalando o Widget

Acesse seu Blogger e vá em "Layout".

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

2. 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://4.bp.blogspot.com/-BijS0OXNqUM/Ub9XA_RlZLI/AAAAAAAACCM/c19K_XX4R30/s1600/csg-51bf56d8dd195.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:7px 4px;}
.rss-box{background-position:-73px 4px;}
.twitter-box{background-position:-153px 4px;}
.googleplus-box{background-position:-233px 4px;}
.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="SUA-FÃ-PAGE-AQUI" 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="SEU-TWITTER-AQUI" 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="SEU-GOOGLE-PLUS-AQUI" 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="FEEDBURNER-AQUI" target="_blank"> <div class="counter">3.980
</div>
<span class="social-title">Inscritos</span></a>
</div>
</div> 

Configuração:

* Em width:280px;, ajuste a largura do widget.

* Em background-color:#f2f2f2; cor de fundo do widget.

* Em border:1px solid #f2f2f2, cor da borda do widget.

* Em <div class="counter">9.987, números de usuários, ajuste de acordo com cada uma.

*Em <span class="social-title">Fans</span> e <span class="social-title">Seguidores</span>, nome referente a usuários, ajuste de acordo como desejar.

No código está escrito onde deve ser posto os links, cuidado para não excluir nada além do que a frase.

3. Clique em "Salvar".

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

TABELA DE CORES COM CÓDIGOS HTML

CAIXA COM SEGUIDORES DO TWITTER PARA BLOG

Conclusão

Um lindo Widget de fácil instalação, deixando seus leitores muito mais acessíveis as suas redes sociais, é bom sempre lembrarmos que elas, as redes sociais são responsáveis por boa parte de nosso trafico, devemos sempre dar uma atenção especial para elas. Espero que tenham gostado, deixem seus cometário sobre o post, obrigado....

22:56:00