Página de erro 404 - Ocultando, redimensionando e criando

Neste artigo, vamos explicar, passo a passo, como criar, redimensionar e ocultar elementos do erro 404 como Gadgets e Widgets, colunas, menus, etc... para conseguir um efeito excepcional, e fazer com que o leitor permaneça em seu blog.

Você sabe o que é erro 404?

O erro 404 é uma resposta que indica que o visitante não pode se comunicar com o servidor, ou o servidor não pôde encontrar a url pedida, ou está programado para não cumprir o pedido e não mostrar o link ou a página não existe mais.

Na visualização, o erro 404 acontece por diversos motivos, podendo ser por causa do leitor que digitou algo errado na URL da página ou mesmo pelo webmaster que publicou algum artigo, e removeu o conteúdo, sem fazer um redirecionamento com o código de erro 301 daquele determinado endereço para outro local.

Independente de qual seja a razão, esse erro aumenta muito a taxa de rejeição da página, espantando o leitor para outro local, e a função deste artigo é estilizar essa página de erro 404, justamente, para manter o leitor em seu blog.

A primeira coisa que você precisa saber é que é uma página como qualquer outra e, assim, pode-se fazer qualquer alteração, estilizá-la da maneira que quiser.

Um item importante que você deve saber é que o Blogger permite até 10.400 caracteres e não aceita as tags <link></link>.

Portanto, se você pretende estilizar esta página, é necessário inserir todos os caracteres dentro da mesma, não usando links externos, um artificio bastante usado em blogs para reduzir o código fonte.



Primeiro, saiba onde será criada e conheça a área para inserir os códigos da página de erro 404. Veja o esquema abaixo:



Para começarmos, vamos explicar como ocultar elementos da página de erro 404 para você controlar toda a área e usar o tamanho total de onde a página de erro irá ser criada.

O código descrito, abaixo, serve para ocultar e redimensionar os elementos que você quer.

O código, abaixo, serve para o modelo do Blogger padrão e para alguns Templates personalizados!

<b:if cond="data:blog.url !=">
<style type="text/css">
#secondarybwrap, .footer-top, #Label1, #footersecondarybwrap, #footer, .post-header, .tab-comments, .navbar, .navbar-default, .main-top-nav, #sidebar, .post-title, #blog-pager, .blog-pager, .entry-title, .navbar-inverse, #main-header-wrapper, #sidebar-3,.secondarybwrap
{ /* 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; } #Blog1, .widget, .Blog, #main, .home-main-content, .col-xs-12, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .row, #row { width: 100%; /* aqui é o local e o tamanho da sua postagem na página */ } </style><br />

</b:if>

Entendendo o código para ocultar os elementos da página de erro

Você notou que existem duas áreas separadas por cores, uma em azul e a outra em vermelho? Veja os dois tópicos, abaixo, referentes as duas áreas destacas no código acima.

Ocultando

1º → A área destacada em azul é onde iremos inserir os elementos que queremos eliminar da página de erro 404, cada elemento possui uma div pai e, às vezes, várias divs filhos.

Primeiro, entenda a div:

<style>

#eu-sou-uma-div-pai {
width: 200px; /* Exemplo largura*/
height: 200px; /* Exemplo altura*/
}

.eu-sou-uma-div-filho{
border-radius: 50px; /* Exemplo borda redonda*/
}

</style>

<div id='eu-sou-uma-div-pai'>

<div class='eu-sou-uma-div-filho'>

<img src="imagem.png"/>

</div>
</div>

O código, acima, teria o seguinte efeito:


Supondo que no código fonte do seu blog, no lugar desta imagem, estivesse uma coluna, gadget, rodapé, menu, etc... Você iria selecionar a div pai e inserir dentro da área especificada em azul no código acima.

Inserimos as principais divs dos principais elementos do blog. Após ter compreendido como ocultar elementos, insira o código dentro na página de erro 404 e salve. Em seguida, abra uma aba no navegador com o endereço do seu blog acompanhado do /404 na frente, e veja os elementos que foram ocultados.

Retire ou insira os elementos necessários.

Redimensionando

2º → A área destacada em vermelho é referente ao tamanho que a sua página de erro 404 vai ocupar dentro do blog.

Definimos a área com 100%

Note, também, que existem várias divs, umas com "." e outras com "#" atrás delas. No código fonte do template dentro da css, elas possuem uma determinada classe, mas no código acima, forçamos as divs a ficarem com 100% de largura.

Portanto, se mesmo com essas divs já inseridas na área destacada em vermelho, a sua página de erro ainda não permanecer com 100% de largura, é necessário que você pesquise em seu código fonte qual a div pai que determina a largura da área da sua página e insira dentro da área destaca em vermelho sempre acompanhada de uma vírgula e um espaço como está no modelo acima.

Criando a página de erro 404

Como especificamos no começo deste artigo, a área onde iremos criar a página de erro 404 se limita a 10.400 caracteres. Parece muito, mas quando temos muitas animações e estilos com css e jquery, o espaço fica muito curto.

Mas não se preocupe, pois o efeito que vamos especificar aqui é em 3D. Simples funcional e elegante!

Para começarmos, copie código abaixo:

<style>
/* Geral */ #erro-404 {
widght:100%;
}
/* Estilo do primeiro texto */
.errot1-404 {
font-family: "Verdana", Verdana, Serif;
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);
padding-top: 15%;
}
/* Estilo do segundo texto */
.errot2-404 {
font-family: "Verdana", Verdana, Serif;
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 {
font-family: "Verdana", Verdana, Serif;
padding:30px;
color:#fff;
text-shadow: 1px 2px 3px #10A296;
text-align:center;
font-size:20px;
}
</style>

E insira dentro da área da página de erro mostrada no começo deste artigo, acima do código de ocultar elementos.

Agora, vamos inserir o html. Copie o código, abaixo, e insira abaixo da tag </style>:

<div id='erro-404'>
<div class='errot1-404'>
<center>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik9wCmB3Fz1HdL-VZv7ajo-UMDgiNeWZGl5I0oseELQA6gRk-XnoBW1CGMDfwzKmzJFcmyxkqEB7xHB8XH0bA0p-vUWDZMjMZ5uqD_gaR4KiKo9_-9VqELCy_jmMZ4Xo0i8JmLdxsvCgk/s100/error.png'/>
Ops!</center></div>
<div class='errot2-404'>
<center>
Desculpe Link offline</center></div>
<div class='errot3-404'>
Parece que houve um erro. Este link esta off.<br/>
Possivelmente, a url foi removida ou digitada de maneira incorreta.</div>
</div>

Salve e visualize sua página de erro.

Caso queira alterar os textos, mude somente a área destacada no código acima.

Para ver a página de erro do BG, clique aqui.

O que achou? Comente!

Ocultando ou exibindo elementos de páginas específicas

Neste artigo, vamos explicar como ocultar ou exibir elementos de páginas específicas em seu blog. É um artifício bastante usado para ocultar ou exibir certos Gadgets ou colunas inteiras, seja a sidebar, rodapé, cabeçalho ou o menu.

Você poderá ocultar ou exibir qualquer coisa de locais específicos do seu blog, podendo assim, usufruir da página inteira de seu template.

Para começarmos o post, primeiro vamos esclarecer um assunto que muita gente tem dúvida:

Pode-se ocultar elementos apenas de um determinado conjunto de páginas.

Exemplo: pode-se ocultar elemento de páginas "estáticas", ou seja, aquelas páginas que você cria na opção páginas e é limitado a 20 somente.

Postagens: independente da postagem que você criou ou o endereço dela, se aplicar o código em seu template, ocultará de todas as postagens.

Pagina inicial é somente na página inicial. O mesmo vale para a página de erro 404 e os marcadores.

Se desejar aplicar o código em seu template, esteja ciente do que afetará ao aplicá-lo.

Caso queira trabalhar dentro de uma página específica, limpando-a com todos os gadgets, rodapé e cabeçalho, leia este artigo:

Como ocultar elementos somente de uma página específica do blog

Tutorial - Ocultando elementos

Primeiro, analise o código abaixo:

<b:if cond='data:blog.homepageUrl != data:blog.url'>

Aqui todos os que queremos ocultar

</b:if>

A parte que destacamos em vermelho são os elementos que queremos esconder, sejam Gadgets, colunas inteiras ou mesmo cabeçalho, rodapé e menu. Acima, inserimos um texto como exemplo.

Se o texto do exemplo anterior fosse parte de código fonte do blog e aparecesse em todas as áreas, como Gadgets que são padrão do Blogger, ocultaríamos ele da página inicial.

Caso queira ocultar mais algum elemento, apenas insira as condicionais que estão entre o texto no exemplo acima.

O próximo passo é entender como ocultar de outras áreas do blog.

Você precisa identificar a área que pretende ocultar e de qual lugar pretende ocultar e inserir as condicionais referentes à cada área.

Condicionais para ocultar as áreas específicas

• Página inicial

<b:if cond='data:blog.homepageUrl != data:blog.url'>
</b:if>

• Página interna

<b:if cond='data:blog.pageType != "item"'>
</b:if>

• Páginas de marcadores

<b:if cond='data:blog.pageType == "item"'>
</b:if>

• Páginas estáticas

<b:if cond='data:blog.pageType != "static_page"'>
</b:if>

• Página de erro

<b:if cond='data:blog.pageType == "error_page"'>
</b:if>

Agora vamos conhecer a função exibir

A função exibir elementos em páginas específicas no blog segue o mesmo esquema da função ocultar.

Como o nome já diz, a função exibir faz com que o elemento dentro da condicional especificada seja exibido somente na área específica.

Conheça os locais e suas respectivas condicionais:

• Página de arquivos

<b:if cond='data:blog.pageType == "archive"'>
</b:if >

• Página estática

<b:if cond='data:blog.pageType == "static_page"'>
</b:if >

• Somente dentro da url de uma postagem

<b:if cond='data:blog.url == "URL-DO-POST"'>
</b:if >

• Páginas internas

<b:if cond='data:blog.pageType == "item"'>
</b:if >

• Página inicial

<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if >

• Página de marcadores

<b:if cond='data:blog.pageType != "item"'>
</b:if >

Obs: Não esqueça que os elementos a serem ocultados das suas áreas específicas devem ficar entre a abertura e fechamento das condicionais, como no exemplo no começo deste tutorial.

Agora, com essas condicionais, você poderá ocultar ou exibir qualquer elemento de qualquer local do seu blog!

Ocultando elementos

Hoje vou explicar como ocultar elementos somente de uma página específica do seu blog.

Muitos meta blogs explicam que para ocultar elementos de páginas específicas, aplicam-se condicionais no código fonte do blog. Ok, concordo, e até escrevi um post ensinando a aplicar essas condicionais, porém, quando você as aplica, automaticamente, está afetando toda a estrutura do código fonte, ou seja, você pode até "dizer" para o código fonte qual parte do blog ele fará efeito, desta forma se aplicam a determinadas páginas. Exemplo: estáticas, postagem, marcadores, erro 404, etc... Porém, quando queremos ocultar somente de um determinado endereço de url, seja estática ou postagem, não importa. Somente naquele endereço url é que deve ser aplicado o ocultamento dos elementos que deseja.

E aí, como eu faço?

É aí que entra o problema.. A maioria dos meta blogs não explica essa dúvida, e a função do BG é esclarecer todas as dúvidas dos blogueiros que vem buscar informação concreta, para lhes ajudar a gerenciar seu blog.

Tutorial - Ocultando elemento

Em primeiro lugar, você não irá mexer, nem inserir nada no código fonte do seu blog, pelo contrário, as condicionais serão inseridas justamente onde você vai escrever ou preparar sua página. No final de cada página ou postagem que você criar, será inserido este código:


Após copiar e colar o código no final da sua página ou postagem, vamos à sua descrição:

Nesta parte do código, você vai colocar todas as tags de chamada dos elementos que quer ocultar. Coloquei no código acima a maioria das tags de chamada do blog. Como no exemplo abaixo:

.column-right-outer, .column-left-outer, .footer-outer, .feed-links, #HTML2, #Label2, #blog-pager, #cse-search-box, #header-top-inner, #navigation, #menu-main, #navigation-wrap, #footer, footer-widget-wrap, #gpt-overlay-0, #sidebar-wrapper, #footer-wrapper {;/* Aqui todos os elementos que queremos ocultar */display: none;}

A parte inferior do código é referente à largura que sua página vai ficar após ocultar os elementos da página. Exemplo:

#main, #main-wrapper {width: 100%; /* aqui é o local e o tamanho da sua postagem na página */margin-left: 0px;}

As tags #main e #main-wrapper são referentes à área do conteúdo da página e {width: 100%; é para definir a largura. No caso, coloquei 100% para ocupar toda a largura da página, mas você também pode definir por pixels. Exemplo: width: 960px;

Caso a área da sua coluna tenha uma tag de chamada diferente, basta achá-la e colocar no código mostrado acima.

Leia este artigo como procurar pelas tags de chamadas para se familiarizar com o código fonte do deu blog

Agora que você terminou de editar o código, coloque-o no final da sua página ou postagem, e pronto! Agora, você ocultou os elementos somente desta página em específico, não afetando o restante da estrutura do código fonte do seu blog!