Criar página de erro 404 no Blogger

Como criar uma mensagem personalizada em páginas de erro no Blogger (Blogger Seo)

Todo mundo sabe que o Blogger tem acrescentado novas opções na interface do novo Blogger. Uma opção é a capacidade de criar uma mensagem personalizada em páginas de erro. Ou seja, em páginas que não existem, de modo que se um usuário insere uma postagem excluída ou um endereço digitado incorretamente, será exibida uma mensagem personalizada.

Siga o @bloggermin agora e fique por dentro das novidades para o seu blog. E curta nossa página no Facebook.

Podemos ir mais além e eliminar as sidebar e outros elementos nessas páginas de erro, para exibir somente o cabeçalho (header) e a mensagem personalizada, algo como:

Ou, clique neste link que leva a uma página não existente.

Primeiro, para que essa mensagem possa aparecer é necessário que tenhamos no modelo o status-message incluido, que é responsável por exibir a mensagem de erro e outras.

Então, se você o removeu anteriormente para evitar a mensagem "Mostrando postagens com marcador ..." você deve colocá-lo novamente, caso contrário a mensagem de erro não será exibida.

Portanto, verifique se você tem essa linha no seu modelo (você deve marcar a caixa Expandir modelos de widgets).

<b:include data='top' name='status-message'/>

Se não, você adicioná-lo logo acima do seguinte código:

<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>

Agora que está tudo certo, entre em Configurações -> Preferências de pesquisa (por enquanto só está disponível na nova interface), e onde diz "Página não encontrada" personalizada e clique em Editar.

Em seguida, adicione este código:

<div id="erro-404">
<div class="errot1-404"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit0hrlmhQSIU_Rxw0f2BgJs1kJgtjzlOUqsO15oQQPnsS6ItGRGBCAnPEExbdt1Xled2gS5g4sXtDHXoPsc-I6hKRpTwTjyuPlqEoaW1cZppwJfH9nmRY81fJNA0U0JrjDl1Q9tDE7rtc/s100/error.png" style="vertical-align:middle;"/> UPS!</div>
<div class="errot2-404">Página não encontrada</div>
<div class="errot3-404">
Parece que houve um erro com a página que você estava procurando.<br/>
É possível que a página tenha sido removida ou o endereço não existe.
</div>
<div class="errot4-404"><a href='http://nome-do-seu-blog.blogspot.com.br'>
Ir para a página principal</a></div>
</div>

Este é um código de exemplo, na verdade, você pode colocar qualquer coisa e com os estilos desejados.

Agora, antes de ]]></b:skin> cole os estilos:

/* Erro 404
----------------------------------------------- */

/* Geral */

#erro-404 {
padding:20px;
}

/* Estilo do primeiro texto */

.errot1-404 {
color: #fff;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

/* Estilo do segundo texto */

.errot2-404 {
color: #fff;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

/* Estilo do terceiro texto */

.errot3-404 {
padding:20px;
color:#414141;
text-shadow: 1px 2px 3px #fff;
text-align:center;
font-size:20px;
}

/* Estilo do botao */

.errot4-404 {
margin-top:20px;
padding:10px;
display:inline-block;
text-shadow:0 1px 1px #fff;
text-decoration:none;
font: bold 13px Sans-Serif;
border:1px solid #DDD;
border-radius:3px;
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}

Com isso já temos a mensagem de erro personalizada com a imagem, de exemplo. Agora vamos remover a barra lateral e outros itens, isso requer que você conheça os IDs ou classes de todos os elementos que deseja ocultar, aqui veremos o básico dos modelos originais do Blogger.

Portanto, antes de </head> adicione:

<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.column-right-outer, .column-left-outer, .footer-outer, .feed-links, #blog-pager, #sidebar-wrapper, #footer-wrapper { /* Aqui todos os elementos que queremos ocultar */
display: none;
}
.fauxcolumn-right-outer .fauxcolumn-inner, .fauxcolumn-left-outer .fauxcolumn-inner {
border-left: 0px;
border-right: 0px;
}
#main, #main-wrapper {
width: 960px; /* Aqui a largura total do blog */
margin-left: -25px;
}
</style>
</b:if>

E pronto. Agora alguns detalhes a considerar. No código que adicionamos na configuração você verá em azul a URL da imagem de ícone do erro, pode substituí-lo por outro, de fato pode alterar toda a estrutura do código para o qual deseja. Coloque no local onde indicado o nome do seu blog, isso é para o botão que aparece sugerindo que o leitor vá para a página inicial.

Os estilos na cor verde define as áreas de cada elemento da mensagem de erro.

No segundo código verá também duas notas em verde, que são importantes, no primeiro vamos colocar todos os elementos que queremos ocultar antes de .column-right-outer, por exemplo, se você tivesse uma sidebar chamada right-sidebar, então, antes de .column-right-outer, adicione:

#right-sidebar

Todos os elementos que você adicionar para ocultar devem ser separados por uma vírgula.

Então segue-se a largura da área onde a mensagem de erro é mostrada, em seguida, você deve colocar a medida da largura do seu blog, pode ter que colocar um valor um pouco menor, ou adicionar outra margem depois dele para acomodá-lo,isso depende de cada caso e cada pessoa deverá experimentar com esses valores.

Como você pode ver em questão de códigos é pouco, quase tudo será a criatividade de cada um, para que a página de erro seja tão simples ou tão complexo como todo mundo quer.