Códigos Blog - O melhor para o seu Blog!

Widgets Postagens Populares no seu blog

2010-08-29T14:08:00.000-02:00

Recentemente o Blogger liberou um novo widget, onde são mostradas as postagens mais populares do seu blog de acordo com o número de acessos, disponível no painel em “Elementos da Página”.

Esse widget pode ser configurado para mostrar as postagens mais visualizadas no total, nos últimos 30 dias ou da última semana. Além de ser possível colocar miniaturas de imagem ou snippet (fragmentos da postagem).

O sistema como eu disse, mostra as postagens com o maior número de acessos únicos, não por número de comentários ou algo do tipo.

Agora ninguém vai precisar depender de um código POG (Programação Orientada a Gambiarras) para tal função. =]

abraços

0 Assinantes Feed? Erro no Widget?

2010-08-16T15:10:00.000-02:00

Ultimamente estou recebendo muitos comentários e e-mails com a seguinte pergunta:

“Meu widget feed que você criou está dizendo que tenho 0 assinantes, como arrumar esse erro?”

Então vamos explicar detalhadamente aqui para todo mundo entender:
O FeedBurner oferece duas formas de contador de assinantes, um widget próprio conhecido pela grande maioria, exemplo:

E um código simples em XML (ou outra codificação) com algumas informações, disponível para desenvolvedores (programadores) criarem funcionalidades ou simplesmente widgets.
Através desse arquivo XML (disponível para todas as contas), eu criei um contador que puxa as informações por meio de um código PHP, algo também simples, porém funcional para qualquer plataforma de blog ou para qualquer site.

O que acontece é que essa segunda opção é atualizada pela manhã, ou seja, o robô faz o calculo dos assinantes durante o dia. E para o contador do seu blog não ficar trabalhando de mais (sendo atualizado toda hora, o que sobrecarregaria o sistema, pesando inclusive seu blog), ele (o contador visível) é zerado até que a contagem do dia seja finalizada, exibindo após isso acontecer o valor correto (ou aproximado).
Resumindo, o “problema” não está no meu código ou no meu widget e sim na forma de atualização do FeedBurner.
Para você ter uma idéia, basta visualizar outros blogs que usam algum código desse tipo, um exemplo é o ControleRemoto.tv.

Já no widget pronto disponível por eles é diferente, o número nunca é zerado (só quando acontece algum bug). Por ser uma imagem ela é alterada quando chegam novos dados no sistema.

Claro, isso não justifica a falha no sistema do FeedBurner, pra mim é pura falta de interesse deles em resolver o problema. Então me desculpem, mas não posso fazer mais nada.

Obs.: Não vejo problemas em exibir por algumas horas o contador zerado.
Obs.2: Alguns dias o contador continua marcando 0 assinantes por muitas horas. O que é normal, infelizmente.

Leia mais sobre o widget:

Sistema anti-spam no Blogger

2010-08-13T09:39:00.000-02:00

A última novidade que o Blogger trás no momento é uma “arma” indispensável atualmente, um filtro anti-spam para nos protegermos de engraçadinho que acham no direito de fazer propaganda onde quiser, quando quiser, sem ao menos disfarçar.
O novo sistema está sendo implantado aos poucos, então não se assuste caso seu painel ainda não tenha sido modificado.
Ontem pela manhã alguns de meus blogs (incluindo blogs de testes) foram atualizados e já estão com o recurso ativado, recebendo então as seguintes modificações:

aviso no painel

Após efetuar seu login, no blog que o recurso estiver ativo, você vai encontrar a palavra “Comentários”:

Ao clicar na palavra você encontrará 3 abas de opções:

- Publicados

Nada mais é que todos os comentários já publicados em seu blog ordenados por data, do mais recente para o mais antigo.
Caso tenha algum comentário já publicado que você considera spam, marque-o e clique no botão “SPAM”. Assim seu comentário será desativado e ficará na “lista negra” dos comentários.

- Aguardando Moderação

Aqui ficam reunidos todos os comentários não aprovados e não excluídos que aguardam sua aprovação (ou não).
Também é possível marcar os comentários considerados spam e mandar ele para a próxima aba.
Isso só é visível para quem modera os comentários, caso você não ative essa opção, essa aba não será necessária no momento.

- Spam

Todos os comentários considerados spam por você ou considerados automaticamente pelo sistema, são encaminhados para essa página. Como o sistema também funciona de forma automática, é sempre bom dar uma olhada no que ele anda bloqueando (por segurança).

Acreditamos que os autores dos spams serão marcados e inclusos em uma “lista negra” do Blogger, onde mais cedo ou mais tarde podem ser punidos pelo excesso de comentários marcados. O que é uma hipótese, mas caso isso não aconteça à nova funcionalidade ainda é muito interessante, pois permite que a freqüência de comentários inúteis venha a cair.

Uma novidade supimpa! =]
Um grande abraço.

10 Códigos específicos para criação de um template para Blogger

2010-08-05T10:26:00.001-02:00

Para desenvolver um template para Blogger não precisa mais do que criatividade, vontade e o básico de conhecimento em HTML.
Quando digo criar, é apenas modificar! Pois não há necessidade alguma em decorar e reescrever todos os códigos específicos do Blogger, basta criar seu próprio layout com um esqueleto básico pronto.
Ninguém precisa memorizar tantos códigos. Por isso quando descubro algo novo do Blogger (codificação), anoto no bloco de notas e salvo para quando eu precisar de novo, não ficar perdido que nem louco atrás de algo que já usei.

Então hoje, vou mostrar algumas funções bem básicas para usar em seu template dentro da parte das postagens.
1) Hora da postagem

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

2) Dia da postagem

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

3) Número de comentários

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

4) Marcadores usados na postagem

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

5) Autor da postagem

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

6) Icone recomendar postagem para um amigo

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

7) Icone editar postagem

<b:include data='post' name='postQuickEdit'/>

8) Texto explicativo antes do fomulário de comentários

<p style='margin-left: 56px;'><data:blogCommentMessage/></p>

9) Votos de qualificação da postagem

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

10) Backlinks

<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

Para inserir algum código acima, faça login no Blogger, entre em “Design” -> “Editar HTML”. Marque a caixa “Expandir modelos de widgets”.
Você deve usar qualquer código acima entre:

<b:includable id='post' var='post'>
e
</b:includable>

Dentro dessa limitação não existe lugar específico para inserir nada. Então para quem não conhece é comum colocar no lugar errado. Meu conselho é: Faça backup e teste! Testar é a palavra-chave que vai fazer você aprender a criar seu próprio template. Se você tem medo de testar, acredite... Não vale a pena nem começar a trabalhar com os códigos.
Abraços

Estou de volta!

2010-08-03T18:02:00.000-02:00

Estava precisando de férias! Então deixei o blog de lado um pouco, “abandonei” o Twitter e diminui meus trabalhos como freelancer, isso durante o mês de Julho.

Resolvi tirar uma folga dessa rotina, por isso não avisei ninguém e coloquei o PC de repolso. Aproveitei bastante, diverti e descansei muito! Isso me fez muito bem. Mas agora estou de volta!

abraços =]

Novidade! Contador de visitas integrado ao Blogger

2010-07-02T10:45:00.003-02:00

A equipe do Blogger trabalhou e não dormiu essa noite! =]
Nesta madrugada o Blogger implantou o seu mais novo recurso, o Contador de Acessos Incorporado no painel de administração do Blogger in Draft.
Por enquanto o sistema é 100% acessível no Painel de Testes do Blogger (Blogger in Draft), mas em algumas contas (não pergunte por que) o sistema também está acessíveis no painel principal (Blogger.com).

O grande diferencial desse contador é que podemos ter dados quase em tempo real (de uma em uma hora), assim podemos avaliar a melhor forma de propaganda, o melhor horário e o site/blog que mais nos envia visitas em um deternimado momento. Além do mas não é necessário incluir nenhum código no template.

O contador conta com um grande número de informações extras, como de onde vem as visitas, quais o navegadores usados pelos visitas, quais os sistemas operacionais, quais as postagens mais visualizadas, quais os paises que mais acessaram o blog, etc. Resumindo: É um sistema de primeira!

Para acessar as estatisticas:

1 – Faça login no Blogger in Draft;

2 – Clique em “Estatísticas” e pronto! Caso tenha dúvidas no que está escrito em Inglês, use o Google Tradutor.

Uma grande novidade! O que resta agora é acompanhar os números e ver se está de acordo com os grandes contadores, como o Google Analytics. Provavelmente está, pois é bastante semelhante (aparentemente), então suspeito (acho, não estou dizendo que é isso, blz?) que seja apenas uma integração com o contador oficial do Google. Claro, com algumas modificações.

Leia também:

Introducing Blogger Stats

Promoção 3 anos de Códigos Blog!

2010-06-26T23:42:00.007-02:00

Atualizado: 27/07/2010

É com muita luta e trabalho que dia 10 de Julho o Códigos Blog completa 3 anos de vida!
Um simples blog que visa passar minha experiência na blogosfera através de tutoriais, dicas e templates = Códigos Blog.
De 2007 pra cá vim acumulando bastante história e conhecimento. Vi pequenos blogs crescerem, mas vi inclusive muitos bons blogs fechando as portas. Sim, é bastante história, mas odeio embromação! Estou aqui para comemorar junto com vocês mais um ano no ar!

E para não perder o costume, vamos fazer uma promoção! Eu andei pensando em sortear um carro, mas achei muito sem graça, pois não tem nada a ver com blogs, internet e tal (claro que é mentirinha! Haha).
Agora falando sério, quero agradecer a Loja Geek por patrocinar nossa promoção! Graças a essa grande Loja, vamos fazer uma grande promoção.
Também quero agradecer ao Marcos Lemos do Ferramentas Blog, pois liberou uma copia do e-book “Blogar – O processo de criação de blogs!” para a promoção. Um bom material pra quem busca profissionalismo.

Quais os prêmios?

1º Lugar – Uma camiseta Star Wars da Loja Geek + Um Button Star Wars da Loja Geek + Um template/tema personalizado para Blogger ou Wordpress + Um Logotipo criado por mim + Um e-book “Blogar – O processo de criação de blogs!”;
2º Lugar – Uma camiseta Star Trek da Loja Geek + Um Button Star Trek da Loja Geek + Um Logotipo criado por mim;
3º Lugar – Um domínio próprio (.com ou .net) com duração de 1 ano

Como participar?

Escreva uma postagem falando o que você aprendeu com os 3 anos de Códigos Blog, conte um pouco das mudanças que nosso blog trouxe para seu blog, mostre por que você realmente usa o Códigos Blog. Depois no final da postagem coloque a seguinte frase:

“Estou participando da promoção - 3 anos de Códigos Blog patrocinado pela @lojageek! - http://bitw.in/promocaoCB”

Para finalizar comente nesse post dizendo que você está participando e compartilhe o link da postagem feita por você.

Obs.1: Não precisa escrever um post lisonjeando ao extremo o Códigos Blog, mas seja criativo e mostre o que mudou em seu blog a partir do momento em que você começou a usufruiu das dicas aqui postadas.
Obs.2: A frase no final do post deve estár linkada em @lojageek e para a promoção com o seguinte link: http://bitw.in/promocaoCB

Datas da Promoção

O período de inscrição e envio das postagens vai de 26/06/2010 a 23/07/2010 (até as 23h 59min).
Dia 24/07/2010 vou fazer o sorteio e salvar o resultado.
Até dia 28/07/2010 eu publico o resultado de toda a promoção.

Quem não pode participar?

Blogs com conteúdo pornográfico, racista, preconceituoso, pirata, plagiado ou algo do tipo.
Blogs com menos de 3 semanas de existência

Obs.1: ~~Blogs em Wordpress serão aceitos, mas o primeiro prêmio que contém um template para Blogger é somente para Blogger, o ganhador não tem direito a um tema Wordpress ou de outra plataforma.~~

Atualizado: Graças ao Fernando do Blogueiros na Web, você pode escolher entre um template para Blogger ou um tema para Wordpress. =]

Obs.2: Não será aceito postagens com ofensas (ofensa não é igual à crítica).

O Sorteio

Todo participante que deixou seu link nesse post e está seguindo as regras, receberá um número de participação mostrado aqui no final do período de inscrição (gerado de acordo com a sequência dos comentários).
Depois de finalizado as inscrições, vou usar o Random.org para fazer o sorteio dos números, onde vou sortear por ordem (1° ganhador, 2° ganhador e3° ganhador).

Entrega dos prêmios

O E-book será entregado pelo Marcos Lemos via e-mail e os outros prêmios serão de minha responsabilidade de entrega.

Boa sorte!

Atualizado:
Os participantes que entraram na promoção de acordo com as regras e deixaram um comentário aqui foram poucos. Não esperava muito, pois fiz uma promoção muito fechada. Sempre tive conciência que poucas pessoas iam participar, todavia meu objetivo principal era conhecer melhor que os meus leitores buscam e o que eles mais gostam aqui no CB.
Estou muito satisfeito e animado com algumas mudanças que pretendo fazer! =]

Os participantes são:
1- Escritos Ideológicos
2- Blog do Jonathaan
3- Emulationgamer
4- Bloguinho das Dicas
5- Pracabá
6- Dicas para Blog
7- Caderno do Povo
8- Menino do Computador
9- Digital News
10- Baixe a Palavra
11- Vamos Rir
12- Dropex Info

O resultado final foi...

Primeiro:

Segundo:

Terceiro:

Resultado:
1º - Digital News
2º - Caderno do Povo
3º - Menino do Computador

Quero agradecer a todos que participaram, a todos que deram os parabéns para o meu trabalho e ao Códigos Blog.
Os vencedores: Me procurem o mais rápido possível! Prazo máximo: 11/08/20010=]

Aguardem... Prometo uma promoção menos exigente! xD
Obrigado.

Como mudar o domínio do blog

2010-06-25T19:43:00.001-02:00

Muitos usuários do Blogger encontram dificuldades na configuração de seus blogs. Isso é mais do que normal para quem ainda não tem afinidade com a plataforma.
Devido ao número de dúvidas sobre o painel, vou criar posts simples e bem diretos, explicando como fazer pequenas mudanças (talvez de muita importância).

Para começar vamos aprender a mudar o link do seu blog, sem ser para um domínio próprio.

1 – Faça login do Blogger, entre em “Configurações”-> “Publicação”.

2 – Procure o título: “Configurações avançadas” e onde está “Seu domínio”, escreva o novo endereço do blog.

3 – Digite o seu novo endereço no campo.

4 – Escreva o código de confirmação (Verificação de palavras) e clique em “Salvar Configurações”.

Obs.: Caso o endereço não esteja disponível, você será avisado.
Leia também:

Como colocar domínio próprio no Blogger

Como arredondar bordas via CSS

2010-06-15T23:44:00.002-02:00

Devido ao grande número de pedidos vou fazer esse post! =]
A melhor forma de arredondar as bordas de qualquer parte do template é fazendo imagens com cantos arredondados, pois fazer isso via código CSS pode dar incompatibilidade em navegadores antigos que não dão suporte a versão 3.0 do CSS.

"Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento [...]"
Texto: Wikipédia

Então vou deixar bem explicado: CSS 3.0 é uma versão mais nova do “Cascading Style Sheets” e por se tratar de uma novidade, alguns códigos não são “lidos” por navegadores antigos, exemplo: Internet Explorer 8.0 ou inferior (Sim, o IE 8.0 já é antigo! Ou melhor... O IE sempre está atrás). Como a Microsoft trabalha mal no Internet Explorer (ou em quase tudo), não fique assustado se as bordas ficarem retas no IE.
Obs.: O máximo que pode acontecer é o navegador não interpretar o código diferente da velha versão. Não vai prejudicar de forma direta o resto da codificação.

Bom, o código para colocar bordas arredondadas:

-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/

Onde está 10px substitua pelo número que você quiser, pois isso define a curvatura da borda, enquanto maior o número, maior será a forma arredondada.
Os três campos são necessários, pois cada um é usado em algum navegador diferente (Comentado acima entre /* e */)

Você pode usar o código acima dentro de uma DIV (id ou class) ou em (quase) qualquer lugar que você quiser dentro do HTML do seu blog (Blogger -> Design -> Editar HTML).

Exemplo:

#exemplo1 {
width: 400px;
height: 100px;
margin: 10px;

-moz-border-radius: 8px; /* Para Firefox */

-webkit-border-radius: 8px; /*Para Safari e Chrome */

border-radius: 8px; /* Para Opera 10.5+*/

background: #f7f7f7;
padding: 20px;
border: 1px solid #000;
color: #000;
}

Exemplo em ação:

Testes

Abraços Pessoal!

Design de Modelo entra em definitivo no Blogger

2010-06-11T12:28:00.001-02:00

Dia 11 de março deste ano foi lançado o Design de Modelo no Draft in Blogger (painel de testes do Blogger), uma forma mais simples e objetiva de criação de templates para seu Blogger. Uma forma bem completa que facilita a vida de quem não conhece HTML.

Após alguns meses de testes, essa semana o Blogger aprovou e lançou definitivamente o novo padrão de templates para a plataforma. Agora essa opção está ativa no painel padrão do Blogger.

Ainda não temos notícias de até quando o “antigo” (e melhor em minha opinião) sistema de templates será mantido, mas acredito que não tem perigo de sermos surpreendidos, pois até hoje ainda é possível usar a forma mais antiga de editar e criar templates (o famoso velho Blogger).

Para mais informações leia:

Novo: Crie seu próprio template no Blogger

Promoção Dicas Blogger – ganhe prêmios com o template Magazine

2010-06-01T15:43:00.001-02:00

O metablog mais conhecido do Brasil está fazendo uma promoção incrível, onde será avaliado nada mais nada menos do que a criatividade! Muito justo, pois abre as portas para todos os blogueiros e usuários do Blogger. Sim, estou falando do Dicas Blogger, o blog da Juliana Sardinha.

A promoção é simples, basta usar seu conhecimento sobre design e ~~gambiarra~~ HTML, customizar o Template Magazine criado pela própria Juliana, enviar um comentário no post da promoção lá no Dicas Blogger e aguardar o resultado dos ganhadores.

Uma comissão composta 6 grandes figuras da blogosfera avaliarão todos os blogs em matéria de beleza, criatividade, harmonia, usabilidade e navegabilidade, a partir daí escolheram 10 finalistas, que serão divulgados e linkados no Dicas Blogger. Dos 10 finalistas, 4 vencedores receberão os seguintes prêmios:

1º lugar: 01 anúncio por 30 dias no Dicas Blogger, do tipo banner 468 x 60 ( veja a localização e o valor, acessando o nosso MidiaKit);
2º lugar: 01 lindo e exclusivo template (ver modelo) - cortesia da Mamanunes;
3º lugar: 01 volume do E-book – Blogar, o processo de criação de blogs – cortesia do Ferramentas Blog;
4º lugar: 01 logotipo - cortesia do Icebreaker Design;
5º lugar: 01 livro - Criando páginas web em CSS – cortesia do Daumpost

O período de inscrição será de 23/05 a 13/06 (até as 23h59min)

Comissão julgadora

Critérios para participar:

Ter o Template Magazine instalado e modificado em um blog ativo;
Enviar o endereço do blog no post da promoção do Dicas Blogger
O blog participante deve estar dentro dos critérios estabelecidos no Dicas Blogger (contra pirataria, plágio, racismo, etc).

Além disso, todos os inscritos na promoção vão participar de um sorteio valendo os seguintes prêmios oferecidos pela loja Flex Informática:

1 Mouse óptico da Clone 5 botões
1 Teclado Multimidia Clone
1 Fone de ouvido Clone para iPod, Mp3/Mp4 Players, computadores etc...
1 Caixa de som Multimidia Maxprint
1 super prêmio: Impressora Hp Deskjet D1660

Para participar da promoção ou para ler mais informações acesse: http://bitw.in/bE

Bitw.in – O mais novo projeto!

2010-05-30T23:22:00.001-02:00

Quem me acompanha no Twitter sabe o quanto eu e o Fernando Jorge trabalhamos essas duas últimas semanas com o nosso novo projeto. Bati meu recorde de horas de trabalho e conto com vocês para conseguirmos inovar sempre!
Tanto esforço valeu à pena, pois com nossa parceria (Design + Programador) conseguimos criar um excelente encurtador de links (sim, é um encurtador de links!), que oferece muitos dados estatísticos com muita precisão, ou seja, um site bem completo.

O que é e pra que serve um encurtador?

Um encurtador serve para diminuir aqueles links enormes (obvio! =P) por links pequenos que ocupam menos espaço e são mais fáceis de memorizar.
Quando alguém usar um link encurtado ele será direcionado para o link verdadeiro (isso em milésimos de segundo).

Exemplo Prático

Link Original: http://codigosblog.com.br
Link Encurtado: http://bitw.in/b

Isso é de estrema utilidade no Twitter, onde 140 caracteres pode ser pouco, caso você ocupe um tweet com um link enorme.

Conheça agora o Bitw.in!

Além de encurtar links, você pode contar com:

Classificação de tweets por + Clicados, + Retuitados e + Recentes
Opção de escolher a extensão do link encurtado. Exemplo: http://bitw.in/bitwin
Estatística completa que conta com: Cliques únicos, pageviews, retuitados, data e hora do tweet;
Gráficos completos incluindo: Localização, navegador utilizado, sistema operacional, pessoas que visitam seu link;
Registro de usuário com login via Twitter para gerenciar todos os seus links;
Busca avançada de tweets por data, relevância ou usuário.
E muito mais!

Estamos em uma fase beta, onde bugs infelizmente são normais, mas acho que não tem nenhum, pois testamos muito, mas vai saber neh!? Por isso qualquer problema, crítica ou sugestão, por favor, entre em contato conosco.

Use e divulgue nosso novo projeto! =]

Novo recurso: Visualize sua postagem antes de publicar

2010-05-18T23:09:00.000-02:00

O Blogger in Draft liberou mais uma funcionalidade. Agora é possível visualizar suas postagens antes de publicá-las, isso diretamente no layout do seu blog!
Essa funcionalidade de teste é bem parecida com o Windows Live Writer, que mostra de forma real e eficiente como vai ficar seu post dentro da página principal.

Para testar e usar essa função, basta fazer login no Blogger in Draft, clicar em “Nova Postagem”, redigir seu texto e depois clicar em “Visualizar” (simples).

Resultado:

Obs.: Claro, isso não vai mudar nada em seu blog antes que você clique em “Publicar Postagem”.

O que você precisa? Ajude-nos a construir!

2010-05-12T17:55:00.000-02:00

É com humildade e interesse que faço essas perguntas: O que seria interessante de novo na internet? Qual site/ferramenta você está precisando? O que falta na Blogosfera/Twittosferas? Simples perguntas que eu, Paulo Estevão, faço aos meus leitores.

Sabe aquele site que falta existir? Então, estamos (sim não é só eu) atrás de grandes idéias para inovar a Blogosfera/Twittosfera e para isso nada melhor que ouvir (ou ler) sugestões de usuários que realmente usam blogs e redes sociais.

Claro não estou pensando em criar um Orkut ou um Facebook, nem muito menos um Google! Estou atrás de ferramentas simples, porém úteis!

Como assim?

Estou montando (ou melhor... tentando montar) uma equipe de trabalho web e para iniciarmos com o pé direito precisamos de opiniões.
Depois explico melhor as novidades, por enquanto isso é tudo que posso dizer. =]

E o que eu ganho com isso?

Muito reconhecimento e quem sabe algum brinde?
Agora se sua idéia for para frente... Pode esperar. hehe

Comentem! Mandem e-mails! Siga-me no Twitter (@pauloestevao e @codigosblog)!
Aguardem mais notícias,
Abraços

Novidade! Receba as atualizações de grandes metablogs em um só lugar!

2010-05-06T14:49:00.002-02:00

É com imensa felicidade que lanço o UpMblog, a minha primeira extensão para Google Chrome!
Para melhorar o seu blog ainda mais, é importante buscar novidades e acompanhar algumas dicas. Para isso desenvolvi uma extensão para Google Chrome onde você pode acompanhar as atualizações de vários metablogs de qualidade em um só lugar e quando quiser.

A lista conta com os blogs:

Não se preocupe em visitar blog por blog todos os dias para ver se há novidades. Com apenas um clique você estará vendo uma lista com as cinco últimas atualizações dos blogs citados acima.

Como instalar?

1 – Instale o Google Chrome (Acredite! É necessário! =] );
2 – Acesse o seguinte link: http://migre.me/Cbho
3 – Click em Install

4 – Pronto!
5 – Quer ajudar? Divulgue! =]

Obs.1: Nessa extensão pretendo adicionar mais alguns blogs. Inclusive blogs com o tema Wodpress! Aguarde!
Obs.2: Todos os blogs citados acima foram informados sobre a extensão, autorizaram e apoiam essa iniciativa.
Mais novidades? Siga o @codigosblog pelo Twitter!

Última Atualização: 08.06.2010

Seja avisado pelo Twitter toda vez que o Pagerank do seu blog é atualizado

2010-05-04T15:23:00.003-02:00

Tempo é dinheiro!

Já pensou a facilidade que seria receber um tweet toda vez que o PageRank do seu blog é atualizado?
Pois é, hoje isso é possível graças uma ferramenta desenvolvida pelo @luisvquintas do blog Portal WP.

Você entra no site (http://www.portalwp.com.br/ferramentas/alerta-de-pagerank), fornece o link do seu blog/site, o seu e-mail e Twitter. Pronto! Toda vez que o PR for atualizado você será avisado automaticamente. Um modo prático de receber essa notícia.

Obs.: Postagem prática, eficiente e útil!

Como estruturar um layout de forma eficiente

2010-04-30T15:58:00.000-02:00

Deixamos muitas vezes de pensar no layout de nosso blog por falta de tempo, curiosidade em aprender ou até mesmo por ignorância sobre a importância do design.
Quem acompanha meu trabalho de design nos momentos vagos, sabe o quanto friso essa idéia, não só pela relevância, mas por que estou aqui para repassar certos aprendizados nessa área.
Montar um blog/site estruturalmente não é colocar em prática o que der na telha. Não é (apenas) mostrar sua criatividade. Uma estrutura bem feita visa muito mais, como: Velocidade, Propaganda, Aparência e Organização.

Um layout simples não é o melhor e nem um layout complexo é o melhor. O melhor vai de acordo com o público do seu blog, o destaque que você quer dar, o tema (assunto) e claro, a criatividade (exclusividade).

Vamos os tópicos:

1 – Estrutura

Antes de iniciar, veja exemplos de layouts de outros blogs. Pense em todos os widgets e gadgets que você quer usar, estude funcionalidades (Botão enviar para Twitter, Postagens Relacionadas,...), pense em cores harmônicas e ao mesmo tempo atrativas, escolha os lugares onde serão inseridas colunas para widgets/gadgets.
Um estudo da forma do seu layout vai poupar muito tempo na hora de colocar em prática a codificação, principalmente para quem não tem muita experiência no ramo.
Use anúncios com moderação, evitando uma poluição visual. Ninguém merece um blog que visa apenas fins lucrativos.

2 – Codificação

Insira o mínimo possível de código, o mínimo possível de imagens e o mínimo possível de widgets/gadgets. Tudo isso vai interferir no carregamento do blog.
Tente usar cores em HTML evitando ao máximo, imagens em alta resolução, pois o que mais sobrecarrega uma página são as imagens (animadas e não animadas).
Obs.: Apensar de ~~nem sempre~~ não ser uma imagem, Flash se encaixa bem nesse contexto.
Outro fator importante é colocar o carregamento dos textos sempre como prioridade antes da sidebar (coluna lateral). Para fazer isso basta inserir os códigos das postagens antes dos códigos das colunas, pois o navegador sempre vai ler e processar o código HTML de cima para baixo.

3 – Postagens

Use algum sistema de resumo de postagens, pois o desempenho do blog melhora,faz com que o visitante visualize de uma forma geral o blog e faz com que os internautas visitem outras postagens.
Use imagens (com moderação), visto que imagens decoram suas postagens e quebra o gelo de extrema seriedade (blogs geralmente são mais descontraídos).
Defina uma estrutura no fim das postagens com o nome do autor e se possível uma pequena descrição (ou link para essa pequena descrição), é interessante mostrar para o leitor quem está escrevendo.

4 – Melhoras!

Nunca vai ficar perfeito! #prontofalei
Erros e melhoras vão aparecer! Estude e aproveite melhor o que o Blogger pode oferecer.

Usar vários domínios em um único blog/site pode ser uma má idéia

2010-04-17T21:42:00.002-02:00

Há algum tempo atrás fiz essa mesma pergunta ao Manoel Lemos, dono do BlogBlogs, Brasigo, Zapt.in, CTO da Abril Digital. Por que ter vários domínios do BlogBlogs e usar apenas um deles? Obtive uma resposta e resolvi pesquisar melhor sobre o assunto.

Quando criamos um blog ou um site devemos pensar em transformá-lo em uma marca registrada, uma marca única, claro que dentro dos limites que separam um blog de uma empresa. Por isso ao registrarmos um domínio, devemos pensar no futuro – Será que ninguém vai copiar minha idéia? O meu nome? – e com isso prevenirmos de certos aproveitadores ou simplesmente pessoas sem criatividade.

Aos usuários do Blogger, recomendo sempre que comprem um domínio próprio, pois um domínio com extensão “.BLOGSPOT.COM” é extremamente grande, saturado e anti-profissional. Algo não muito bem visto, pois de cara deparamos com um sub-domínio.
Leia mais sobre o assunto:

Registrar um domínio próprio é um grande passo para um blog se tornar profissional, e por segurança devemos sim registrar o máximo de domínios com o mesmo nome. Não é obrigatório e não é simples assim registrar vários domínios, todavia há três domínios básicos que devemos nos preocupar em registrar: .COM; .NET; .COM.BR
Os domínios .COM e .NET são os mais utilizados internacionalmente e o .COM.BR é o principal domínio brasileiro. Isso já é o suficiente para colocar ambos em evidência.

Afinal, é bom ou não ter vários domínios apontados para o mesmo blog?

Não é aconselhável redirecionar mais de um domínio para um mesmo site. Registrar domínios não te obriga a usá-los.
Se o objetivo principal do seu blog é alcançar muitas visitas e STATUS (números), não disperse seus leitores, vejamos o seguinte exemplo:

O Códigos Blog têm dois domínios: www.codigosblog.com.br e www.codigosblog.net

O segundo (.NET) não é redirecionado para o Códigos Blog pois isso poderia trazer uma certa confusão na hora de divulgar e na hora das pessoas o linkarem. Ou seja, uma pessoa poderia linkar o Códigos Blog com um domínio (.COM.BR) e outra pessoa com outro domínio (.NET).
Qualquer um dos dois endereços teria o mesmo destino: A página do Códigos Blog. Mas na hora de contabilizar links, vários agregadores podem interpretar como dois sites diferentes, refletindo até mesmo em seu PageRank.
Podemos também imaginar o seguinte fato: Uma pessoa pode conhecer seu blog de uma forma e outra pessoa de outra forma, e em certo momento poderiam falar de um único blog achando que são blogs diferentes.
Agora imagina isso acontecendo com 3, 4 ou até 5 domínios para apenas 1 site. Claro que estamos falando de pequenos e médios sites, nada se compara com grandes empresas como o Google que usa inúmeros domínios.

Essa pequena questão pode trazer diferentes problemas, onde muitas vezes nem reparamos. Não por incompetência e sim por ignorância sobre o assunto.
Lembre-se: Registrar vários domínios para proteger sua marca é aconselhável, mas isso não significa que você deve usá-los.

Descrição do autor no fim das postagens

2010-04-16T14:52:00.001-02:00

Fiz um “campo” especial para colocar no fim das postagens, onde aparecerá uma foto e um pequeno texto descritivo do autor que escreveu cada texto do blog. Estilo esse que está no Códigos Blog.

Esse código foi desenvolvido para ser usado em blogs com mais de um autor, de forma que a descrição do autor vai ser mostrada de acordo com quem escreveu a postagem, tudo isso de forma automática sem necessidade de modificar nada dentro das postagens.

1° - Faça login no Blogger, entre em “Layout” -> “Editar HTML”. Marque a caixa “Expandir modelos de widgets”.

2° - Procure (Ctrl + f) por:

]]></b:skin>

3° - Cole o seguinte código ANTES do código encontrado:

#post-footer-autor {
width: 100%;
height: 67px; /*Altura do campo autor do post */
background: #071a3a; /* Cor de fundo */
margin: 8px 0px 8px 0px; /* Distancia das margens do campo do autor */
font-family: Geneva, Arial, Helvetica, sans-serif; /* Estilo de Fonte */
}
#autor-img { /* Estilo Avatar */
width: 54px; /* Largura do espaço para avatar */
height: 54px; /* Altura do espaço para avatar */
background: #fff; /* Cor de fundo do avatar */
float: left;
margin: 7px; /* Distancia das margens do avatar */
}
#autor-sobre {
padding-right: 5px;
margin: 0px;
}
#autor-sobre p{ /* Estilo texto da descricao */
font-size: 12px; /* Tamanho da fonte */
padding: 10px; /* Distancias do texto em volta do campo */
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;
}
#autor-sobre a{ /* Estilo texto linkado */
color: #9A9A9A; /* Cor link utilizado dentro do campo */
text-decoration:none; /* Sem algum efeito de destaque no link */
}
#autor-sobre a:hover { /* Estilo texto linkado ao passar mouse */
color: #9A9A9A; /* Cor link ao passar mouse */
text-decoration:underline; /* Sublinhado no texto ao passar mouse */
}

O código CSS acima são as características da caixa do autor. Está toda comentada entre */ ... /*
Para fazer alguma modificação basta saber o básico do básico de CSS, como mudar cores e tamanhos.
Basta mudar atentamente os estilos e personalizar ainda mais o “widget”.

4° - Procure (Ctrl + f) por:

<div class='post-footer'> ou <div id='post-footer'>

5° - Cole o seguinte código ANTES do código encontrado:

<b:if cond='data:post.author == "NOME DO ESCRITOR"'>
<div id='post-footer-autor'>
<div id='autor-img'>
<img src='LINK_DA_IMAGEM' style="border: 2px solid #ccc; padding: 0; margin: 0;"/>
</div>
<div id='autor-sobre'>
<p>

DESCRIÇÃO AUTOR AQUI
</p>
</div>
</div>
</b:if>

O código acima faz referencia a 1 escritor! Para colocar vários escritores, basta copiar e colocar o código várias vezes e fazer as seguintes alterações:

NOME DO ESCRITOR -> Coloque exatamente o nome do escritor, igual o nome de usuário usado na conta para postar. O nome deve estar igualzinho ou o código não vai funcionar adequadamente. Exemplo: Na minha conta utilizo o nome: Paulo Estevão. Então devo colocar: Paulo Estevão. Se fosse Admin, deveria colocar Admin, se fosse AdmIniStradoRR deveria colocar AdmIniStradoRR.
LINK_DA_IMAGEM -> Coloque o link da imagem do avatar. Lembrando que o link deve ter um caminho direto para a imagem com um tamanho de 50px por 50px. Obs.: Não se esqueça do http://
DESCRIÇÃO DO AUTOR AQUI -> Coloque o texto de descrição do autor nesse local. Faça testes de forma que não passe do limite dos campos do widget. Obs.: Use links e o que quiser dentro da descrição.

6° - Relembrando: Se seu blog tiver mais de um escritor, basta colar o código acima quantas vezes for necessário e editá-los de forma que cada escritor tenha o seu código.

7° - Teste salve e teste novamente.

Para editar melhor o campo do autor, leia os seguintes textos:

Participe do FLISOL – o maior evento de divulgação de Software Livre da América Latina

2010-04-14T17:12:00.002-02:00

Você é um daquelas nerds apaixonados por tecnologia e luta para promover o uso de softwares livre?
Então esse é um convite feito para você!

“O FLISOL (Festival Latino-americano de Instalação de Software Livre) é o maior evento de divulgação de Software Livre da América Latina. Ele acontece desde 2005 e seu principal objetivo é promover o uso de software livre, apresentando sua filosofia, seu alcance, avanços e desenvolvimento ao público em geral”.
Texto: FLISOL-GO Gyn

Um evento aberto, com muitas palestras, apresentações e oficinas grátis!

Estou aqui especialmente para divulgar o FLISOL que acontecerá em Goiânia-GO, onde eu estarei presente e gostaria de ver algum leitor do Códigos Blog por lá!
Mas se você é de outra cidade, não se preocupe, pois o FLISOL ocorrerá EM VÁRIAS CIDADES do Brasil no dia 24 de abril.

Aqui em Goiânia estamos na 6ª edição do evento, que será realizado na Faculdade Alfa. Estou realmente contando com sua presença, será um prazer conhecer alguns leitores pessoalmente.

Seja Livre!

Obs.: Se você é de outra cidade ou outro estado ou país e se interessa em estar presente conosco... Não se preocupe! As portas estão abertas para o mundo todo! Seja Bem-Vindo ao FRISOL-GO Goiânia!

Para mais informações acesse:

FLISON - Goiânia: www.flisolgo.org.br/gyn
FLISON - Brasil: www.installfest.info/FLISOL2010/Brasil

Código Aberto!!!

Link no nome de acordo com o autor da postagem

2010-04-11T11:33:00.000-02:00

Atendendo alguns pedidos, estou eu aqui para ensinar como colocar um link (twitter, perfil, Orkut, etc) no nome do autor da postagem. Isso seria simples para quem tem apenas um autor no blog, mas para blogs com mais de um autor é preciso usar um código próprio do Blogger. Então vamos ao trabalho:

1° - Faça login no Blogger, entre em “Layout” -> “Editar HTML”. Marque a caixa: “Expandir modelos de widgets”.

2° - Procure (Ctrl + f) por:

<data:post.author/>

3° - Substitua pelo seguinte código:

<b:if cond='data:post.author == "NOME DO ESCRITOR"'>
<a href='LINK DO SITE A SER VISITADO' name='NOME DO SITE A SER VISITADO' title='NOME DO SITE A SER VISITADO'><data:post.author/></a>
</b:if>

Faça as seguintes mudanças:

NOME DO ESCRITOR: Coloque o nome do autor que escreve em seu blog, de forma que fique IGUAL ,perfeitamente IGUAL ao nome do autor que escreve em seu blog, ou seja, se o nome do autor do Blogger estiver escrito “P@Uluú” TEM que colocar “P@Uluú”, se não o código não funciona.
LINK DO SITE A SER VISITADO: Coloque o link que você quer colocar no nome (Twitter ou Orkut ou Qualquer outra coisa).
NOME DO SITE A SER VISITADO: Coloque o nome do link que você colocou.

Se seu blog estiver mais de um autor, basta repetir o código acima duas vezes no mesmo local e substituir de acordo com que eu disse acima.

Exemplo:
<b:if cond='data:post.author == "Paulo Estevão"'>
<a href='http://www.twitter.com/pauloestevao' name='Visite meu Twitter' title='Visite meu Twitter'><data:post.author/></a>
</b:if>

Você pode adicionar quantos autores quiser, de forma que coloque sempre o nome correto dos autores.

4° - Teste e salve.

Abraços pessoas!

Problemas nos arquivos hospedados no Códigos Blog

2010-04-02T22:18:00.003-02:00

04/2010 - Atualizado! Tudo resolvido!

Os arquivos hospedados no servidor do Códigos Blog estão offline. Espero que tenham paciência, pois os widgets, imagens e arquivos para download ficaram fora do ar por mais algumas horas.

Você que usa de uma maneira ou outro os nossos arquivos, não precisa retirar nada, basta esperar, pois no máximo amanhã de tarde tudo estará no lugar.

Vou resolver esse problema e depois mando mais notícias.

Widget contador Feed + Twitter + Comentários + Postagens

2010-03-25T22:06:00.004-02:00

Aos trancos e barrancos com ajuda do Blogueiros na Web, todos (ou a maioria) sabem que consegui desenvolver um contador de assinantes Feed e um contador de seguidores do Twitter. Então com isso, criei um widget bem bacana, estilo esse que uso no Códigos Blog, ou melhor, criei 4 widgets com o mesmo princípio, porém com aparências diferentes.

Como da outra vez, vou deixar a codificação em aberto para todos terem a liberdade de modificar como quiser. A única restrição é a seguinte: Não retire os créditos! Tenho controle de quem está usando o widget e seria muito constrangedor descobrir algum PLAGIADOR.

É bom lembrar que para contar os comentários e postagens estou utilizando o script que o Usuário Compulsivo disponibilizou. Então essa parte é de total autoria dele. Vale à pena conhecer as suas dicas.

Vamos ao trabalho:

1º- Faça login no Blogger, entre em “Layout” -> “Elementos da página”, clique em “Adicionar um Gadget” -> “HTML/Java Script”

2º - Ao abrir uma janela cole o seguinte código abaixo de acordo com a sua escolha:

<div style="width: 330px; background: #fff; padding: 0; margin: 0; border: 0;">
    <div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;">
        <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/feed-icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://feeds.feedburner.com/NOME_DO_FEED" target="_blank"><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=NOME_DO_FEED'></script> Assinantes</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
    </div>
<div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; background: #fff;">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/twitter_icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.twitter.com/SEU_USUÁRIO_TWITTER"   target="_blank"><script type='text/javascript'   src="http://www.codigosblog.net/servidor/contadorTwitter/seguidores.php?usuario=SEU_USUÁRIO_TWITTER"></script> Seguidores</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
    </div>
<div name="postagens" style="margin-top: 5px; float: left; width: 160px; height: 50px; background: #fff;">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/post-icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; 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: -1px 0 0 0; font-size: 12px; 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; background: #fff;">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/comment-icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; 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/comments/default?alt=json-in-script&callback=showpostcount"></script> Comentários</div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">comente também</p>
    </div>
    <span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript'   type='text/javascript'   src='http://codigosblog.net/servidor/widget_twitter_feed_post_comment/widget+codigosblog.js'></script></small></span>
</div>

<div style="width: 160px; background: #fff; padding: 0; margin: 0; border: 0;">
    <div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;">
        <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/feed-icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://feeds.feedburner.com/NOME_DO_FEED" target="_blank"><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=NOME_DO_FEED'></script> Assinantes</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
    </div>
        <div name="twitter" style="float: left; margin: 5px 0 0 0; width: 160px; height: 50px; background: #fff;">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/twitter_icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.twitter.com/SEU_USUÁRIO_TWITTER"   target="_blank"><script type='text/javascript'   src="http://www.codigosblog.net/servidor/contadorTwitter/seguidores.php?usuario=SEU_USUÁRIO_TWITTER"></script> Seguidores</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
    </div>
        <span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript'   type='text/javascript'   src='http://codigosblog.net/servidor/widget_twitter_feed_post_comment/widget+codigosblog.js'></script></small></span>
</div>

<div style="width: 330px; background: #fff; padding: 0; margin: 0; border: 0;">
    <div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;">
        <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/feed-icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://feeds.feedburner.com/NOME_DO_FEED" target="_blank"><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=NOME_DO_FEED'></script> Assinantes</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
    </div>
        <div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; background: #fff;">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/twitter_icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.twitter.com/SEU_USUÁRIO_TWITTER"   target="_blank"><script type='text/javascript'   src="http://www.codigosblog.net/servidor/contadorTwitter/seguidores.php?usuario=SEU_USUÁRIO_TWITTER"></script> Seguidores</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
    </div>
        <span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript'   type='text/javascript'   src='http://codigosblog.net/servidor/widget_twitter_feed_post_comment/widget+codigosblog.js'></script></small></span>
</div>

<div style="margin: 0; padding: 0;">
<ul style="margin: 0; padding: 0; list-style: none;">
<li style="background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/mini_twitter.gif) no-repeat; padding: 0 0 0 22px; margin: 0;"><script type='text/javascript' src="http://www.codigosblog.net/servidor/contadorTwitter/seguidores.php?usuario=SEU_USUÁRIO_TWITTER"></script> Seguidores</li>
<li style="background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/mini_feed.gif) no-repeat; padding: 0 0 0 22px; margin: 2px 0 0 0;"><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=NOME_DO_FEED'></script> Assinantes</li>
<li style="background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/mini_post.png) no-repeat; padding: 0 0 0 22px; margin: 2px 0 0 0;"><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</li>
<li style="background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/mini_comment.gif) no-repeat; padding: 0 0 0 22px; margin: 2px 0 0 0;"><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</li>
</ul>
<span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript' type='text/javascript' src='http://codigosblog.net/servidor/widget_twitter_feed_post_comment/widget+codigosblog.js'></script></small></span>
</div>

Faça as seguintes modificações (independente do estilo que você escolheu):

• NOME_DO_FEED -> Substitua pelo nome do feed do seu blog.
Exemplo: http://feeds.feedburner.com/codigosblog (no caso o NOME_DO_FEED é: codigosblog)

• SEU_USUÁRIO_TWITTER -> Substitua pelo nome de usuário do seu Twitter.
Exemplo: http://twitter.com/pauloestevao (no caso o SEU_USUÁRIO_TWITTER é: pauloestevao)

Obs.: Coloque o nome de usuário do Twitter todo em letras minúsculas, ou seu widget não vai funcionar perfeitamente.

3º - Depois que modificar é só salvar. Não tem problema algum em modificar o widget, basta não retirar os créditos.

4º - Para o contador de assinantes feed funcionar, você deve liberar a funcionalidade diretamente no FeedBurner.
Entre no site www.feedburner.com , faça seu login, acesse a conta desejada.
Acesse a aba: “Publicize” (Publicar) e clique em “FeedCount” (FeedCount) localizado no menu lateral. Após isso clique em “Activate” (Ativar).

Pronto! O contador está ativado.

Atenção: Problemas com o número de comentários? -> Comentários sumiram do Blogger!

Leia também:

Engenharia Social, cuidado!

2010-03-21T21:54:00.000-02:00

Existem muitas pessoas boas no mundo, todavia tome cuidado! Engenharia Social são práticas utilizadas por pessoas mal intencionadas que abusam da confiança dada por você. Através de emails, telefonemas ou um simples bate-papo estilo P2P, esses indivíduos são capazes de recolher dados sigilosos em uma piscar de olhos, basta uma brecha e já era.

"Em Segurança da informação, chama-se Engenharia Social as práticas utilizadas para obter acesso a informações importantes ou sigilosas em organizações ou sistemas por meio da enganação ou exploração da confiança das pessoas".

Texto: Wikipédia

Esse alerta vai muito além da blogosfera. Em nosso dia-a-dia é possível observar isso, poucas pessoas têm a malicia de preocupar-se com a segurança de seus dados, divulgando uma simples senha do seu notebook pode ser o suficiente para um ataque em seus dados.
É muito comum recebermos uma ligação de uma suposta operadora querendo fazer testes de linha e quando menos se imagina entregamos tudo que eles querem.
Esse tipo de ataque é muito comum em empresas, atacando principalmente funcionários “inocentes” que não sabem o grau do problema.

Aplicando essa lição em nosso dia-a-dia de blogueiro podemos fazer a seguinte ligação: Não forneça sua senha para terceiros, independente se a pessoa supostamente vai te ajudar em algum problema interno. Procure ajuda, mas não repasse sua senha para qualquer um.

Digo tudo isso porque já passei por isso, para quem não sabe (a maioria), o meu primeiro blog foi vitima desse tipo de ataque. Um blogueiro atuante e relativamente conhecido, mas que na verdade não passa de um garoto mimado e metido a valentão. Mas não vou entrar em detalhes nem citar o nome da criatura, pois pessoas como essas não merecem nem citações pejorativas.

Lembre-se: Podemos fazer grandes amigos virtualmente, no entanto não é como fazer uma amizade cara a cara. É muito mais fácil enganar e ser enganado via internet.
Fica a dica.

Leia também:

Seu blog corre o risco de ser hackeado? (via Dicas Blogger)

Feliz dia do Blogueiro

2010-03-20T01:47:00.015-02:00

Leia: cinco estagios da vida de um blogueiro

Antes, tarde do que nunca…

Segundo várias fontes (nenhuma segura o suficiente), hoje (20/03) é o dia do Blogueiro! Mesmo não confirmado essa data, nada mais justo do que parabenizarmos todos os blogueiros, amigos, conhecidos ou apenas visitantes.
E que um dia nossa blogosfera seja limpa e transparente o suficiente para fazermos grandes amigos para a vida toda.

Desejo muitos anos de vida para o seu blog (sim, você que está lendo essa postagem).
abraços

Imagem: Num Clique