Como listar os últimos posts no Blogger

[Liste seus links e os de quem você quiser!]

Tem procurado formas de listar postagens recentes de um blog, mas sem sucesso? Tem buscado alguma maneira de listar as últimas postagens de uma categoria?

Esse post poderia facilmente se chamar "Listar postagens num post", "Página de categoria personalizada" ou "Widget Posts recentes".

Ao contrário do Banner de posts recentes, ou dos widgets de feeds, esse script tem algumas funções a mais:

• Widgets com listagens das últimas postagens
• Widgets com listagens das últimas postagens por categoria
• Lista de postagens dentro de um post
• Lista de postagens de uma categoria dentro de um post

Ou seja, esse script é um script completo de listagem de posts para Blogger (Blogspot). Nesse artigo, ensinarei como utilizá-lo e mostrarei alguns exemplos:

[...]
Leia o Texto Completo » [...]
Leia o Texto Completo »

Barra de compartilhamento: Personalização

[Compartilhe seus artigos no Twitter, Facebook, Buzz e Orkut!]

No dia 11 de janeiro, foi postada nesse blog a Barra de compartilhamento Twitter, Facebook, Orkut e Buzz. Como prometido, vou ensinar vocês a personalizar a barra de algumas maneiras, utilizando CSS.

As personalizações dessa postagem serão basicamente relacionadas ao estilo da barra, relativamente simples.

Pronto para começar? Vamos lá!

[...]
Leia o Texto Completo » [...]
Leia o Texto Completo »

Barra de Compartilhamento Twitter, Facebook, Orkut e Buzz

[Compartilhe seus artigos no Twitter, Facebook, Buzz e Orkut!]

Que tal dar a oportunidade a seus visitantes de compartilharem os seus conteúdos nas redes sociais?

Que tal abandonar a barrinha de compartilhamento do Blogger que não é atraente para o visitante?

Por esse motivo, criei essa barra de compartilhamento. Ela, por enquanto, tem suporte a 4 redes sociais (Twitter, facebook, Orkut e Google Buzz), 2 modelos de botão e 2 tamanhos. Veja:

[...]
Leia o Texto Completo » [...]
Leia o Texto Completo »

Banner de Posts Recentes

[Mostre aos paraquedistas os seus posts!]

Depois de muito tempo sem postar um widget, apresento a vocês o banner Posts Recentes!

Como o próprio nome já diz, o widget é um banner que apresenta os 3 posts mais recentes do blog (Blogger/Blogspot). Ele vem em dois formatos: 728x90px e 468x60px e é de fácil instalação.

Mas... Por que instalar esse widget?

Se você não monetiza o seu blog, não precisa de banners de publicidade nele. Então, por que não utilizar esse espaço para ganhar mais visitas para os seus artigos e reduzir a taxa de rejeição?

Formatos

O banner grande (728x90) é bom para ser utilizado abaixo do cabeçalho da página ou acima dele. O número de caracteres é limitado a 50.

O banner médio (468x60) pode ser utilizado abaixo do cabeçalho, acima (ou abaixo) das postagens, após o título das postagens, entre outros locais. O número de caracteres é limitado a 30. Veja o exemplo dele:

Personalização

Com algum conhecimento de CSS, você pode personalizar as cores do seu banner.

A personalização é “limitada” a isso, a não ser que você tenha um pouco mais de conhecimento de CSS. Ela foi limitada para não ocorrerem “incidentes” provocados por tentativas de personalização.

Instalação

Para instalar o widget, basta clicar no link do final da página, escolher o tamanho do banner, copiar o código e colar na área que você quiser.

O banner não foi colocado como Widget, pois ele poderia cair na sidebar. Por isso, você deve copiar o código e colar onde for mais vantajoso para você.

Bugs e sugestões

O código foi testado em Internet Explorer, Firefox, Chrome e Opera. Se você encontrou algum erro ou tem alguma crítica/sugestão, deixe nos comentários.

Widget: Banner de Posts Recentes

[...]
Leia o Texto Completo »

Contador Twitter e Feedburner em Javascript

Depois que publiquei o Widget Feedburner + Twitter, percebi que ele tinha várias limitações quanto à personalização. Então, resolvi fazer um script que possa ser usado em qualquer widget, com suporte a uma maior personalização. Assim, saiu o novo contador de Seguidores do Twitter e Leitores do Feedburner!

Com esse novo contador, você pode colocar o número de seguidores/leitores não só em widgets, mas também no meio de textos! Por exemplo: no momento em que você está lendo esse texto, o Twitter do SemNome tem seguidores e o Feed, leitores.

Então, quer usar? Veja como:

1 - Inserindo o Script-mestre:
Esse passo precisa ser feito apenas uma vez. O código é esse:

<script type="text/javascript" src="http://semnomenet.googlecode.com/files/twitter-feedburner.js"></script>

Se você for usar mais de uma vez, você pode colocar essa linha antes de </head>. Caso contrário, você só precisa colocar antes do lugar onde você usará.

2 - Inserindo os números
A implantação do script não é nada difícil, basta chamar a função, determinando o pedido:

> Número de Seguidores do Twitter

<script type="text/javascript"> xtwitter("Nome-De-Usuario-do-Twitter") </script>

Lembrando que você deve substituir Nome-De-Usuario-do-Twitter pelo seu nome de usuário do Twitter. E ele deve ficar entre as aspas.

> Número de Leitores do FeedBurner

<script type="text/javascript"> xfeedburner("Nome-do-Seu-Feed-no-FeedBurner") </script>

E lembre-se de substituir Nome-do-Seu-Feed-no-FeedBurner pelo seu URI do Feedburner. Dentro das aspas!

Resumindo...

• A função xfeedburner(uri) imprime o número de leitores do FeedBurner;
• A função xtwitter(usuario) imprime o número de seguidores do Twitter;
• Você pode inserir isso em qualquer local do HTML, não só em widgets;
• O script-mestre só precisa ser inserido uma vez na página, antes de qualquer chamada das funções xfeedburner() ou xtwitter();
• Esse script não imprime créditos em sua página.

Termos de uso

• Você pode modificar o código-fonte do widget, mas deve dar os créditos ao SemNome.
• Você não pode divulgar esse widget como seu.

E uma espécie de “promoção”: Quem fizer skins para esse widget - e disponibilizá-las em seu blog - terá seu link publicado nesse post.

1. O 1º blog que fez um skin para esse widget foi o Gothic Darkness, e ficou bem legal. Confira!

Dúvidas, críticas ou sugestões? Poste nos comentários.

[...]
Leia o Texto Completo »

Personalizando o Widget Twitter+FeedBurner

Como eu havia prometido, hoje ensinarei a personalizar o Widget Contador de Seguidores do Twitter/Leitores de Feed. Afinal, widgets foram feitos para serem personalizados, não?!
Como nem todos sabem mexer com CSS/HTML, além de ensinar a personalizar, também darei alguns exemplos prontos. Vamos lá!

Como Personalizar o Widget Contador do Twitter/Feedburner com CSS

Se você conhece CSS, você entenderá tudo que será apresentado aqui. Se não entende (e nem quer entender), pule para os exemplos prontos.
Aí estão as explicações:

• .feedburnerc = Classe do parágrafo com o contador FeedBurner
• .twitterc = Classe do parágrafo com o contador do Twitter
• .snnum = o número de seguidores/leitores, para serem diferenciados dos sufixos
• O contador contém links. Então, para personalizar as cores e retirar o sublinhado, basta usar .feedburnerc a e .twitterc a

Personalizando adicionando tags no sufixo
Se você utilizar tags de imagens ou outros parágrafos/spans nos sufixos, o seu widget ficará mais original. Imagens também funcionam bem.

Exemplos

- Texto azul, alinhado à direita

<style type="text/css">
.feedburnerc, .twitterc{/*Configurando tamanho, fonte, alinhamento e espaçamento do Widget*/
font-size:16px; /*O tamanho dos sufixos*/
margin:1px;padding:0; /*Espaçamento das linhas do Widget. Recomendo deixar assim.*/
text-align:right; /*Alinhamento à direita. Se quiser à esquerda, é só mudar para 'left'. Se quiser o texto centralizado, mude para "center" */
font-family:Arial, Helvetica, sans-serif; /* Estilo da Fonte. Você pode mudar ou apagar essa linha, para deixar a fonte padrão do seu blog*/
}
.feedburnerc a, .twitterc a{/*Configurações de Cor e efeitos do Widget*/
text-decoration:none;/*Removendo o sublinhado dos links*/
color:#0000FF;/*Mudando a cor dos links*/
}
.snnum{ /*Configurando o número, se você quiser maior que os sufixos*/
font-size:20px;/* O tamanho do número, para diferenciar das palavras */
}
</style>
<script type="text/javascript">
var twitter = "semnome_net"; //Seu Username (nome de login) do Twitter
var feedburner = "semnome-net"; //A URI do seu Feed no FeedBurner
var feedsufix = "Leitores"; // O que aparecerá depois do número de Leitores do Feed
var twitsufix = "Seguidores"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

- Texto Vermelho, alinhado à esquerda

<style type="text/css">
.feedburnerc, .twitterc{/*Configurando tamanho, fonte, alinhamento e espaçamento do Widget*/
font-size:14px; /*O tamanho dos sufixos*/
margin:1px;padding:0; /*Espaçamento das linhas do Widget. Recomendo deixar assim.*/
text-align:left; /*Alinhamento à direita. Se quiser à esquerda, é só mudar para 'left'. Se quiser o texto centralizado, mude para "center" */
font-family:Arial, Helvetica, sans-serif; /* Estilo da Fonte. Você pode mudar ou apagar essa linha, para deixar a fonte padrão do seu blog*/
}
.feedburnerc a, .twitterc a{/*Configurações de Cor e efeitos do Widget*/
text-decoration:none;/*Removendo o sublinhado dos links*/
color:#FF0000;/*Mudando a cor dos links*/
}
.snnum{ /*Configurando o número, se você quiser maior que os sufixos*/
font-size:16px;/* O tamanho do número, para diferenciar das palavras */
}
</style>
<script type="text/javascript">
var twitter = "semnome_net"; //Seu Username (nome de login) do Twitter
var feedburner = "semnome-net"; //A URI do seu Feed no FeedBurner
var feedsufix = "Leitores"; // O que aparecerá depois do número de Leitores do Feed
var twitsufix = "Seguidores"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

- Texto Preto, centralizado e com um texto menor embaixo (legenda)

<style type="text/css">
.feedburnerc, .twitterc{/*Configurando tamanho, fonte, alinhamento e espaçamento do Widget*/
font-size:18px; /*O tamanho dos sufixos*/
margin:1px;padding:0; /*Espaçamento das linhas do Widget. Recomendo deixar assim.*/
text-align:center; /*Alinhamento à direita. Se quiser à esquerda, é só mudar para 'left'. Se quiser o texto centralizado, mude para "center" */
font-family:Arial, Helvetica, sans-serif; /* Estilo da Fonte. Você pode mudar ou apagar essa linha, para deixar a fonte padrão do seu blog*/
}
.feedburnerc a, .twitterc a{/*Configurações de Cor e efeitos do Widget*/
text-decoration:none;/*Removendo o sublinhado dos links*/
color:#000000;/*Mudando a cor dos links*/
}
.snnum{ /*Configurando o número, se você quiser maior que os sufixos*/
font-size:22px;/* O tamanho do número, para diferenciar das palavras */
}
.min{
font-size:65%;
}
</style>
<script type="text/javascript">
var twitter = "semnome_net"; //Seu Username (nome de login) do Twitter
var feedburner = "semnome-net"; //A URI do seu Feed no FeedBurner
var feedsufix = "Leitores<br /><s"+"pan class='min'>Assine Também!</s"+"pan>"; // O que aparecerá depois do número de Leitores do Feed
var twitsufix = "Seguidores<br /><s"+"pan class='min'>Siga Também!</s"+"pan>"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

E ficamos por aqui. Se você tiver uma noção mínima de CSS, você poderá fazer um widget muito bom. E lembre-se de trocar semnome_net e semnome-net pelos seus dados.

[...]
Leia o Texto Completo »

Widget FeedBurner + Twitter

Que tal mostrar o número de seguidores do Twitter e o número de Leitores de Feed do seu blog sem ter que usar aqueles botões clássicos?
Quando se usa Wordpress (CMS), basta usar algumas funções PHP e pronto. Mas se você usa o Blogger ou o Wordpress.com, não é tão simples assim. Ou pelo menos não era: apresento a vocês mais um Widget Contador do SemNome:

Widget Contador de Seguidores do Twitter e Leitores do Feedburner

Por ser um widget de fácil instalação, não preciso falar muito dele. Bastam umas configurações e pronto! Veja:

- Widget Twitter + Feedburner
Basta usar o código:

<script type="text/javascript">
var twitter = "semnome_net"; //Substitua por seu Username (nome de login) do Twitter
var feedburner = "semnome-net"; //Substitua pelo URI do seu Feed no FeedBurner
var feedsufix = "Leitores"; // O que aparecerá depois do número de Leitores do Feed
var twitsufix = "Seguidores"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

- Widget Twitter
Não é necessário usar os dois, se você não quiser. Então, se você quiser apenas o Twitter, basta apagar a linha do FeedBurner:

<script type="text/javascript">
var twitter = "semnome_net"; //Substitua por seu Username (nome de login) do Twitter
var twitsufix = "Seguidores"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

- Widget FeedBurner
Como no exemplo anterior, você só precisa usar o que você quiser. Então, se você quiser apenas o contador do FeedBurner, apague a linha do Twitter:

<script type="text/javascript">
var feedburner = "semnome-net"; //Substitua pelo URI do seu Feed no FeedBurner
var feedsufix = "Leitores"; // O que aparecerá depois do número de Leitores do Feed
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

E pronto! Mais fácil que isso, impossível (ou não)
No próximo post, ensinarei a customizar esse Widget ao seu gosto. Até lá!

Termos de Uso: Não retire os créditos nem redistribua esse widget como seu.
Modificações são permitidas, desde que sejam dados os créditos ao SemNome.

Confira outros Widgets:

• Widget Top Comentaristas
• Widget Ranking BlogBlogs
• Botão Contador de Seguidores do Twitter
• Botão contador de Posts e Comentários

E você, o que achou? Deixe a sua opinião ou sugestões nos comentários.

[UPDATE] No dia 14/02/2010 foi postado um tutorial de personalização desse Widget. Confira!

[...]
Leia o Texto Completo »

Widget Top Comentaristas

(Não, não consegui achar/criar outra imagem)

Que tal aumentar os comentários no seu blog apenas incentivando os seus leitores? Para isso, basta você instalar um Widget com os Top Comentaristas do blog.

Baseado em mais um widget do Compulsivo, perdi um fim de semana adicionando algumas novas funcionalidades nele (Não, dessa vez não fiz um botão).

O que esse widget tem de diferente dos outros?

[...]
Leia o Texto Completo » [...]
Leia o Texto Completo »

Widget Ranking BlogBlogs

Novamente baseado em um widget do Compulsivo, fiz dois botões com o Ranking do BlogBlogs, com o mesmo esquema de cores do Contador de Posts e Comentários. Como os outros widgets, a instalação é fácil e rápida. Veja como:

Instalação

1 - Visite a página do Widget de Ranking do BlogBlogs

2 - Copie o Seu ID, que estará como na imagem abaixo:

3 - Substitua SEU_ID_BLOGBLOGS no código do modelo escolhido pelo ID que você copiou

4 - Coloque o código em um widget HTML/Javascript

 

---

Modelo 1:

465Widget by SemNome

<style type="text/css">#snrank1{width:80px; height:15px; position:relative; margin:5px auto; display:block; padding-bottom:5px;}#bbwa, #bbwb, #bbwf,.bbw_buttons, #bbwg , #bbwd, #bbwe{display: none; visibility:hidden;} #snrank1 #bbwh{ font-family:Arial, Helvetica, sans-serif;position:absolute;left:49px; top:2px;padding:0;font-size:9px;color: #000000; margin:0; text-align:left;}</style><div id="snrank1"><center><script src="http://embed.blogblogs.com.br/embed/blogrank?blog_id=SEU_ID_BLOGBLOGS&style=0" type="text/javascript"></script><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD9WAjwYCG0dMBCbo73exKrGI4MSSk28ny52fzrv2FtBpGd5lL9KlDM9dvAtm5jtE4SoTYTM2eXAYIO1jQc1wraEAgtdOlUvtjPEP-D4xKKqnMz1hxJaJqyBQie_YNHavYk6-ZtVXPOHI8/s1600/bblogs.png" style="clear:both; padding:0; margin:0; border:none; display:block;" alt="Ranking BlogBlogs"/><span style="font-size:9px; margin:0; padding:0;font-family:'Times New Roman', Times, serif;"><a href="http://semnome.net/2009/12/widget-ranking-blogblogs.html" title="Botão BlogBlogs SemNome">Widget by SemNome</a></span></center></div>

---

Modelo 2:

465Widget by SemNome

<style type="text/css">#snrank2{width:80px; height:15px; position:relative; margin:5px auto; display:block; padding-bottom:5px;}#bbwa, #bbwb, #bbwf,.bbw_buttons, #bbwg , #bbwd, #bbwe{display: none; visibility:hidden;} #snrank2 #bbwh{ font-family:Arial, Helvetica, sans-serif;position:absolute;left:45px; top:2px;padding:0;font-size:9px;color: #000000; margin:0; text-align:left;}</style><div id="snrank2"><center><script src="http://embed.blogblogs.com.br/embed/blogrank?blog_id=SEU_ID_BLOGBLOGS&style=0" type="text/javascript"></script><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixrMzCyfkm07Uybo8JlNktl8SPWuJBtoSg96rxkxer2xBRcYIbIk54-4go4_guzApLTnX0EpLhzhHpDeEjFGCmWDKO1EzDfejUoMam_VPVHTENfLrNAJaXdTgMFQTjjhBhqARQ8AJLCuVi/s1600/bblogs2.png" style="clear:both; padding:0; margin:0; border:none; display:block;" alt="Ranking BlogBlogs"/><span style="font-size:9px; margin:0; padding:0;font-family:'Times New Roman', Times, serif;"><a href="http://semnome.net/2009/12/widget-ranking-blogblogs.html" title="Botão BlogBlogs SemNome">Widget by SemNome</a></span></center></div>

---

Termos de Uso

Não retire os créditos!

Veja outros Widgets parecidos:

• Botão Contador de Seguidores do Twitter
• Botão Contador de Posts e Comentários

[...]
Leia o Texto Completo »

Widgets utilizando Feeds no Blogger/Blogspot

Use seus feeds como Widgets no Blogger!

Para que servem os feeds? Se você já tem alguma experiência com internet, sabe que servem para receber as atualizações de um blog/site sem precisar entrar diretamente nele. Mas se você é blogueiro, tem que saber que os feeds servem para personalizar o seu blog.
Nesse artigo, vamos ver três tipos de widgets que podem ser criados utilizando o recurso de feeds no Blogger/Blogspot (Se você utiliza Wordpress, é necessário fazer algumas modificações):

• Links recentes
• Atualizações do Twitter
• Comentários Recentes

Então, vamos lá!

Widget de links recentes para Blogger/Blogspot

1 - Vá em http://blogsearch.google.com.br/
2 - Busque por “link:urldoseublog.blogspot.com” (sem aspas)

3 - Na barra lateral da busca, clique em “Atom” ou “RSS” (tanto faz)

4 - Copie a URL do link na barra de navegação
5 - Vá no Painel do Blogger e Clique em “Layout”, abaixo do seu blog. Em “Elementos da página”, escolha uma barra e clique em “Adicionar um Gadget”. Aparecerá uma janela assim:

6 - Clique em “Feed”
7 - Cole a URL e clique em “Continuar”

8 - Altere o título do Gadget, deixe as caixas desmarcadas, escolha a quantidade de links e clique em “Salvar”

Pronto! Agora você já pode ter uma lista de links recentes para o seu blog!

Widget de atualizações do Twitter

1 - Visite a página do seu twitter
2 - Visite o feed das suas atualizações

3 - Copie a URL do Feed
4 - Faça a mesma coisa do Widget de links recentes, a partir do passo 5.
Pronto! Agora você tem um widget de atualizações do Twitter igual ao do SemNome!

Widget de Comentários Recentes para o Blogger/Blogspot

1 - Vá no Painel do Blogger e Clique em “Layout”, abaixo do seu blog. Em “Elementos da página”, escolha uma barra e clique em “Adicionar um Gadget”. Selecione “Feed”.
2 - Coloque a url “http://urldoseublog/feeds/comments/default” e clique em “Continuar”

3 - Altere o título do Widget e, se quiser, pode selecionar “Fonte/Autores do item”. Clique em Salvar.

Pronto! Mais um widget feito com o recurso de Feeds do Blogger/Blogspot!

Bem, esses foram os widgets de hoje. Críticas, sugestões ou dúvidas, poste nos comentários.

[...]
Leia o Texto Completo »

Widget Contador de Seguidores do Twitter

Voltando a personalizar widgets, resolvi voltar com um widget básico: um contador de seguidores do Twitter, já que o Twitter virou uma febre mundial. Este widget foi feito para fugir do layout do Twittercounter, que todo mundo usa.
O Widget tem aparência baseada no clássico Botão contador de posts e comentários e usa o script do Twittercounter. A instalação é fácil, só sendo necessária a modificação do nome de usuário do twitter. Foram feitos três modelos diferentes para esse contador:

Contador Simples

Widget By SemNome

<style>#snwidget1{width:100px;text-align:center;}#countertwitter1{width:88px;position:relative;height:auto;padding:0 0 0 0;margin:0px auto 2px auto;}#countertwitter1 #TwitterCounter a{color:#000000;text-decoration:none;font-family:Verdana, Arial, Helvetica, sans-serif!important;font-size:12px;position:absolute;left:5px;bottom:2px;padding:0 0 0 0;margin:0 0 0 0;}</style><div id="snwidget1"><center><div id="countertwitter1"><!-- ATENÇÃO! Troque o nome de usuário do twitter a seguir, a não ser que você queira o meu número de seguidores...--><script type="text/javascript" language="javascript" src="http://twittercounter.com/widget/index.php?username=semnome_net"></script><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04U-nXo-Em3akRxx2Vs5F0BYcCAYe8ARqms0YyXXUj44YwJyrKKOQuE-KU2R9x3o3pmWS7_GoOJLY5dsOuhbhcF1lwalTrv7SiMA3nqEm06SJat2PPQcLELhJMiqNxHROeOzS20WEMPOR/s320/modelo1.png" width="88" height="19" /></div><span style="font-size:70%"><a title="Contador do Twitter Personalizado" href="http://semnome.net/2009/08/contador-de-seguidores-no-twitter.html" target="_blank">Widget By SemNome</a></span></center></div>

---

Contador com logo (EN)

Widget By SemNome

<style>#snwidget2{width:100px;text-align:center;}#countertwitter2{width:100px;position:relative;height:auto;padding:0 0 0 0;margin:0px auto 2px auto;}#countertwitter2 #TwitterCounter a{color:#000000;text-decoration:none;font-family:Verdana, Arial, Helvetica, sans-serif!important;font-size:12px;position:absolute;right:6px;bottom:2px;padding:0 0 0 0;margin:0 0 0 0;}</style><div id="snwidget2"><center><div id="countertwitter2"><!-- ATENÇÃO! Troque o nome de usuário do twitter a seguir, a não ser que você queira o meu número de seguidores...--><script type="text/javascript" language="javascript" src="http://twittercounter.com/widget/index.php?username=semnome_net"></script><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefkBAuyfgEane9lc7xN4OafcsZuzXo2udOklh_DZYxRWkUaji2_KDWFlHPddDDkntFeXnwbW1MQkpl5AqKvvEXKMYJpaPhFbbYXwBq-JiSYsnr1B6AHN9lCiLtX0Y_ZfNSMbj0QbKxQA1/s320/modelo2.png" width="100" height="30" /></div><span style="font-size:70%"><a title="Contador do Twitter Personalizado" href="http://semnome.net/2009/08/contador-de-seguidores-no-twitter.html" target="_blank">Widget By SemNome</a></span></center></div>

---

Contador com logo (PT)

Widget By SemNome

<style>#snwidget3{width:100px;text-align:center;}#countertwitter3{width:100px;position:relative;height:auto;padding:0 0 0 0;margin:0px auto 2px auto;}#countertwitter3 #TwitterCounter a{color:#000000;text-decoration:none;font-family:Verdana, Arial, Helvetica, sans-serif!important;font-size:12px;position:absolute;right:5px;bottom:2px;padding:0 0 0 0;margin:0 0 0 0;}</style><div id="snwidget3"><center><div id="countertwitter3"><!-- ATENÇÃO! Troque o nome de usuário do twitter a seguir, a não ser que você queira o meu número de seguidores...--><script type="text/javascript" language="javascript" src="http://twittercounter.com/widget/index.php?username=semnome_net"></script><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwy6mp6wU6CXpS19qNVN9kQtX0cvmlZN5sDDZxLCRlmrFYgMiP45sbgsaDANPRU2_l0vUfro6Dgi6t9ULMNaK4N9vwG5YLuZMsjlv2Dy6w5oIgvQ8qVy5qoZyiPdqkcayo2EzzPmYo9Np/s320/modelo2-pt.png" width="100" height="30" /></div><span style="font-size:70%"><a title="Contador do Twitter Personalizado" href="http://semnome.net/2009/08/contador-de-seguidores-no-twitter.html" target="_blank">Widget By SemNome</a></span></center></div>

Instalação

Copie o código de algum dos três botões e cole em em widget do tipo "HTML/Javascript" do Blogger (Pode também ser usado em outras plataformas);
Troque o trecho destacado em negrito pelo seu nome de usuário do twitter:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/widget/index.php?username=semnome_net"></script>

Salve o Widget e seja feliz!

Termos de uso: Não retire os créditos!

[...]
Leia o Texto Completo »

Personalizando o Botão Contador de Posts e Comentários

Lembra do Botão contador de Posts e Comentários? Ele foi baseado no Widget Contador de Posts e Comentários do UsuárioCompulsivo. A pedido de uma leitora, eu criei esse tutorial.
Para poder customizar o seu próprio widget, é necessário que você tenha o Photoshop instalado no seu computador. O objetivo desse artigo é ensinar como mudar o fundo do botão, assim como cores e formato, já que para mudar a posição dos nomes e números é necessário um pouco mais de prática com CSS. Então, vamos lá:
 

1 – Baixe o arquivo da imagem de fundo, clicando aqui.
2 – Abra o arquivo;

Entendendo o arquivo

1 – Agrupamento de camadas “Texto”
Onde ficam as camadas com texto

2 – Camada “Artigos”
A Camada onde fica a palavra “Artigos”. Não é recomendável que você mexa nela, a não ser para mudar a cor.
3 – Camada “Comentários”
A Camada onde está escrito “Comentários” (não diga...). Como a camada anterior, não é recomendável que você altere a camada, a não ser que você saiba o que você está fazendo.
4 – Camada “Moldura - Textos”
Nessa camada ficam as molduras onde entrarão os números. Ela está bloqueada, então não mexa nela, a não ser que você mexa no CSS e em outras coisas (Lembra do objetivo do artigo?).
5 – Camada “Camada 1”
Camada onde está o degradê de efeito do botão (erro: esqueci de renomear a camada). Essa você pode excluir e fazer qualquer outro efeito.
6 – Camada “Fundo / Moldura”
A camada onde fica o fundo do botão, a cor e os efeitos. Perceba que o fundo atrás dela é transparente. Essa camada, como a “Camada 1”, você pode excluir, já que você irá personalizar.

Mãos na massa

1 – Modificando o fundo
Após abrir o arquivo, vá na camada “Fundo / Moldura”, aperte Ctrl+A e depois a tecla “Delete” (Selecionar tudo e deletar). Exclua a “Camada 1” e o efeito de traçado da camada “Fundo / Moldura”. Irá ficar assim a sua imagem:

2 – Colocando um fundo
Na camada “Fundo / Moldura”, escolha uma forma personalizada ou faça o que você quiser (o widget é seu!) com a imagem. O importante é só deixar ela por trás do resto da imagem. Eu utilizei uma forma personalizada:

Após uns efeitinhos:

Trocando a cor do texto (tem que mudar de cada um):

3 – Salvando
Com a imagem pronta, vá em Arquivo – Salvar como (File – Save As) (Ctrl+Shift+S) e salve no formato PNG ou GIF, pois estas têm suporte a fundo transparente. Se você colocou algum brilho externo ou sombra, você deve usar o formato PNG (recurso da transparência não suportado em versões do Internet Explorer anteriores à 7).

Publicando

Para seu botão contador ser visualizado pelas outras pessoas, você deve hospedar a imagem (PNG ou GIF) em algum servidor, como ImageShack, Photobucket, ou no Picasa. Após pegar o link da imagem (Direct Link ou algo parecido, aquele que leva somente à imagem), continuemos com o tutorial:

1 – Código básico
Este é o código original do Botão Contador de Posts e Comentários do SemNome:

<script type="text/javascript">
  function showpostcount(json) {
  document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
  }
</script>
<div style="width:108px; height:43px; position:relative; font-size:13px; font:Verdana, Arial, Helvetica, sans-serif!important;color:#000000">
<span style="position:absolute; top:5px; right:7px;">
<script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
</span><span style="position:absolute; bottom:5px; right:7px;">
<script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script>
</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT1-0v6ox1KVbs1M9lgLA6-dgZsSBeeY3__917SPhL0W70xWYk1fYYD7EBpE_wRuLT1PT8l3RRK66SVmUQebcT2SRDD4KCab5eFu6WbHgmYXEmqwVbqvKCXGQ7BhTW9sSCiTe3RbYHX13C/s320/count+blogger.png" /></div>
<span style="font-size:11px"> Widget by <a href="http://semnome.net" target="_blank" title="SemNome">SemNome</a> </span>

2 – Substituindo os campos em Negrito
Essa é a parte mais fácil: basta substituir o primeiro campo em negrito pelo código da cor que você quer usar como texto e o segundo é a URL da imagem que você hospedou.
Pronto! Agora é só colocar no seu blog em um Widget HTML/Javascript e dizer: “Eu que fiz”!

Resultado

O botão final desse tutorial foi esse:

Widget by SemNome

Caso queira usar esse novo modelo em seu blog, basta copiar o seguinte código para o seu blog, em um widget HTML/Javascript:

Novo Botão Contador de Posts e comentários

<script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); } </script> <div style="width:108px; height:43px; position:relative; font-size:13px; font:Verdana, Arial, Helvetica, sans-serif!important;color:#50008E;"> <span style="position:absolute; top:5px; right:7px;"> <script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> </span><span style="position:absolute; bottom:5px; right:7px;"> <script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> </span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVjLYTPA1s26aCoIN4cY-HbLChSKpLGMqOzpNFUiM0d9wnBC4n_S-jRJxUnwA-cErDI9x1pcmxpnIDWxvvNUyN0hn4Xg-fX1DOZqdI4-iWn5oov0qTXh7VMbFJSaRdUPxJgic2Z971CEi/s320/new_count.png" /></div><span style="font-size:11px"> Widget by <a href="http://semnome.net" target="_blank" title="SemNome">SemNome</a> </span>

[...]
Leia o Texto Completo »

Botão contador de Posts e Comentários

O uso das estatísticas é muito importante hoje em dia. Além dos donos dos blogs, os anunciantes avaliam um blog de acordo com as estatísticas.

Enquanto eu digito esse post, o SemNome está com 24 postagens e 27 comentários, cerca de 1 comentário por postagem. Uma quantidade muito baixa, ainda mais se comparada a grandes blogs, como o Interney e o UsuárioCompulsivo.

Mesmo assim, me interessei no Widget Contador de Posts e Comentários do UsuárioCompulsivo, que, como o próprio nome diz, conta os posts e os comentários no blog. Esse widget foi criado para a plataforma Blogger e pode ser usado em qualquer blog. Veja como fica o Widget do Compulsivo:

Este site possui atualmente:

3086 Comentários em 362 Artigos!
Widget UsuárioCompulsivo

Baseado nesse widget, eu criei alguns botões com contador de posts e comentários. Resolvi, então, compartilhar com vocês:

Sem Logotipo:

Widget by SemNome

<script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><div style="width:108px; height:43px; position:relative; font-size:13px; font:Verdana, Arial, Helvetica, sans-serif;"><span style="position:absolute; top:5px; right:7px;"><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></span><span style="position:absolute; bottom:5px; right:7px;"><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn2ELfKHHNRz3z5gYLYoWzrmXLseHfpzFpBWO5-jFXEdtDvDjsSuGGbrS9Wbjq5csWxJ2ki0jpUxRaBFZhcaBK1q7OabessMywjncPvYfs2uIIR6YAd5OKMnqQ7zZKiWw_IECYdeJRqofL/s320/count2.png" /></div><span style="font-size:11px"> Widget by <a href="http://semnome.net" target="_blank" title="SemNome">SemNome</a> </span>

Com Logotipo do Blogger (Laranja)

Widget by SemNome

<script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><div style="width:108px; height:43px; position:relative; font-size:13px; font:Verdana, Arial, Helvetica, sans-serif;"><span style="position:absolute; top:5px; right:7px;"><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></span><span style="position:absolute; bottom:5px; right:7px;"><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT1-0v6ox1KVbs1M9lgLA6-dgZsSBeeY3__917SPhL0W70xWYk1fYYD7EBpE_wRuLT1PT8l3RRK66SVmUQebcT2SRDD4KCab5eFu6WbHgmYXEmqwVbqvKCXGQ7BhTW9sSCiTe3RbYHX13C/s320/count+blogger.png" /></div><span style="font-size:11px"> Widget by <a href="http://semnome.net" target="_blank" title="SemNome">SemNome</a> </span>

Com Logotipo do Blogger (Preto):

Widget by SemNome

<script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><div style="width:108px; height:43px; position:relative; font-size:13px; font:Verdana, Arial, Helvetica, sans-serif;"><span style="position:absolute; top:5px; right:7px;"><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></span><span style="position:absolute; bottom:5px; right:7px;"><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxDNDJ67YJKJcBi9ilyLf6mQjSJCWRuYJYv0wt95arCbcdhDvS6acRW-ltddBZmGW6JMICGGjQX1WXGGWFPyDuPu4Vxu-lN4ZsnkIpbKjkW74vrVnBCjj3n8A8R6m4Hmj2VC5cKkTvELmQ/s320/countblogger2.png" /></div><span style="font-size:11px"> Widget by <a href="http://semnome.net" target="_blank" title="SemNome">SemNome</a> </span>

Para colocar um desses no seu blog, basta copiar o código do botão que você quiser, ir na página de layout do seu blog, clicar em "Adicionar um Gadget". Selecione a opção "HTML/JavaScript". Cole o código e salve!

Termos de uso: Não retire os créditos!

---

UPDATE 17/05/09 - Aprenda também como personalizar e fazer o seu próprio modelo desse botão.

[...]
Leia o Texto Completo »