Teste seu layout em diferentes navegadores

Olá, pessoal! Como o Paulo adiantou, eu vou começar a escrever aqui no Códigos Blog. Esta é minha primeira dica, espero que gostem:

Navegador (web browser ou simplesmente browser) é um programa usado para visualizar páginas da internet. Os três mais populares são: Internet Explorer (80,56%), Firefox (13,5%) e Safari (4,03%).

Uma dica para quem gosta de personalizar o layout do blog, mas não entende muito de códigos HTML ou XML. Mesmo usando o botão "visualizar" do Blogspot, seu blog pode aparecer desalinhado num navegador diferente do que você usa ou até mesmo não aparecer.

Para descobrir se o seu template está aparecendo corretamente e funcionando nos mais diversos navegadores e versões, basta ir em Browsershots, inserir o endereço de seu blog ou site, selecionar em quais navegadores e sistemas operacionais deseja testar seu design e clicar em submeter.

Aguarde alguns minutos e atualize a página. As screenshots começarão a aparecer e você poderá verificar em quais navegadores seu blog não carrega corretamente.

Uma dica: não teste muitos navegadores de uma vez só; o servidor ficará sobrecarregado e o template poderá aparecer desalinhado mesmo que esteja carregando normalmente.

Mostrar postagens recentes do Google+ no Blogger

O Google Plus vem ganhando destaque entre as redes sociais e entre os blogueiros também. Várias pessoas já estão usando a rede social do Google para falar o que pensa e para compartilhar conteúdo.

Neste post irei ensinar como exibir as últimas postagens realizadas no Google Plus diretamente no seu blog do Blogger de forma automatizada com a ajuda do feed. Lembrando que este widget também tem a opção de adicionar no Google Plus.

1) Entre no site http://widgetsplus.com e escolha a opção "Update feed" clicando em "Live Preview" e logo após no botão "Get Widget".

2) Irá aparecer um painel de configuração como este da imagem abaixo:

Para configurar e publicar este widget relacionado ao seu perfil será necessário fornecer o seu ID do Google Plus. Para fazer isso, entre na sua sua conta no Google+ clique em Perfil e copie o ID que aparece na URL e cole no campo "Google+ ID". Veja o exemplo na imagem abaixo:

3) Personalização:

• Text font » Tipo de fonte.
• Widget width » Largura do widget.
• Include update feed » Deixe marcada. Serve para mostrar suas atualizações.
• Language » Idioma (tem português)
• Widget height » Altura do widget.
• Nas outras opções você escolhe a cor de fundo, do nome, do botão, dos links etc.

4) Após a personalização clique em "Get Code" e automaticamente vai ser gerado o código para ser adicionado em seu blog.

5) Já no seu blog, entre em “Layout” e clique em “Adicionar um Gadget”;

6) Para adicionar o widget vá na opção "HTML/Java Script " e cole o código gerado no site.

7) Pronto! Ferramenta instalada!

Aprenda a lidar com as críticas no seu blog

Blogar é uma arte. Não é qualquer um que consegue gerenciar uma página na internet que necessita de bom conteúdo frequente, parceirias, comunicação diária com leitores e divulgação de conteúdo.

Todas as necessidades citadas estão sujeitas a uma coisa que ninguém gosta: críticas!

A partir do momento que você decide blogar e por fim, agradar as pessoas, estar-se-á não mais apto a julgar a sua opinião como única.
Além de blogueiro eu também sou Social Media Manager de grandes empresas brasileiras e já passei por vários desafios dessa espécie, por isso, vou dar algumas dicas importantes sobre como reagir bem perante críticas e julgamentos:

Dicas

• Cuidado com a resposta
  
  • A maioria das críticas são recebidas via comentários e é importantíssimo respondê-las de forma respeitosa e elegante. Recomendo esperar cerca de 1 hora para replicar alguma crítica, pois tu estará mais tranquilo e já terá pensado melhor numa boa resposta. Lembre-se que outras pessoas também irão ler a sua resposta e isso pode influenciar em vários aspectos, positivos ou negativos.
•  Sempre agradeça
  
  • Mesmo quando a crítica é com um tom rude e desrespeitoso deve-se responder e por fim, agradecer. Isso demonstra que a sua réplica foi soberana e que mesmo com a falta de educação de outrem você manteve seu ponto de vista não-pessoal.
   
• Identifique o foco da crítica
  
  • O crítico não critica com um argumento focal, ele sempre dirá algo mais. Então seja você coerente e sábio o bastante para identificar qual o foco do comentário, sendo direto e objetivo em sua reposta.
    
•   Tenha personalidade
  
  • Não importa como a crítica seja exposta, apenas mostre que você tem domínio do que está dizendo e defenda seu ponto de vista com respeito e ética. Lembre-se que o importante não é o que dirão sobre você ou seu blog, mas como você reagirá diante do ocorrido.

Espero que essas dicas possam ajudá-los. Abraços!

PageRank atualizando

 

 Mais uma vez, o Google está atualizando o PR de cada site e blog... =D

O Códigos Blog depois que mudou para .com.br foi para 0, porque é necessário que o blog seja indexado de novo, agora foi atualizado e foi para 4.

Fique de olho no seu blog.

Para ver seu PageRank entre aqui!

Widgets Postagens Populares no seu blog

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 de testes do Blogger, o Blogger in Draft, dentro da aba "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. =]

Obs.: Não se esqueça: Atualmente esse widget só está disponível no Blogger in Draft.

abraços

Novidade! Blogger disponibiliza novos recursos de indexação

A importância do SEO para um blog é muito grande, pois é a partir dele que seu blog, suas imagens e conteúdo são indexado corretamente nos sites de busca, como o Google e aparece com mais precisão nas pesquisas.

O Blogger apresentou ontem novos recursos que ajudaram os blogueiros neste processo, pois assim, poderão organizar melhor a gosto como o seu blog aparecerá nas buscas. Certamente é uma das melhores mudanças do Blogger até hoje.

Novas funcionalidades

 
Suas preferências de pesquisa já podem ser vistas em "Configurações" e "Preferências de pesquisa" como na imagem abaixo. 

Clicando nessa opção você verá 3 novas sub-seções: Metatags, erros e redirecionamentos e rastreadores e indexação tendo suas respectivas configurações, como descrição na hora de aparecer nas pesquisas, personalização da janela "página não encontrada" etc.

Novidades na área de postagem

Enquanto a maioria dos novos recursos estão localizados na guia Configurações, alguns outros podem ser encontrados no editor de postagem. Por exemplo, agora pode-se colocar de forma prática a tag "ALT" e "TITLE" para imagens em seu post. Simplesmente incrível.

Outra novidade bastante funcional é a opção de utilização da tag rel=nofollow que serve para informar os motores de busca que este link não precisa ser indexado. É uma das melhores formas de não ter seu blog penalizado pelos sites de busca.

Aviso:

Embora as modificações sejam fáceis de serem realizadas, as tags robots.txt e de cabeçalho de robôs personalizadas são recomendadas para webmasters e/ou para alguém que tenha conhecimento avançado em SEO. O uso incorreto desses recursos pode fazer seu blog ser ignorado pelos mecanismos de pesquisa.

Fique ligado aqui no Códigos Blog, pois estas novidades trarão um retorno muito positivo aos usuários do Blogger e certamente terá novas postagens para ajudar e informar vocês!

Widget contador Feed + Twitter + Comentários + Postagens

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://codigosblog.net/servidor/contadorFeed/contadorfeed.js?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://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?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://codigosblog.net/servidor/contadorFeed/contadorfeed.js?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://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?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://codigosblog.net/servidor/contadorFeed/contadorfeed.js?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://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?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://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?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://codigosblog.net/servidor/contadorFeed/contadorfeed.js?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.