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:



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!

Dinâmico slide

Neste artigo, trazemos um dinâmico slide pra você inserir em seu blog, com códigos simples e modernos. É compatível com qualquer template e não ocorre conflitos de scripts. Este dinâmico slide é fácil de fazer, vamos ajudá-lo com o tutorial. Tenha este slide dinâmico em seu blog para mostrar suas publicidades, enfim, mostrar seu conteúdo.

Características:

1. Responsivo
2. Imagem à esquerda (250 px por 250 px até 300 px por 300 px)
3. Título e texto editáveis
4. Possui link de redirecionamento (pode-se inserir target="_blank")
5. Largura mínima do slide de 520 px
6. Funciona dentro de qualquer template em qualquer resolução de tela dos dispositivos. Maximiza 100% da tela a partir de 520 px.

Inseririndo o dinâmico slide no blog

Aprenda, agora, como colocar este slide em seu blog, mas antes aconselhamos que você faça um backup do template antes de qualquer edição. Vamos ao tutorial:

Vá até modelo, editar html, aperte crtl+f , procure por </head> e insira o código, abaixo, logo acima desta tag:

<link href='http://fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="https://sites.google.com/site/bgarquivos/dinamico-slide/arquico%20slide%20.css" /> <script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script> <script type="text/javascript"> $(function() { $('#da-slider').cslider({ autoplay : true, bgincrement : 450 }); }); </script>
Copie o código, abaixo, e insira logo abaixo da tag <body> para ficar no topo do blog ou vá em layout, Gadgets html/javascript, para inserir em um local específico.

<div id="da-slider" class="da-slider"> <div class="da-slide"> <h2> Coloque seu titulo</h2> <p> Fala ou descreva seu conteudo referente a imagem ao lado ou artigo que você pretende divulgar.</p> <a href="#" class="da-link">Leia mais</a> <div class="da-img"> <img src="http://www.iconsdb.com/icons/preview/black/google-code-xxl.png" /> </div> </div> <div class="da-slide"> <h2> Coloque seu titulo</h2> <p> Fala ou descreva seu conteudo referente a imagem ao lado ou artigo que você pretende divulgar.</p> <a href="#" class="da-link">Leia mais</a> <div class="da-img"> <img src="http://www.iconsdb.com/icons/preview/black/google-blog-search-xxl.png" /> </div> </div> <div class="da-slide"> <h2> Coloque seu titulo</h2> <p> Fala ou descreva seu conteudo referente a imagem ao lado ou artigo que você pretende divulgar.</p> <a href="#" class="da-link">Leia mais</a> <div class="da-img"> <img src="http://www.iconsdb.com/icons/preview/black/blogger-5-xxl.png" /> </div> </div> <div class="da-slide"> <h2> Coloque seu titulo</h2> <p> Fala ou descreva seu conteudo referente a imagem ao lado ou artigo que você pretende divulgar.</p> <a href="#" class="da-link">Leia mais</a> <div class="da-img"> <img src="http://www.iconsdb.com/icons/preview/black/money-bag-xxl.png" /> </div> </div> <nav class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav> </div>
Você pode ver o moderno slide em funcionamento clicando aqui.

Após ter inserido os códigos especificados acima vamos à edição dos blocos.

Os blocos do dinâmico slide seguem o mesmo padrão de edição, como explicamos, abaixo:

<h2>Coloque seu título</h2>
<p>Fale ou descreva seu conteúdo referente a imagem ao lado ou artigo que você pretende divulgar</p>
<a href="http://endereço do redirecionamento" class="da-link">Leia mais</a>
<div class="da-img"><img src="endereço da imagem" />

Altere somente os comandos destacados em vermelho. Os aquivos da folha de estilo css e os arquivos de script foram hospedados por nós, do BG, e não podem ser alterados. Com isso, reduzimos o tamanho do código fonte do slide e garantimos seu funcionamento sem erros.

Finalizando

Este slide é muito útil pra quem quer otimizar seu blog conferindo um visual dinâmico e moderno. Coloque propagandas, divulgue seu conteúdo, e com isso, atraia mais leitores.