Gadget Dinâmico com Contadores para Redes Sociais

10 comentários
gadget

Gadget Dinâmico com contadores - Redes Sociais

Hoje em dia, ter uma fã page no Facebook, Twitter, Google plus, etc.. é importante para gerar tráfego para o seu blog, sem falar que confere um aspecto de profissionalismo e você consegue mais referência de links para o seu blog, deixando a visualização dos seus posts mais dinâmica.

Ter o seu blog em grandes Redes Sociais é muito importante para divulgação, e você pode fazer o cadastro de forma simples e rápida, e a maioria dessas Redes permite que você crie sua fã page ou um perfil com o intuito de divulgar seu trabalho.

Andamos pesquisando na web algum Gadget que fosse dinâmico e ao mesmo tempo tivesse contadores que funcionassem e fossem automáticos, ou seja, sem a necessidade de ter que ficar alterando os números das redes sociais de forma manual, porém, quando encontrávamos o contador, ele não funcionava e o Gadget era estático, ou seja, não tinha nenhum tipo de movimento, sem falar que o contador do Feed não funcionava. Então, começamos a desenvolver um Gadget que fosse dinâmico, pra dar um visual bacana e que, também, os contadores de redes sociais funcionassem de forma correta.

Veja o Gadget em funcionamento no botão abaixo:

dinâmico


A primeira coisa a fazer é conseguir seu contador de Feed, e o seu contador do Twitter.

Para adquirir seu contador de feed, clique aqui.

Para adquirir seu contador do Twitter, clique aqui.

Detalhe sobre os contadores:

O contador do Twitter atualiza diariamente, e o restante dos contadores atualizam instantaneamente.

Agora que você tem seus contadores, vamos dar início ao nosso Gadget:

Tutorial - Gadget com contadores animados

O esquema para aplicar o Gadget com os contadores é simples! Primeiro, copie o código, abaixo, vá até o painel do seu blog, escolha a opção layout, em seguida, clique em adicionar gadget na área que desejar, e insira o código a seguir:

<style>
.redesss img {
/* blog gerenciado animados com CSS3 */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
width:100%;
}
.redesss img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
width:100%;
}
/* Ícones sociais animados com CSS3 */
</style>
<center><br /><a href="http://bloggerenciado.blogspot.com.br/" style="width:100%; color: rgba(34, 136, 187, 0);">BY BG</a></center>
<div class="redesss" style="font-size:9px;font-weight: bold;text-align:center;font-family: Arial, Helvetica,
sans-serif; text-align: center;">

<div style="width:30%; float:left;margin-right:3.3%;">
<a href="Endereço do feed"><img src="https://lh3.googleusercontent.com/-09KqV2NKUfs/VLsDM59PJII/AAAAAAAAAUA/oxDcPq-jnxo/s256-no/rss-3-xxl.png"/></a>
Aqui deve-se inserir o contador de feed
</div>

<div style="width:30%; float:left;margin-right:3.3%;">
<a href="Endereço da fã page"><img src="https://lh6.googleusercontent.com/-GVlzTuTGkFA/VLsDdhQhGMI/AAAAAAAAAUY/0ueBRRWcht8/s256-no/facebook-3-xxl.png"/></a>
<b style="font-size: 12px;"><script type="text/javascript"
src="http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=314124238715663"></script></b> <br/>Fãs
</div>

<div style="width:30%; float:left;margin-right:3.3%;">
<a href="Endereço da página do Twitter"><img
src="https://lh3.googleusercontent.com/-GBt_apzO6ak/VLsDMQJxcYI/AAAAAAAAAT8/VfNV_OeEnvs/s256-no/twitter-3-xxl.png"/></a>
Aqui deve-se inserir o contador do Twitter
</div>

<div style="width: 50%;float:left;margin-right:1px;">
<img src="http://www.dentallab.co.uk/wp-content/uploads/2014/05/Contat-us-Post.png" style="height: 80px;" />
<b style="font-size: 12px;"><script type="text/javascript"> function showpostcount(json) { document.write
(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/posts/default?alt=json-in-
script&callback=showpostcount"></script></b> <br/>Artigos
</div>

<div style="width: 49%;float:left;">
<img src="https://cdn3.iconfinder.com/data/icons/eightyshades/512/60_Comments-128.png" style=" height: 80px;" />
<b style="font-size: 12px;"><script type="text/javascript"> function showpostcount(json) { document.write
(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/comments/default?alt=json-
in-script&callback=showpostcount"></script> </b> <br/>Comentários
</div>
</div>

Após inserir o código no gadget, faça as alterações destacas por cores.

Veja, abaixo, a descrição referente a cada cor destacada no código.

  • Azul: área importante do gadget. Precisam ser preenchidas todas as áreas destacadas.

  • Vermelho: refere-se as imagens que irão aparecer acima dos contadores. É opcional altera-las. Se as imagens não condizem com seu blog, altere as url's por imagens que você queira, e não é necessário redimensioná-las.

  • Verde: descrição do contador. É opcional alterá-la. Mude se desejar ter uma apresentação diferente do campo exibido pelo contador.

Criamos este gadget com css, html, scripts externos e um pouco de criatividade.

É possível colocar efeitos diferentes nas imagens. Para isto, deixe seu comentário que estaremos postando o mesmo gadget com contador de visitas com tais efeitos.

O que achou? Comente!

10 comentários :

  1. Olá Andrew Silva, seu trabalho é muito legal, te sigo no mesmo, sou iniciante, e conheço muito pouco de HTML, Mais estou procurando aprender aos pouco, já que sou viciado em blog. uma abraço e sucesso!

    ResponderExcluir
  2. Excelente trabalho parabéns!

    ResponderExcluir
  3. obrigado amigo agradeço o contato e fico feliz em saber que o artigo tenha sido util para você abraço

    ResponderExcluir
  4. Oie Andrew, minha pergunta é:

    Como regular o tempo de transição da mensagem??

    no código animado...

    Att, Feh

    ResponderExcluir
  5. Fantástico esta de parabéns,Principalmente pelo espirito de coletividade. viagensesabores.com.br

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.