Google privilegia conteúdo original e de qualidade

Ontem, vários sites noticiaram uma importante mudança no algoritmo do Google, que irá priorizar páginas com conteúdo original nos resultados de busca.
Essa informação foi confirmada por Matt Cutts, engenheiro-chefe do Google, em seu blog pessoal e no blog oficial do Google.

• Algorithm change launched
• Google search and search engine spam

Segundo o IG Tecnologia:

"Como o spam na web diminuiu ao longo do tempo, a atenção agora está em sites com conteúdo superficial ou que copiam outros", diz Matt Cutts, engenheiro-chefe do Google.

Já no O Globo online, encontrei:

A Google lançou uma alteração em seu algoritmo de buscas na web cujo efeito será elevar a classificação de sites que publiquem conteúdo original em detrimento de outros que simplesmente copiem esse conteúdo.
Com isso, esses sites originais aparecerão antes nos resultados de busca, para benefício dos internautas, que certamente preferem obter informações direto da fonte.

Isso quer dizer que sites que copiam e publicam artigos de outros ou mesmo os que possuem um conteúdo superficial e de baixa qualidade, sofrerão quedas no ranking de resultados em buscas feitas através do Google.
Explicando mais claramente, será o fim dos kibadores ;)

1. Google lança mudanças no algoritmo de busca – Digital e Mídia
2. Google ajusta algoritmo para priorizar conteúdo original na busca – IG Tecnologia
3. Confirmed: Google's Content Farm Algorithm Live! Sites Are Dropping! – Search Engine
4. Algorithm change launched -  Matt Cutts

Acredito que essa mudança,  só vem confirmar a preocupação da gigante de Mountain View em oferecer o que há de melhor na internet. E, para quem - como eu - já lutou muito contra o plágio na Blogosfera, traz alívio e a gratificante sensação de justiça.

Como colocar o contador Histats no Blogger

Após fazer um post sobre o Histats - Histats - web analytics em tempo real - notei que vários leitores tiveram dificuldade para instalar o código de rastreamento. Sendo assim, resolvi fazer um tutorial explicando, passo-a-passo, como configurar o Histats.
Como se registrar no Histats

1. Para fazer o cadastro, clique aqui. Preencha todos os campos solicitados.
2. Na página seguinte, coloque os seus dados e configure o fuso horário.
3. Leia e aceite os termos de uso
4. Aguarde um email de confirmação do registro
5. Caso você não receba o email, verifique a caixa de spam
6. Clique no link de confirmação, volte ao site e faça login

Como adicionar um site ou blog

1. Clique em add a website e preencha os campos com os dados do blog
2. Ajuste o fuso horário e os demais dados.
3. Em Stats visibility, escolha se as estatísticas ficarão visíveis aos visitantes
4. Aparecerá então o painel de controle. Clique sobre o endereço do blog

Como colocar o contador do Histats no blog
Para que o Histats consiga medir os dados de acesso do seu blog, será preciso usar um código de rastreamento. Ao clicar no endereço do blog, aparecerá um sumário. Clique na aba “counter code” para configurar o contador de acessos.

Na janela seguinte, clique em “add new counter” O Histats oferece muitos modelos de contadores. Escolha um deles, clicando sobre o modelo desejado. Depois, configure o que deverá ser mostrado no display do contador e clique em “save”

Na próxima página, clique sobre o número do contador e copie o código de rastreamento, que aparecerá logo abaixo.
No Blogger, entre em “design” e clique em “adicionar gadget”. Escolha o gadget “html/javascript”, cole o código do Histats e salve.
Como usar um contador invisível

1. Clique na aba “counter code”>add new counter.
2. Procure pela aba “hidden”
3. Clique sobre “invisible counter”
4. Clique em “save”
5. Clique sobre o número do contador e copie o código
6. Cole no Blogger

As principais ferramentas do Histats
Para verificar as estatísticas, basta navegar pela barra lateral esquerda.

Vou explicar o que quer dizer cada link da barra de ferramentas do Histats:

1. Summary – mostra um resumos das estatísticas
2. Users online – mostra os usuários online em tempo real
3. Dayly stats – estatísticas do dia, em tempo real
4. Monthly by day/month – estatísticas mês a mês
5. Last 120 days – estatísticas dos últimos 120 dias
6. Sources Overview – resumos das fontes de referência
7. Referring Sites – sites que mais enviaram visitantes
8. Search Engines – motores de busca e palavras-chave
9. browsers / os / lang / – tipo de navegador, sistema operacional e idioma dos visitantes
10. Geolocation – localização geográfica dos visitantes 
11. Traffic by Url – tráfego por uRL
12. Traffic by Title – tráfego por título
13. Click count  - cliques no contador

Em usuários online, dá para descobrir muita coisa importante. Notem que existe um ícone com play e pause para controle das visualizações.
Em search engine, aparecem as palavras-chaves que foram usadas pelos visitantes - através dos motores de busca - para chegarem até o blog. É aí que vocês devem prestar muita atenção, a fim de saberem como o visitante se comporta.

Basicamente é isso. Mexam no Histats, façam testes e descubram o quanto esta ferramente pode ser útil para potencializar seu blog.

Histats - web analytics em tempo real

Eu gosto tanto de testar serviços do tipo contador de estatísticas, que aqui no blog tem até um marcador somente para posts com esse tema.
Para quem não sabe, web analytics é o processo de medição, coleta, análise e a produção de relatórios de dados de navegação e interação com o objetivo de entender e otimizar o uso dos sites e páginas na Internet (Wikipedia)
Parte da boa indexação deste blog, aconteceu graças à análise sistemática dos dados de navegação, especialmente através do que os visitantes digitavam nos mecanismos de busca (Google, Bing e etc) para chegarem até aqui.
O mais famoso e respeitado serviço de web analytics continua sendo o Google Analytics, mas ele tem uma limitação que muito me incomoda: não é possível saber exatamente a frase digitada pelo visitante e nem o posicionamento do post no ranking do Google. (se alguém souber como fazer isso, por favor, me avise)
Por causa disso, sempre tive um segundo contador. Usei por um bom tempo o Histats, mas ele também tinha limitações. Depois passei para o inesquecível Woopra, só que ele passou a ser pago e muito caro. Experimentei comprar uma licença do GetClicky, mas depois de quase 1 ano, notei uma discrepância de valores ( para menos) se comparado ao Analytics. Não renovei a licença e fiquei órfã.

• GetClicky - um poderoso contador para seu blog
• GetClicky - um poderoso contador para seu blog
• Como colocar o Google Analytics no Blogger

Ontem resolvi visitar novamente o Histats e qual não foi minha surpresa ao descobrir que o site melhorou muito e que agora apresenta as estatísticas em tempo real, além de mostrar exatamente o que foi digitado e como os posts aparecem no Google.
Vejam no exemplo abaixo, os dados de acesso via Histats.

Percebam que ao lado da palavra-chave, existe uma setinha. Clicando nela, chego em:

Ou seja, sei exatamente o que o visitante escreveu e qual a posição do blog.
Além disso, ainda podemos verificar o número de usuários online, de onde eles vieram, quanto tempo ficaram no blog, se clicaram em outros links e etc, em tempo real:

E tudo isso é oferecido GRATUITAMENTE – completely free!

Saber o comportamento dos visitantes, os posts mais acessados, o rank de indexação e etc, é obrigatório para quem deseja profissionalizar seu blog e/ou monetizá-lo. Não tem como escapar disso. Mãos à obra! Para fazer o registro,  clique aqui e para aprender a usa´-lo com o Blogger, acesse Como colocar o contador Histats no Blogger

Palestra sobre profissionalização de blogs

Durante a Campus Party 4, aconteceu uma palestra muito interessante sobre profissionalização de blogs,  ministrada pelo Thiago Mobilon (@mobilon), fundador e editor-chefe do Tecnoblog – um dos blogs de tecnologia mais importantes do Brasil.

Pra nossa sorte, a palestra foi gravada  em vídeo e disponibilizada no site Ustream.

Thiago compartilha suas experiências como blogueiro, apontando os caminhos para a profissionalização. Dentre as várias dicas de estruturação, ele fala sobre a importância de um  design harmônico e organizado, com identidade visual exclusiva.

Não deixem de conferir, pois trata-se de um blogueiro que pode falar com propriedade sobre o tema e que tem muito para ensinar. #ficadica

Profissionalização de blogs, por Thiago Mobilon - Campus Party 2011 PARTE 1

Profissionalização de blogs, por Thiago Mobilon - Campus Party 2011 PARTE 2

Fontes: Códigos Blog e RCastrezana (Ustream)

Como colocar recursos nos posts via HTML

Antes de mais nada, quero adiantar que este post é mais voltado a usuários que já possuem alguma noção sobre HTML e CSS. A idéia é auxiliá-los a colocar novos recursos em seus templates, mostrando onde ficam alguns códigos essenciais e exclusivos do Blogger.
Abordaremos os códigos que são responsáveis pela área de postagem, através das “divs”, que são tags HTML que delimitam espaços dentro de um layout.

Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id. Fonte: HTML.net

Para incluir anúncios, mensagens, botões do Twitter  ou quaisquer outros códigos/recursos nas áreas que englobam os posts, deve-se seguir estes critérios:

NA PRIMEIRA LINHA DO RODAPÉ DOS POSTS
<div class='post-footer-line post-footer-line-1'>
Código
</div>
NA SEGUNDA LINHA DO RODAPÉ DOS POSTS
<div class='post-footer-line post-footer-line-2'>
Código
</div>
ABAIXO DO TÍTULO
Código
<div class='post-header-line-1'>
ENTRE O TÍTULO E OS POST
<div class='post-header-line-1'>
Código
NO FINAL DO POST
Código
<div class='post-footer'>

Isso significa que, por exemplo, se eu quiser colocar um anúncio entre o título do post e o texto, eu devo procurar dentro do HTML do template por:

<div class='post-header-line-1'>

E colocar o código do anúncio logo embaixo dessa linha. Vejam estas imagens:


Percebam que o código do anúncios foi inserido entre o título e o post, ou seja, logo embaixo de <div class='post-header-line-1'>
Para encontrar as divs dentro do HTML, é preciso marcar a caixa “expandir modelos de widgets” e usar o Ctrl+F do teclado.

Passemos agora para uma outra imagem, também aqui do Dicas Blogger:

A área onde aparecem o meu nome, data e marcadores corresponde a <div class='post-header-line-1'> e fica logo embaixo do título da postagem. Nesse caso, ao contrário do anterior, o código foi inserido ANTES da linha 'post-header-line-1'.
Já a área onde aparecem os ícones de compartilhamento e os comentários, correpondem a <div class='post-footer-line post-footer-line-1'>, que é a primeira linha do rodapé dos posts, também chamado de post-footer.
Para modificar a disposição do nome do autor, marcadores, data e link para os comentários, basta ir movendo os códigos correspondentes, dentro das divs.

AUTOR DOS POSTS
<span class='post-author'>
          <b:if cond='data:top.showAuthor'>
            <data:top.authorLabel/> <data:post.author/>
          </b:if>
        </span>   
MARCADORES
<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 != &quot;true&quot;'>,</b:if>
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +  &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if></b:loop>
          </b:if>
        </span>
A DATA
<b:if cond='data:post.dateHeader'>
<span class='date-header'>em <data:post.dateHeader/></span>
</b:if>
COMENTÁRIOS
<span class='post-comment-link'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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 Comentário
    <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> </a>
    </b:if>
    </b:if>
    </span>

Vamos para um exemplo prático. Supondo que eu queira colocar os marcadores logo abaixo do título das postagens. Nesse caso, eu irei deslocar o código dos marcadores, para cima da div <div class='post-header-line-1'>

Para aplicar estilos em CSS, é só encontrar o seletor de cada um deles. Exemplo:

<span class='post-comment-link'>

correspondente:

.comment-link

Claro que tudo isso irá variar de template para template. O segredo é, usando o Crtl+F, procurar a linha de códigos que mais se aproxima das que postei aqui e testar SEMPRE em um blog de testes, para evitar de fazer bobagem no blog principal.
Acessem os artigos abaixo, que mostrarm ótimos recursos que podem ser empregados, usando o tutorial de hoje:

• TweetMeme- Inserindo botão de Retweet no Blogger
• Como colocar o botão do Facebook no Blogger
• Topsy – outro botão de RT para o seu blog
• Mensagens no rodapé dos posts
• Anúncios nas postagens do Blogger
• Botões para compartilhar posts nas redes sociais

Bitw.in Sorteios – Twitter e Google Buzz

Recentemente, foi lançado o Bitw.in Sorteios. Um site com uma função muito simples e objetiva: Realizar sorteios poderosos no twitter e no Google Buzz, permitindo a você ter mais controle sobre quem pode participar do seu Sorteio de forma simples e prática.
Para utilizar o Bitw.in Sorteios, entre na página inicial e clique em Criar Sorteio, faça login através de sua conta no Bitw.in, Twitter, Google Buzz ou Facebook e defina um titulo para o seu sorteio, a quantidade de sorteados, o que o participante deve fazer para participar do seu sorteio e as demais opções, que são completamente opcionais, como agendar um sorteio, ignorar determinados usuários do sorteio e postar uma mensagem logo após a completa realização do sorteio.
Vale ressaltar que, por usar novas tecnologias, ao preencher o formulário e clicar no ‘Criar Sorteio’, deve-se aguardar alguns instantes enquanto o sistema processa o Sorteio, terminando após o redirecionamento para a página de resultados.

Se você quiser ainda mais personalização, pode usá-lo junto ao Bitw.in Dominios, que permite que você tenha um encurtador de urls em endereço personalizado, como no caso do Encurtador pessoal http://fjmota.tk .
O Sistema foi criado por mim, e quaisquer dúvidas serão respondidas nos Comentários.

Sobre o autor: Fernando Jorge Mota (@fjorgemota) tem 15 anos, é estudante, programador, editor do Blogueiros na Web e criador do encurtador de URLs Bitw.in

Aprenda a mexer em códigos facilmente

Hoje eu vou dar uma dica de ouro pra quem gosta de mexer com códigos em geral, seja HTML, CSS, javascript e etc, mas que também serve para quem precisa apenas fazer edições nos códigos dos gadgets
Trata-se do aplicativo Notepad++, um editor de textos cheio de recursos e que trabalha com diversas linguagens de programação.

Notepad++ é um editor de texto e códigos fonte completo que suporta as mais diversas linguagens de programação e, sendo assim, uma ótima alternativa ao bloco de notas.
Dessa forma, com uma ferramenta mais avançada e versátil que outros editores de texto, você tem suporte às linguagens C, C++, Java, C#, XML, HTML, PHP, Javascript, ASCII art, doxygen, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, TeX, TCL, Assembler, Ruby, Lisp, Scheme, Properties, Diff, Smalltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab, Verilog, Haskell e InnoSetup. Fonte: Baixaki

Um dos recursos que pode ser muito útil para qualquer blogueiro, independente do nível de conhecimento, é o de substituir trechos dos códigos de forma automática.
Vamos para um exemplo. No post anterior - Pop-up assinar feeds – divulguei um código javascript para colocar uma janela pop-up, incentivando os visitantes a assinarem os feeds do blog. Nesse código, é preciso substituir a frase “nomedofeed” três vezes. Experimente encontrar tal frase no meio daquele código imenso, quando já foi colado no gadget HTML/javascript. Complicado, né?
Pra quem não tem o Notepad, um Crtl+F do teclado ajuda, mas mesmo assim é necessário digitar o nome do feed 3 vezes. Quando forem 20, 30 substituições – como em um template, por exemplo -  o gasto de tempo pode ser grande.
Agora vejam na imagem abaixo o que o Notepad++ é capaz de fazer.

Sim, com poucos cliques ele substitui trechos de códigos de uma só vez. No exemplo acima, escolhi substituir “nomedofeed”, pela URL final do feed do Dicas Blogger.
Para fazer substituições de trechos dos códigos, siga estes passos:

1. Instale o Notepad++
2. Abra o aplicativo e cole o código que será modificado
3. Dê um Crtl+F com o teclado
4. Clique na guia “substituir”
5. Em “localizar” escreva o trecho que deverá ser substituído
6. Em “substitua por”, escreva o novo trecho
7. Clique em “Substituir todos”

Depois, é só copiar o código já modificado e colar no gadget HTML/javascript.
Para baixar o Notepad++, acesse um dos links abaixo:

1. Notepad++ – site do desenvolvedor
2. Notepad++ – Baixaki
3. Notepad++ portable – Baixaki

Para editar templates, é só colar o código HTML inteiro no Notepad++, fazer as alterações e salvar no formato .XML; mas para isso eu ainda prefiro o próprio editor do Blogger que me permite ir editando e visualizando as mudanças ;)

Pop-up assinar feeds

Depois que escrevi o post Como conseguir mais assinantes de feeds, vários leitores se mostraram interessados em colocar uma janela do tipo pop-up em seus blogs, com o objetivo de convidar os visitantes a assinarem os feeds. Como eu disse no outro post, não gosto e sou contra, mas consegui encontrar um pop-up discretíssimo.

Trata-se de mais uma das artes da Clau, do Mundo Blogger. No script original da Clau, o pop-up aparece com um ícone preto. Para copiar o código, acesse Box Flutuante Assinar Feed via Email.  Fiz algumas modificações - com a autorização dela -  e vou ensiná-los como colocar a janela pop-up em seus blogs.

pop-up assine os feeds

Copie o código abaixo e cole no gadget “HTML/javascript” Antes de salvar , substitua NOMEDOFEED ( que aparece 3 vezes), pela parte final do endereço do feed do blog.

Exemplo: http://feeds.feedburner.com/dicasblogger

A parte em verde, corresponde à frase que aparece na janela pop-up e pode ser modificada, respeitando o número de caracteres para não desconfigurar o gadget.

Peço, encarecidamente, que não retirem os créditos do Mundo Blogger.

Atenção! Nos meus templates, o script só funcionou corretamente quando inserido no rodapé (lowerbar). Isso pode mudar de blog para blog, então façam testes, movendo o código dentro dos elementos de página do Blogger.

<style type="text/css">
#topbar
{
padding: 5px 5px 5px 5px;
visibility: hidden;
border: black 1px solid;
width: 340px;
font-family: Tahoma;
position: absolute;
background-color: white
}
</style>
<script type="text/javascript">
var persistclose = 0
var startX = 5
var startY = 5
var verticalpos = "frombottom"

function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name)
{
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
 offset += search.length
 end = document.cookie.indexOf(";", offset);
 if (end == -1) end = document.cookie.length;
 returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar()
{
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
 el.y = startY;
else
{
 el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
 el.y -= startY;
}
return el;
}

window.stayTopLeft=function()
{
if (verticalpos=="fromtop")
{
 var pY = ns ? pageYOffset : iecompattest().scrollTop;
 ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else
{
 var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
 ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">


<a href="javascript:closebar();"><img border="0" style="float: right;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUG1dDzvvjwaMe-f9XcqKPryaHWE7e6gL0hdJy02rOgTzfHotnIWIfkQNzuwOA6j5K65r2ul04WWwbilzn7u5KjPxVC226jqi9OYgnEoHIsdloMlS72M5ZPuFnZfpAUEdnshVtNPRk8RhS/" rel="nofollow" title="Fechar janela" /></a>
<a target="_blank" href="http://feeds.feedburner.com/nomedofeed"><img border="0" vspace="4" align="left" title="Assine nosso Feed" height="42" src="http://lh4.ggpht.com/_mcq01yDJ2uY/TTrS-VdEadI/AAAAAAAAERQ/PnKkAu8Mg5U/rss_2.png" hspace="4" width="48" /></a>
<center><font color="#000000"><b>Fique sempre atualizado!<br />Receba artigos por email!</b> </font><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=nomedofeed&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' ><input name="email" style="WIDTH: 250px" /><input name="uri" type="hidden" value="nomedofeed" /><input name="loc" type="hidden" value="pt_BR" /><input type="submit" value="Assinar" /></form>
</center>
<div style="text-align: center;"><span
 style="font-size: 65%; color: rgb(0, 0, 0); text-align: center;">Widget
by MundoBlogger<a target="_blank"
 href="http://www.mundoblogger.com.br/2010/03/box-flutuante-assinar-feed-via-email.html"><font
 color="#000000"> Instale este widget</font
></a>
<br />
<div class='clear'></div></span
></div></div>

Problema com imagem do cabeçalho

Eu estava aqui, criando meus templates sob encomenda, quando me deparei com um bug muito chato.
Em condições normais, ao fazermos o upload de uma imagem do computador para o cabeçalho do blog, o Blogger mantém a imagem com seu tamanho original. Hoje, elas estão sendo reduzidas automaticamente – o que deixa o layout horrível.
Fiz testes em diversos templates e notei que o problema era comum a todos. Daí, fui olhar no fórum oficial e constatei que o bug está afetando vários usuários.

Vejam, na imagen abaixo, como ficou um cabeçalho que usei em um blog de teste:
Percebam que a letra está fosca (clique para ampliar), pois a imagem que, originalmente, tem 978 px de largura, foi reduzida para 400 px.
Já reportei o problema à equipe do Blogger. Até resolverem, façam o upload da imagem para o Picasa. Lá no Picasa, clique sobre a imagem e depois, clique em tela inteira Com o botão direito do mouse, clique em “copiar endereço da imagem”

Volte para a configuração do cabeçalho e cole o endereço no local indicado abaixo:

Caso a imagem não carregue, coloque um ponto no final do endereço e aperte o “enter” do teclado. É estranho, mas funciona rs. Coisas de Blogger ;)

• Como hospedar imagens no Picasa
• Imagem para o cabeçalho do Blogger com Photoshop

ATUALIZAÇÃO em 25/01 – A equipe do Blogger já está ciente do problema

Some users have reported that header images have degraded in quality after uploading. We're investigating this and will report back as soon as we have more information to share.
Known Issues for Blogger

Como conseguir mais assinantes de feeds

Atualmente, tenho visto muitos blogs usando táticas duvidosas para atrair mais assinantes de RSS/Feed e até de seguidores no Twitter. Penso que uma assinatura de feed deve ser, antes de mais nada, legítima e baseada em interesse pelo conteúdo.
Do que me adianta números expressivos no contador, se as pessoas não forem ler meus posts? Brindes, pop-ups e afins podem até engordar o contador e o ego do blogueiro, mas na prática podem não representar absolutamente nada.
Da mesma forma que sites indexadores - como o falecido BlogBlogs e o Technorati - perderam credibilidade quando usuários começaram a usar técnicas desleais para aumentar posicionamento nos rankings, logo,logo a métrica de assinantes de feeds não será mais últil para aferir a popularidade de um blog.
O mesmo problema se repete no Twitter, com o uso de scripts e de brindes em troca de mais seguidores. Tais comportamentos – quando analisados por quem realmente entende de mídia social – pode depor contra a reputação do próprio blogueiro.

Eu prefiro ter leitores e seguidores que apreciem o meu trabalho, que interajam comigo a outros que possam ter aparecido apenas por causa de um sorteio, por exemplo.
Por outro lado, existem algumas táticas “do bem”, que podem ser usadas livremente, contanto que o bom-senso venha em primeiro plano.
Conteúdo
O conteúdo continua sendo o rei, o carro-chefe. Se o conteúdo do blog for original e interessante para o leitor, despertará no mesmo a vontade de receber aqueles posts sempre. E se o leitor não souber o que é um feed?
Gadgets
É aqui que entram as táticas que falei anteriormente. Explique ao seu leitor o que é um feed e mostre a ela quais as vantagens de se usar tal ferramenta. Isso pode ser feito através de gadgets e/ou através do recurso “páginas” no Blogger.
Os gadgets que trazem um melhor retorno são:
**clique sobre os links para acessar os respectivos posts

1. Seguidores –  é intuitivo e simples de usar, até mesmo por iniciantes
2. Email Subscriptions - trata-se de um gadget  fornecido pelo FeedBurner, super simples de ser instalado e que já vem até com o botão para assinar o feed
3. Mensagem nos posts – tais mensagens podem ficar na parte superior ou inferior dos posts, convidando o visitante a fazer a assisnatura do feed.
4. Widgets personalizados – nesses widgets, podemos colocar um ícone que identifique que é ali que está o endereço do feed e ainda inserimos os códigos do FeedBurner com contador e para fazer a assinatura por email. É muito prático.

Outro gadget interessante, é aquele que mostra o número de assinantes de feeds e de seguidores no Twitter - Widget – feeds, seguidores, posts e comentários.
Páginas
Usando o recurso “páginas”, podemos criar um post explicando o que é um feed, as formas de assinar os posts e suas vantagens. Vejam um exemplo aqui mesmo no DB - Feeds - receba os posts automaticamente! Mas, lembrem-se que é proibido copiar qualquer post do Dicas Blogger. Usem a criatividade de vocês.
Pop-Ups
Não pode ser considerada uma tática ruim, mas é incômoda. Eu, particularmente, jamais retorno em blogs com aqueles pop-ups imensos, implorando a minha assinatura. Se mesmo assim, vocês quiserem usar um pop-up, acessem:

• Pop-Up Assinar feed via email no Blogger (Como fazer web)
• Como Adicionar um Menu Pop-Up ao Blog ( Blogueiros na web)
• Box Flutuante Assinar Feed via Email (Mundo Blogger)

Opções de assinatura
Outro detalhe importante é oferecer opções ao visitante. Forneça feeds completos, parciais e por email e deixe a escolha para o leitor.

1. Vai de feed completo ou parcial?
2. Como usar e configurar o FeedBurner

Basicamente é isso. Quanto ao DB, atualmente eu uso o gadget seguidores, uma mensagem no rodapé dos posts, o contador de estatísticas e uma página explicativa.

CSS – aplicando estilos às bordas

Hoje irei explicar como aplicar estilos às bordas, usando CSS.
O atalho chama-se “border” e suas propriedades são:

1. border-top ( borda superior)
2. border-right (borda direita)
3. border-bottom (borda inferior)
4. border-left ( borda esquerda)

Para aplicar o mesmo estilo para todos os lados, usamos apenas o atalho “border”.
A sintaxe para aplicar estilos às bordas é:

seletor { border: largura estilo cor;}

Exemplo:

#linkbar a { color:#e6e6e6; text-transform:none; border-right:1px solid #808080; }

O seletor, em CSS, é o que vem sempre precedido por # (jogo da velha). “border-right” se refere ao lado da borda que receberá o estilo. “1px” é a largura, “solid” é o desenho e “#808080” é a cor da borda.
No exemplo acima, apliquei um estilo`apenas à borda direita da linkbar.

#busca { border: 1px solid #FFF; padding: 6px; }

Nesse outro exemplo, apliquei o mesmo estilo para os 4 lados da borda da busca.
Como vocês já devem ter notado, podemos aplicar estilos ao desenho da borda:

• none: sem estilos
• dotted: borda desenhada com pontos
• dashed: borda desenhada com pequenas linhas
• solid: borda desenhada com uma linha contínua
• outset: borda em 3D
• double: borda dupla

Vamos para outros exemplos, mostrando os desenhos das bordas:

border: 1px solid #FF0000;

border-bottom: #ff0000 1px dotted; border-left: #ff0000 1px dashed; border-top: #ff0000 1px double; border-right: #ff0000 1px solid

Assim como nos demais posts, recomendo que vocês façam as modificações em um blog de testes e que visualizem até encontrarem um resultado satisfatório.

Formatando texto com CSS

Outra coisa importante para melhorar um site, é a personalização dos textos. O CSS permite que façamos muitas coisas interessantes, como escolher o tipo de fonte, tamanho, cor, se maiúscula, normal ou minúscula e etc
As fontes
Uma fonte é um conjunto de grifos. A grosso modo, é a letra que usamos para escrever um texto. A propriedade “font” é o atalho para estilos de fontes no CSS:

• font-style: aplica-se um estilo à fonte
• font-weight: define a espessura da fonte
• font-size: define o tamanho da fonte
• font-family: define o tipo da fonte

Os atributos mais usados são:

• font-style: italic ou normal
• font-weight: bold ou normal
• font-size: 30px;
• font-family: arial, sans-serif; (veja outros exemplos, clicando aqui)

O texto
Define a aparência e a apresentação do conteúdo textual.

• text-align: right; ( alinhado à direita)
• text-align: center; (alinhado no centro)
• text-align: justify; (justificado)
• text-decoration: underline; (linha embaixo)
• text-decoration: overline; (linha em cima)
• text-decoration: line-through; (linha no centro do texto)
• text-transform :uppercase; ( letras maiúsculas)
• text-transform: capitalize; ( a primeira letra fica maiúscula)
• text-transform:lowercase; (todas as letras minúsculas)
• text-transform : none; ( não aplica estilos)

Cor do texto
A cor pode ser modificada usando as propriedades hexadecimais ou rgb.

• color: #FF0000; ( cor vermelha, em hexadecimal)
• color: rgb(255, 0, 0); ( cor vermelha, em RGB)

Veja aqui uma tabela de equivalência de cores para web.
Nos templates para o Blogger, geralmente usamos as variáveis, que permitem que façamos as edições das fontes e das cores através do painel  do designer do modelo.

Para cada tipo de fonte, tamanho e cor, é preciso ter uma variável correspondente.

#header h1 {
color:$blogTitleColor; font:$blogTitleFont;
font-variant:small-caps;
margin:0;
padding:10px 20px 0;
}

Variável que fica logo no começo do CSS:

<Variable name="blogTitleColor" description="Blog Title Color"
type="color" default="#800040" value="#ffffff">

A variável é sempre precedida do símbolo “$”. Para criar variáveis, basta seguir o modelo acima. Como exemplo, vou criar uma variável para o título da barra lateral:

<Variable name="sidebarTitleColor" description="Sidebar Title Color"
type="color" default="#800040" value="#ffffff">

#sidebar h1 {
color:$sidebarTitleColor; font:$sidebarTitleFont; 
font-weight: bold;
margin:0;
padding:10px 20px 0;
}

Percebam que a grafia da variável tem que ser idêntica. A primeira parte deve ser colocada com as demais variáveis – que ficam logo no começo do CSS. Já a segunda parte, deve seguir a sequência de cascata dos seletores CSS.

As propriedades margin e padding do CSS

Duas importantes propriedades do CSS, se chamam margin (margem) e padding (preenchimento). São elas que definem os espaçamentos entre os elementos do layout.
A margem é o que separa um elemento de outro e o preenchimento é o espaço entre o conteúdo e a borda desse conteúdo.
Para fazer o controle dos espaços, usamos um código com valores que podem ser em pixels (px), em porcentagem (%) ou em “em”. A palavra “em” vem da tipografia impressa e se refere ao tamanho da letra M maiúscula para uma determinada fonte.
Para este tutorial, vou usar as medidas em px (pixels).
Antes, é importante que vocês saibam o que quer dizer cada valor:

• 0 – estamos dizendo ao navegador que é para usar um espaço padrão
• 0px – estamos dizendo ao navegador para não colocar espaço
• 5px – estamos dizendo ao navegador para colocar 5 pixels de espaço

Vamos ver um exemplo do código para configurar as margens:

margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;

ou, simplicando:

margin: 100px 40px 10px 70px;

O mesmo código se aplica ao preenchimento:

padding-top: 100px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 70px;

Os valores são apenas ilustrativos, onde:

1. top: espaço entre o conteúdo e a parte superior
2. right: espaço entre o conteúdo e a direita
3. bottom: espaço entre o conteúdo e a parte inferior
4. left: espaço entre o conteúdo e o lado esquerdo

A ordem deve sempre ser esta: top, right, bottom e left.
Também podemos usar um código ainda mais simples, quando os valores são iguais para todos os lados:

margin: 3px; ( equivale a 3 px em top, right, bottom e left)
padding: 4px; ( equivale a 5 px em top, right, bottom e left)

Se o valor for o mesmo para as partes superior e inferior e outro para direita e esquerda, usamos:

margin: 3px 5px ( superior e inferior=3px e direita e esquerda=5px)

Agora vou mostrar uma imagem, usado o template do Dicas de Informática

Clique na imagem para ampliar. Veja que o CSS do header (cabeçalho) é:

/* HEADER
----------------------------------------------- */
#header-wrapper {
width:970px;
background:transparent;
border:1px solid transparent;
margin:0;
padding:4px;
}

A margem foi definida em zero e o preenchimento é de 4px em todos os lados.
Na imagem abaixo, vemos o conceito de box model do CSS

Fonte: W3.org

Pode parecer complicado ( e é), mas para modificar templates do Blogger, basta saber o código para controlar os espaços, ir testando valores e ir visualizando até encontrar o efeito desejado. Use um blog de testes e nao tenha medo de errar ;)

Blogger - Criar e publicar posts no iPad

Dispositivos móveis como o iPad são maravilhosos quando se trata de consumir conteúdo: visitar blogs e sites, gerir email, ver filmes e acessar redes sociais, como o Twitter e Facebook. Quando se fala de produzir conteúdo, a coisa já não é tão fácil. O Blogger lançou recentemente a versão mobile para os blogs, mas ainda é inviável escrever posts direto pela interface web. Para isto, é necessário recorrer à aplicações externas.

BlogPress – aplicação para criar posts no iPad
A aplicação BlogPress, que já foi descrita em pormenor aqui: Blogger no iPhone – Como escrever e publicar posts ganhou uma nova interface para o iPad e algumas novas funções. Atualmente é a melhor aplicação para escrever e publicar posts, não só no Blogger mas também no Wordpress e outras plataformas.

Configurações:
Nas configurações, podemos alterar algumas coisas, como o local onde as imagens irão ficar alojadas (por default ficam no BlogPress, mas pode ser alterado para o Picasa junto com as outras imagens do blog). Esta opção é bastante útil para quem utiliza outras plataformas além do Blogger, sendo possível alojar as imagens direto num servidor próprio. Também é possível configurar para que os posts sejam publicados automaticamente no Twitter e Facebook (quem utiliza o método de publicar o feed do blog no Facebook deve desmarcar esta opção). A assinatura do post também pode ser alterada, assim como a fonte das letras e tamanho das imagens:

Escrever posts
É bastante confortável escrever textos longos no iPad (e se você tiver um teclado bluetooth, a tarefa pode ser ainda mais fácil). Com alguns atalhos em HTML podemos inserir links, formatar a forma da letras, o tamanho e a cor. É possível também inserir negrito, itálico e algumas outras funções:
Inserir imagens também é bastante fácil, basta clicar no ícone da camera fotográfica e escolher no álbum do iPad. Clicando na imagem fica habilitado a edição da mesma, onde é possível alterar o tamanho e alinhamento. Também é possível adicionar um link à imagem escolhida (clique para ver maior):

     

Após o texto estar completo, aparecem as seguintes opções: publicar, salvar localmente e salvar online. Também é possível salvar e ver como irá ficar o post. Ao ser escrito, o post fica sempre na versão HTML, esta nova opção permite ter uma idéia clara de como irá ficar a formatação (Save and Preview):

O BlogPress, que pode ser adquirido na AppleStore por 4.99 dólares, com certeza supre as necessidades da maior parte dos utilizadores que querem utilizar o iPad para escrever posts no Blogger e em outras plataformas.

Como apagar todas as mensagens no Twitter

Quem nunca fofocou por DM (direct message) no Twitter? Eu fofoco e muito, por isso apago-as sempre :) 
Como eu já disse anteriormente, seria um deus-nos-acuda se as DMs viessem à tona da noite pro dia. O Twitter ainda apresenta bugs e instabilidades e uma pane como essa pode realmente acontecer. A fim de evitar tal tragédia, eu já ensinei como eliminar todas as DMs de uma vez só, em outros dois posts:

• Como apagar todas as DMs no Twitter
• Apague DMs do Twitter com DMCleaner

O problema é que - até o término deste post - nenhum dos dois métodos anteriores estavam funcionando. A boa notícia é que o @fjorgemota, programador e autor do Blogueiros na Web, criou o DM Eliminator. Trata-se um um bookmarklet, totalmente compatível com o novo Twitter.
Para usar o DM Eliminator, arraste para a barra de favoritos do seu navegador, o link que encontra-se no post do Fernando. Depois, entre nas aba “messages” da sua conta do Twitter e clique no link do DM Eliminator

Será perguntado se você deseja mesmo apagar todas as DMs. Clique em OK, aguarde o término do processo e vá dormir tranquilo (a) ;)

TechTudo – um novo site de tecnologia

Lançado recentemente, o TechTudo é o site de tecnologia da Globo.com, que surgiu com a proposta de (realmente) descomplicar a tecnologia. Para atingir tal objetivo, reuniu-se uma equipe de colunistas de primeira linha e de colaboradores - na maior parte blogueiros - com experiência em escrever artigos sobre tecnologia.
Comandado pelo geek  Nick Ellis – conhecido na web por seus blogs Digital Drops e App Store Blog e por sua paixão por tecnologia – o TechTudo fornece  dicas e tutoriais de aplicativos,  gadgets, sistemas operacionais e muito mais!  Além disso, conta com  reviews que auxiliam o usuário na hora de comprar novos dispositivos eletrônicos.

Acesse o TechTudo e confira o  time de colunistas, bem como as diversas categorias de artigos: reviews, dicas & tutoriais, jogos, blogs, fórum e downloads.

Vocês podem acompanhar o artigos do TechTudo também no Twitter e no Facebook.
Eu tive a honra de ser convidada pelo Nick para colaborar com o TechTudo, onde pretendo publicar artigos sobre informática em geral -  sistemas operacionais, aplicativos diversos para Windows e iPhone, segurança digital, navegadores e etc - bem como  compartilhar minha experiência com blogs. Nos vemos lá ;)