Widget – feeds, seguidores, posts e comentários


Widget assinantes feed, followers, posts e comentários
O widget é muito fácil de usar. Copie o código abaixo e cole no gadget html/javascript do Blogger. Substitua as partes em vermelho, respectivamente, pelos códigos do FeedBurner e do Twitter Counter. Se você não sabe como obter estes códigos, explicarei mais à frente.
<div style="width: 345px; padding: 0; margin: 0; border: 0;">
<div name="feed" style="float: left; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB33Mj2qnQRtrHgeeyK4dKexkFh8lzDT7T6TgGdw19n47SCWQmtXAoRIG-e6L4Qa7o6_bfaK5HzOCjDE0qwzQba8wJq-IcbLaQbbeDG_ieTMThDkUQ279_MWPbrTdvHrF9AevvqbEFZJQN/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO FEEDBURNER</div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
</div>
<div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5y1nhrqEfapKtAPqAuRv0NSPUe3m9lGbrUDfdH8lXvJpS7rhiIUB7pgX5nOSS8xamBg3BYovl7kBNaksJrV-yjBhsF12P0R-0jJbBhpnRDQRXSaKZwvJzcktAH6s4ZxLgEIHDDUs1TIwj/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO TWITTER COUNTER</div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
</div>
<div name="postagens" style="margin-top: 5px; float: left; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80RDXAvvl5meaddLkP5nNpmfeTnmV6M-3lh7PjZQTds-jPbxrvZc7v7uXAi8B_gLTquHVfTqK4kBlqEy1Pe_A4o-Qlod0_4RnqqZArcMoQ_8_moCJRq9rbRThOdt1DiWmKVGVVCepoPll/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><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> Postagens </div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">acompanhe</p>
</div>
<div name="comentarios" style="margin-top: 5px; margin-left: 10px; float: left; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu1FWBGdEB37-KHLM3ELJL4y1CDgbbzt2RrVysk3PW2Qq9oEgTGuziXDY1QNA9bbKbztBj7oZZtMQVMD7062mMXAKc9gkWhxyQ1PR8pyhiZLVR-ZKAB1J11Tfr3etoKjrRVrcVLcU3fO0d/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }
<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>
Comentários</div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">comente também</p>
</div>
<div style="text-align: center;"><small> Widget <a href="http://www.dicas.victormoral.com/2011/08/widget-feeds-seguidores-posts-e.html">Dicas Victor Moral</a></small></div>
Para obter o código do contador do FeedBurner, entre no site e acesse a aba publicize (1). Na coluna da esquerda, clique em FeedCount (2). Configure as cores (sugestão: DE682B para o plano de fundo do botão e 444444 para o texto) e copie o código (3). Cole na parte em vermelho ( CÓDIGO DO FEEDBURNER ) do código do contador.
feedcount
Para obter o código do TwitterCounter, acesse o site, escreva seu username do Twitter no campo indicado (1), faça login pelo método OAuth (é seguro) e depois clique na aba buttons (2). Configue as cores do botão (sugestão: 47C8F5 para o plano de fundo e 000000 para o texto) e copie o código fornecido. Cole o código na parte em vermelho ( CÓDIGO DO TWITTER COUNTER ) do código do widget.
twitter counterimage
Widget assinantes de feeds e seguidores do Twitter
Se você quiser mostrar apenas os assinantes de feeds e os seguidores no Twitter, copie este código, faça as alterações necessárias e cole no gadget html/javascript do Blogger:
<div style="width: 345px; padding: 0; margin: 0; border: 0;">
<div name="feed" style="float: left; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB33Mj2qnQRtrHgeeyK4dKexkFh8lzDT7T6TgGdw19n47SCWQmtXAoRIG-e6L4Qa7o6_bfaK5HzOCjDE0qwzQba8wJq-IcbLaQbbeDG_ieTMThDkUQ279_MWPbrTdvHrF9AevvqbEFZJQN/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO FEEDBURNER</div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
</div>
<div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5y1nhrqEfapKtAPqAuRv0NSPUe3m9lGbrUDfdH8lXvJpS7rhiIUB7pgX5nOSS8xamBg3BYovl7kBNaksJrV-yjBhsF12P0R-0jJbBhpnRDQRXSaKZwvJzcktAH6s4ZxLgEIHDDUs1TIwj/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO TWITTER COUNTER</div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
</div>
<div style="text-align: center;"><small> Widget <a href="http://www.dicas.victormoral.com/2011/08/widget-feeds-seguidores-posts-e.html">Dicas Victor Moral</a></small></div>

2 comentários:

Olá. Visitei e vi no "quase" rodapé de seu blog o titulo CONFIRA OUTROS ARTIGOS DESTE BLOG
E aparecem outros artigos dentro de retangulos com imagem e pequeno texto.
por favor, COMO VOCE FEZ ISSO? É postagem popular na horizontal? ou é post com imagem na horizontal? Enfim pode me enviar ou postar aqui o html e o passo a passo POR GENTILEZA?????
Obrigada!!!

Vou te ensinar aqui no blog, fique ligado no Dicas victor Moral!

Postar um comentário

Compartilhe

Twitter Delicious Facebook Digg Stumbleupon Favorites More