sábado, 12 de maio de 2012

Página de erro 404 personalizada no Blogger

Quem nunca digitou um endereço ou clicou em um link mal-formado e foi parar em uma página de erro 404 levante o mouse!

Então, esse erro é algo muito comum que pode acontecer com qualquer um. É mais comum, inclusive, que suas visitas à sites de conteúdo NSFW. Mas não estou vindo aqui para falar da sua vida sexual e sim sobre uma coisa legal que descobri fuçando no Blogger: Páginas de erro 404 customizáveis!

Pessoal do Wordpress, podem começar a rasgar suas roupas da Abercrombie and Fitch e deitar na BR. De preferência na BR-153 onde passam milhares de caminhoneiros excitados que vão estar muito interessados em ... então, eu disse que ia parar com isso. PAREI!

Consultando minha amiga Wikipédia, ela me diz que o erro 404 é ...


um código de resposta HTTP que indica que o cliente pôde comunicar com o servidor, mas ou o servidor não pôde encontrar o que foi pedido, ou foi configurado para não cumprir o pedido e não revelar a razão. Eles não devem ser confundidos com outros erros nos quais uma conexão para o servidor de destino não pôde ser feita

Ou seja, você está no endereço certo, mas na página errada. Ou no endereço errado, o que pode ser pior ainda. Mas estamos aqui para falar de Blogger, não é mesmo?


Mensagem de Erro Personalizada no Blogger

Há algum tempo atrás a página de erro 404 do Blogger era bem feia e não tinha nada a ver com o layout do seu blog. Ela era assim:


Com o advento da nova engine de layout do Blogger, a mensagem de erro 404 passou a ficar dentro do blog, e com uma configuração que permite escolher a mensagem que irá aparecer, na área que seria referente à postagem. No entanto, essa mensagem também não é muito bonita:


Para mudar essa mensagem é fácil. Você entrará na administração do seu blog e escolherá as seguintes opções: Configurações \ Preferências de Pesquisa \ "Página não encontrada" personalizada e clicar em Editar. Nessa caixa você poderá digitar qualquer mensagem que você queira aparecer. Ela irá aparecer ali naquela caixa feia que aparece acima.

No entanto, não queremos somente uma caixinha com um texto xulemba né? Olhe só a mensagem de erro 404 do #tocadoelfo!

Pra fazer isso, você precisará de mexer no layout do seu blog.

Criando uma página de Erro com HTML e CSS

A primeira coisa que você fará é entrar na área administrativa do seu blog e escolher Modelo \ Editar HTML. Lembre-se que você deve fazer um backup desse código antes de fazer qualquer alteração. Copie o conteúdo dessa janela e cole no bloco de notas até terminarmos a edição.

Agora, você colar o seguinte código no final da área de cabeçalho do seu blog (antes da tag </head>):

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
</style>
</b:if>

O objetivo desse código é o de simplesmente limpar o estilo padrão que o Blogger coloca na janela de erro. Salve o layout e entre no seu blog e tente acessar um endereço inexistente. Você verá que a caixa cinza sumiu. Agora vamos pra próxima parte.

Para simplificar as coisas, faça de conta que você vai criar um novo post no seu blog. Coloque um texto e umas imagens legais lá e depois vá para a edição HTML e copie o código. Se você estiver com preguiça, eu criei o seguinte:

<div style="text-align: center;">
<span style="font-size: large;"><b>Erro 404</b></span>

<div class="separator" style="clear: both; text-align: center;">
<a href="http://blah/imagem.jpg" 
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" 
src="http://blah/imagem.jpg" />
</a></div>

Oops, acho que você errou pois não têm nenhuma página aqui!</div>

Então, de posse desse HTML, você vai voltar lá na opção Configurações \ Preferências de Pesquisa \ "Página não encontrada" personalizada e colar esse código. É importante lembrar que esse campo têm tamanho máximo, então se não aceitar, limpe seu HTML.

Tudo pronto! Agora só falta um último detalhe: O Título!

Por isso amo a nova engine! O Google adicionou uma opção chamada error_page nos tipos de página, que podemos usar para personalizar o layout.

Então, para mudar nosso título, devemos alterar a linha:

<title><data:blog.pageTitle/></title>

para:

<b:if cond='data:blog.pageType == "error_page"'>
  <title>Erro 404</title>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>

Mas se seu título já estiver com outras tags do tipo <b:if> será necessário adaptar o mesmo para incluir mais essa opção. Olhe o exemplo abaixo de um título mais complexo:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <title><data:blog.pageTitle/></title>
<b:else/>
  <title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>

Esse título podemos alterá-lo da seguinte forma:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <title><data:blog.pageTitle/></title>
<b:else/>
  <b:if cond='data:blog.pageType == "error_page"'>
    <title>Erro 404</title>
  <b:else/>
    <title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
  </b:if>
</b:if>

Como você pôde ver, é necessário aninhar alguns ifs dentro do título para que funcione, mas nada que umas boas tentativas para você acertar não é?

Conclusão

Finalmente no Blogger você pode criar páginas de erro personalizadas para seu blog. Se for mais longe, pode inclusive mudar todo o layout do mesmo e construir toda uma estrutura usando essas tags da engine do Blogger.

É como eu digo, o Blogger não fica devendo em nada para outras engines de Blog como o Wordpress e o Typepad. A questão é só saber o que fazer.

Espero que tenham gostado desse tutorial. Divirtam-se muito criando páginas bem criativas e postem os links errados das suas páginas para que os outros possam admirar sua nova página (como quase ninguém no twitter fez quando mostrei a do meu blog).

Fontes:
Wikipédia: HTTP 404
Clayburn's Blog: Blogger Custom 404 Page