Como usar e otimizar o Google Adsense

O Google Adsense é um dos sistemas mais completos para monetização de sites, porém é complexo e cheio de detalhes. Conhecê-lo a fundo pode ajudar e muito a aumentar os rendimentos do seu blog. E quem vai ensiná-los a usar e a otimizar o AdSense será a própria equipe que cuida do programa. Como? Em vídeo-aulas, disponíveis no YouTube.

Inscreva-se corretamente no AdSense - Site e Conteúdo

Como tirar o máximo do Google AdSense

Você vai encontrar esses vídeos e outras aulas super interessantes, acessando o canal do Google AdSense no YouTube -  http://www.youtube.com/user/InsideAdSensePT

Designer de Modelo – correções e novos temas

O Designer de Modelo ou template designer, passou por correções de falhas e está com algumas novidades - Small Template Designer Tweaks: Two More Variants and Bug Fixes

Pra quem não sabe, o Designer de Modelo permite que qualquer usuário crie o template do seu blog facilmente, sem precisar de conhecimentos avançados de HTML e CSS. Saiba mais, acessando este nosso post:  Como criar um template para Blogger / Blogspot

Dois novos temas para o Template Simple

O modelo Simple ganhou mais dois temas.

Planos de fundo com links para o background original
Ao escolhermos um dos diversos planos de fundo, vemos um link que aponta para o original. Assim, podemos conhecer e até adquirir outros trabalhos daquele mesmo artista.

Melhorias na compatibilidade com o Internet Explorer

Correções para melhorar a compatibilidade com o Internet Explorer, pois alguns modelos não estavam mesmo funcionando bem com o navegador da Microsoft.

Correções de alguma falhas (bugs) nos modelos

Correções nos modelos, mostrando inclusive a cor de fundo correta no seletor de imagem, fontes melhor no IE e melhorias no comportamento das guia. Mostrar que foi excluído comentários em itálico e reposicionamento de guia para se adequar melhor ao usar uma imagem de cabeçalho personalizado.

Vejam também o post do Cidão (@crazyseawolf), o maior fã do Blogger no mundo!

•  Alguns ajustes no Blog Template Designer

O Designer de Modelo  está em fase de testes e disponível somente no Blogger In Draft.

Formulário de contato dentro do post

Pra colocar um formulário de contato bonitinho em seu blog, use o Wufoo que é excelente, gratuito e super fácil de usar - Wufoo - um formulário de contato para o Blogger.

Para colocar o formulário de contato dentro do post (como é aqui no Dicas Blogger), siga todos os passos do post anterior, clique em Embed Form Code e copie o segundo código:

Crie uma NOVA POSTAGEM no Blogger e cole o código do Wuffo dentro de editar html

Você pode fazer deste formulário, uma página estática, sem data e nem comentários:

• Dicas Blogger: Páginas estáticas no Blogger/Blogspot
• Dicas Blogger: Páginas estáticas com CSS

Depois é só visualizar, publicar e colocar o link do post com o formulário em seu blog.

Widget – feeds, seguidores, posts e comentários

O Paulo Estevão, do Códigos Blog, disponibilizou recentemete um widget muito bacana, que divulgamos aqui no Dicas Blogger em fevereiro deste ano - Widget - assinantes de feeds e followers do Twitter. Trata-se de um contador, em modo texto, que mostra o número de assinantes de feeds e de seguidores no Twitter. Ele foi fazendo algumas modificações no widget original e incluiu o contador de postagens e de comentários, o que deu origem a 4 novos modelos - Widget contador Feed + Twitter + Comentários + Postagens. São lindos ;)

Pra colocar um dos widgets aqui no DB, fiz algumas alterações: mudei os ícones, inseri os botões originais do FeedBurner e do Twitter Counter e deixei o plano de fundo transparente. No original, o background é branco e o daqui é cinza.

Nisto, surgiram leitores interessados em usar o widget modificado por mim. Conversei com o Paulo pelo Twitter e ele concordou prontamente em disponibilizarmos o código. Aí está.

Widget assinantes feed, followers, posts e comentários

O widget é muito fácil de usar. Copie o código abaixo e cole no gadget html/javascript do Blogger. Substitua as partes em vermelho, respectivamente, pelos códigos do FeedBurner e do Twitter Counter. Se você não sabe como obter estes códigos, explicarei mais à frente.

<div style="width: 345px; padding: 0; margin: 0; border: 0;">
<div name="feed" style="float: left; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgL-Oqkm7pe57E1Qh0nXHy2yifl_Dck6jbJGOhtgfhc-GmequnvRERdPmAkvTqyRVVEUi4SGzgBTvVtkS-W-0dRirOPIxow8xf353HsJOG4fDxIMHehyBB3UZ6tfcBrzqcESw4L9c3-hkG/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO FEEDBURNER</div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
</div>
<div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-eIs2evW-wzMEgqhHb6fBPUGo_DyKRGEOJYj6J2MVqFuV1IBH5YuIRCzu5nrpqSA-ttKRSxNLAc2rcfWOv8QkdHXKVYIsnFqeD6Zv42RiGfdtmiukvtCq0OuF0oOhSw6ZHbIkTD4bxyi/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO TWITTER COUNTER</div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
</div>
<div name="postagens" style="margin-top: 5px; float: left; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipSeNPnivN0pd0t_cezmj0KcSVkqmz2A1VVAxJXOlQ198mnivCHptzjSIQ7AupRkuo9IxL7hd0YBV1VhEKgq-eapUlcVuVFsku0rUv8MDq5YT3BY-IuBd0MNX6X8lcpmbgZuomMOUrvJD5/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> Postagens </div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">acompanhe</p>
</div>
<div name="comentarios" style="margin-top: 5px; margin-left: 10px; float: left; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMRtVJdjAORzCbqzSU6U4GMlFLlYXiKojqA0zhPk_USlGQwu6Wj-zE53NPZadXEsUYOBVtqPQ7I3XZhvMXlEK2jACHfjqT6vLXhLboXW2usNE3gUGQG_jHpMJOszE1hIRkyKSbrMXrtTTI/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }

<script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script>

Comentários</div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">comente também</p>
</div>

<div style="text-align: center;"><small> Widget <a href="http://www.codigosblog.com.br/2010/03/widget-contador-feed-twitter_25.html">Códigos Blog</a> modificado por <a href="http://www.dicasblogger.com.br/2010/04/widget-contador-feeds-e-twitter.html">Dicas Blogger</a></small></div>

Para obter o código do contador do FeedBurner, entre no site e acesse a aba publicize (1). Na coluna da esquerda, clique em FeedCount (2). Configure as cores (sugestão: DE682B para o plano de fundo do botão e 444444 para o texto) e copie o código (3). Cole na parte em vermelho ( CÓDIGO DO FEEDBURNER ) do código do contador.

Para obter o código do TwitterCounter, acesse o site, escreva seu username do Twitter no campo indicado (1), faça login pelo método OAuth (é seguro) e depois clique na aba buttons (2). Configue as cores do botão (sugestão: 47C8F5 para o plano de fundo e 000000 para o texto) e copie o código fornecido. Cole o código na parte em vermelho ( CÓDIGO DO TWITTER COUNTER ) do código do widget.

Widget assinantes de feeds e seguidores do Twitter

Se você quiser mostrar apenas os assinantes de feeds e os seguidores no Twitter, copie este código, faça as alterações necessárias e cole no gadget html/javascript do Blogger:

<div style="width: 345px; padding: 0; margin: 0; border: 0;">
<div name="feed" style="float: left; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgL-Oqkm7pe57E1Qh0nXHy2yifl_Dck6jbJGOhtgfhc-GmequnvRERdPmAkvTqyRVVEUi4SGzgBTvVtkS-W-0dRirOPIxow8xf353HsJOG4fDxIMHehyBB3UZ6tfcBrzqcESw4L9c3-hkG/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO FEEDBURNER</div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
</div>
<div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; ">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-eIs2evW-wzMEgqhHb6fBPUGo_DyKRGEOJYj6J2MVqFuV1IBH5YuIRCzu5nrpqSA-ttKRSxNLAc2rcfWOv8QkdHXKVYIsnFqeD6Zv42RiGfdtmiukvtCq0OuF0oOhSw6ZHbIkTD4bxyi/) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO TWITTER COUNTER</div>
<p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
</div>
<div style="text-align: center;"><small> Widget <a href="http://www.codigosblog.com.br/2010/03/widget-contador-feed-twitter_25.html">Códigos Blog</a> modificado por <a href="http://www.dicasblogger.com.br/2010/04/widget-contador-feeds-e-twitter.html">Dicas Blogger</a></small></div>

Acho que não é necessário, mas vou pedir assim mesmo: NÃO RETIRE OS CRÉDITOS

Os comentários do seu blog sumiram?

Já faz um pouco mais de 1 mês, que os usuários do Blogger estão enfrentando problemas com o sistema de comentários. O bug mais comum é percebido através dos gadgets que contabilizam o número total de comentários. Nota-se que o valor mostrado é inferior ao valor real e que varia muito durante um mesmo dia. Por exemplo: o Dicas Blogger deve ter cerca de 14.000 comentários publicados, mas neste exato momento o gadget informa 9918 e de manhã apareciam aproximadamente 4.500 comentários. O assunto já foi abordado aqui no começo do mês março - Diminuição no número total de comentários.

Um outro problema que vem sendo reportado, tanto no Twitter quanto no fórum do Blogger, se refere ao desaparecimento dos comentários em blogs que mudaram para domínio próprio durante esta fase de instabilidades. O caso mais conhecido é o do blog Usuário Compulsivo. Vejam um exemplo, neste meu post publicado em fevereiro, antes da mudança para o domínio compulsivo.com.br - Lindos Wallpapers Grátis para iPhone.

O que eu tenho a dizer é que a equipe do Blogger já está ciente e vem trabalhando para solucionar essas falhas, conforme foi postado no blog oficial Known Issues for Blogger:

Some users are experiencing comment count discrepancies on their blog, specifically for older comments during the December-January timeframe. We have isolated the underlying problem though, and are working to release a fix shortly. Also, if you have recently switched hosting from BlogSpot to a custom domain, it may take up to a few hours before the counts are synced completely (and this is expected).

Como o Dicas Blogger acabou se tornando uma das principais referências sobre o Blogger no Brasil, é natural que muita gente venha me procurar em busca de notícias, mas infelizmente ainda não existe uma solução para nenhum dos dois casos.

Peço que tenham paciência e que lembrem que até hoje a maioria dos bugs do Blogger foram resolvidos satisfatoriamente.

Nesta fase, também podem acontecer erros Bx durante a aprovação de comentários moderados e até mesmo durante o envio dos comentários.

Este post é apenas para mantê-los informados sobre os atuais problemas no Blogger.

Mapa do site para Blogger/Blogspot

Que tal ter uma página no seu blog, onde estão todas as suas postagens organizadas por data? Poderíamos chamar essa página de Mapa do Site ou Arquivo do blog e ela pode ser bastante útil quando um visitante não consegue encontrar algum post específico no seu blog usando a pesquisa ou mesmo se este visitante quiser ler tudo o que você já publicou.

Se quiser ver como é uma página assim, dê uma olhada na que eu criei no meu blog neste link. Se quiser uma página igual para o seu blog, siga o tutorial abaixo.

Primeiramente crie uma nova página no seu blog (1)  e entre no modo de edição HTML (2). Copie o código abaixo, alterando a parte em vermelho pelo endereço completo do seu blog. Cole o código no html da página (3) e clique em publicar agora.

<script style="text/javascript" src="http://100rede.com/mapablogger.js"></script>
<script src="http://NOME_DO_SEU_BLOG/feeds/posts/default?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Veja o resultado do arquivo do Dicas Blogger, na imagem abaixo:

Observações:

Eu peguei essa dica no blog do Abu Farhan, os créditos do script foram mantidos, sendo que eu apenas traduzi os nomes dos meses para o português.

Não sei como os robôs do Google podem interpretar essa nova página do seu blog cheia de links internos, acredito que isso não renderia nenhuma punição nos resultados de pesquisa do Google, mas não posso afirmar tal coisa com certeza.
Percebam que existe um valor neste URL que indica o número de posts a serem exibidos; no exemplo acima este valor está definido como 1000, pois eu queria mostrar todas as postagens do meu blog no mapa. Altere o valor conforme a quantidade de posts do seu blog, colocar sempre um valor bem acima do número de postagens do seu blog vai garantir que todas sejam mostradas.

Teilor (@Teilor) é um dos principais colaboradores do fórum oficial do Blogger e autor do blog Without Brain.

Como criar uma conta no Google

O motivo deste post é que agora já não é mais tão simples criar uma conta no Blogger. De um tempo para cá (não saberia precisar quanto), é necessário fornecer um número de celular para criar a conta no Google e, posteriormente, uma conta no Blogger.

Podemos criar uma conta no Google, acessando qualquer uns dos serviços prestados pela empresa, tais como Gmail, Google Docs, Orkut, Picasa e etc. Para este tutorial, usaremos o Blogger, por motivos óbvios, mas o processo de criação de uma conta do Google é praticamente o mesmo nos demais produtos, mudando apenas a primeira etapa.

Acessando a página inicial do Blogger ( https://www.blogger.com/), encontraremos:

Para criar um blog e consequentemente uma conta no Google, clique em criar um blog. Na página seguinte, preencha todos os campos solicitados. O email utilizado não pode já estar vinculado a outra conta do Google e a senha deve ter mais de 8 caracteres.

Leia os termos de uso, marque a caixa para aceitá-los e clique no botão continuar. Na próxima página,  forneça um número de celular para receber o código (senha) de confirmação

Você pode receber o código de confirmação através de mensagem de texto (SMS, torpedo) ou por chamada de voz. Comigo a primeira opção falhou, mas a segunda chegou rapidinho.

Assim que você receber a senha, coloque no campo indicado e pronto. Veja neste link, todos os produtos que você poderá usar, ao criar uma conta no Google.

Para aprender a criar e personalizar o seu blog no Blogger/ Blogspot, acesse:

• Dicas Blogger: Como criar um blog
• Dicas Blogger: Como criar um blog no Blogger em 10 passos

Este post surgiu devido a uma dúvida da Luma Rosa, do Blog Luz de Luma, Yes Party.