Página de erro 404

Página de erro 404

Muitas vezes nossos links quebram, por vários motivos.

Às vezes é um bug temporário da plataforma (isso acontece quando eles fazem atualizações nos códigos fontes, o que é bom para nós, apesar dos desconfortos temporários com os bugs, quando os nossos códigos não funcionam).

Às vezes quando atualizamos uma postagem, às vezes porque o próprio navegador do visitante teve um bug e às vezes por motivos desconhecidos, mas pode acontecer.

Então quando isso acontece o blog mostra uma mensagem de Erro 404 - página não encontrada.

Mas é muito feia essa mensagem e em alguns casos, como no do nosso template, até ilegível.

Pesquisei muito e infelizmente não achei como deixar essa página com o mesmo layout de nossas outras páginas estáticas.

E como essa é uma página que desejamos que nossos leitores nunca vejam podemos criar uma imagem do tamanho das nossas páginas.

Criar uma mensagem de erro 404 personalizada mostra que nos importamos muito com nossos leitores.

Eu criei um texto e preparei uma imagem png para adicionar à minha página de erro.

Anexei meu modelo em psp para quem quiser ter uma noção de como fazer.

Usei a fonte Martina, tamanho 30 e apliquei um inner bevel, para realçar a fonte.

Meu texto é esse, fiquem à vontade para copiá-lo e modificá-lo a gosto:

     404 - Página não encontrada

     Parece que a página que você está procurando foi movida ou nunca existiu.

     Isso pode acontecer até mesmo quando atualizamos uma postagem e ela é republicada com novo endereço. Nem sempre nos damos conta de que isso aconteceu.

     Para encontrar a página correta digite o título da postagem na Caixa de pesquisa.

     Se ainda assim não encontrar envie-nos uma mensagem pelo formulário de contato

     Ao enviar uma mensagem pelo formulário de contato verifique se preencheu corretamente seu e-mail. 

     Muitas respostas voltam para nós porque os endereços de e-mail não foram encontrados e isso é frustrante porque parece que não nos importamos. Mas nos importamos sim.

     Desculpem o transtorno.

Salvei meu trabalho e vou adicioná-lo à uma página de rascunho para gerar um código html.

Criei uma nova página, mas só como rascunho.

Adicionei minha imagem e visualizei a página para adaptar minha imagem ao meu blog:

Tudo estando certo vamos clicar em visualização em HTML para pegarmos a url da imagem apenas:

Coloque a url no código abaixo:

<div align="left">

<img src="url da imagem" />

</div>

o meu ficou assim:

<div align="left">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNSCM4a9PvULPAHemtCsBfAmiTmeE0sZkz2Q48WkHOQ7QmR31ZGSRketv51m0O-B3YU67E04juwGWAL_nfqhLKEl1p_1ZRZTp6bVDmS9xX4nmgFCGYqwH1TwBfNALD_zYMIkf3ZCE0ds9YZEjpzEhex8zsTAP_TlUEFFWYq-QgeYRgdqdhVWxzsy3iHg/s950/p%C3%A1gina%20n%C3%A3o.png" />

</div>

Selecione todo o código e vá em Configurações > Erros e redirecionamentos.

Cole todo o código e clique em Salvar

Agora já temos uma página de erro personalizada.

Clique no botão para vê-la:

Essa deu trabalho porque eu coloquei uma pattern muito escura no fundo do meu blog.

Em um outro blog de testes, com a mesma pattern, mas com uma largura diferente na área dos posts, eu acrescentei um formulário de contato seguindo o tuto da Elaine Gaspareto. 

Nesse caso eu acrescentei o código na mesma página de rascunho onde acrescentei a minha mensagem em png. 

E no caso da imagem eu troquei <div align="left"> por <div align="center">

Meu novo código ficou assim:

<div align="center">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNSCM4a9PvULPAHemtCsBfAmiTmeE0sZkz2Q48WkHOQ7QmR31ZGSRketv51m0O-B3YU67E04juwGWAL_nfqhLKEl1p_1ZRZTp6bVDmS9xX4nmgFCGYqwH1TwBfNALD_zYMIkf3ZCE0ds9YZEjpzEhex8zsTAP_TlUEFFWYq-QgeYRgdqdhVWxzsy3iHg/s950/p%C3%A1gina%20n%C3%A3o.png" /></div>

<br />

<div id="contact_wrap">

<h3>

Fale comigo</h3>

<form name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Enviar email" />

<br />

<div style="max-width: 222px; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

<style type="text/css">

#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}

</style>

<br /><br />

E clique no botão abaixo para ver como a página de erro 404 ficou:

Em um terceiro blog de testes eu coloquei a mesma pattern na área de postagem propriamente dita e na área geral.

Ficou assim minha página de erro 404 inicialmente:

A mensagem está legível, mas ainda assim é muito seca.

 

Para criarmos nosso código já não precisamos criar uma imagem jpg ou png específica para a página de erro, podemos escrever diretamente em uma página de rascunhos e adicionamos o que queremos, incluindo uma imagem para ilustrar:

Aqui precisamos selecionar todo o texto para adicionar cor, mudar o tamanho, enfim, personalizarmos, porque as configurações que fizemos para o blog não se aplicam à página de erro 404.

  

Tudo pronto clicamos em Visualização em HTML e copiamos todo o código:

Nessa eu adicionei um outro modelo de formulário de contato seguindo um tutorial da Elaine Gaspareto. 

Adicionamos esse código lá em Erros e direcionamentos e salvamos.

Clique no botão e veja como essa página ficou.

Esperamos que nossos leitores nunca precisem ver essa página de erro 404 em nossos blogs, mas se acontecer eles se sentirão prestigiados por nos termos preocupado com pequenos detalhes.

Dúvidas, clique na plaquinha e me escreva: