Gadget Dinâmico com Contadores para Redes Sociais

Unknown 18:25 , , , 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvOkFIdgUt59PpRU9XZ3w1QCFkXZgGlH2Tvmop4F7IBDpQGrzbwgxa1KaelJRxkTUkDjEi1Nbr9Q2J5URYTdj1nS8ED24d1UQ1xzS0ZXAS9Om6gadUj5YL2WT_eLqWnu4HAqxCE2bMxek/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggaybzQRigL2hyphenhyphenu03S3it_fIS5GC12psBYD1-xY-YUNOroAigQEqp2MSF9c7uC4sILa48vFT7gkwINBoKQqwVhMGhOPoSwT1xgm3YwIqp-MTPuzDDryWp6dPyZRz6Z8B9kyrf8ai6_xxA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjimA0To6t3MLuEXGkxbViie5-kFO1mBpwOJCGN8NFOmNnH8mC5gAY9SIvxjIKISz1lKSw8p0SLNDHtCEZJPg1PNZuGaYkMJ3GsZrA-rxPKtFItxpLdTEZY0eey-zggxukgX15ypImQyUs/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!
  • Blogger Comments
  • Facebook Comments

10 comentários :

  1. Anônimo13/06/2013, 09:39

    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. Unknown06/09/2013, 03:10

    obrigado amigo volte sempre

    ResponderExcluir
  3. birapcbira26/09/2013, 16:03

    Excelente trabalho parabéns!

    ResponderExcluir
  4. Unknown26/09/2013, 16:41

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

    ResponderExcluir
  5. Fernanda01/03/2014, 19:44

    Oie Andrew, minha pergunta é:

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

    no código animado...

    Att, Feh

    ResponderExcluir
  6. Portal Espírita Luz e Caridade04/11/2014, 13:13

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

    ResponderExcluir
  7. PrEdsonCastro13/04/2015, 11:04

    Parabéns!!

    ResponderExcluir
  8. PrEdsonCastro13/04/2015, 11:15

    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.

Assinar: Postar comentários ( Atom )