Ocultar e redimensionar elementos e criar página de erro 404

8 comentários
ocultar

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.

exemplo 404


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:

área 404


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

→ 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://lh6.googleusercontent.com/-TyJrDs9bcr0/T2u4hmEMdWI/AAAAAAAACT8/e4cLGWGxh7s/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!

8 comentários :

  1. Olá Andrew tudo bem? gostaria de uma dúvida sobre as postagens populares eu tenho um blog e excluir todas as postagens só que efetue um backup é claro antes e também do template, e só que agora começei a publicar normalmente, importei as postagens de novo só que agora não aparece as postagens populares, já excluir o gadget das postagens populares , adicionei de novo, mais mesmo assim não aparece as postagens populares, vc saberia me dizer o que pode ser? será porque foi que excluir todas as postagens e agora está começando , como eu estivesse iniciando o blog, ou não tem nada ver, o que em algo de errado? me desculpe se eu tiver perguntando no lugar errado , se puder me ajudar agradeço. Muito bom seu blog sempre leio artigos aqui aprendi algumas coisas fico no Aguardo Elias

    ResponderExcluir
    Respostas
    1. Olá, este script que você usa em seu blog relacionado a postagens relacionadas provavelmente faz a leitura do seu Feed, tari que configurar novamente o script do Gadget, e configurar seu feedburnner assim como alterar as datas das postagens que você fez o backup, desta forma não ocorrerá mais este erro.

      Abraços Andrew Silva do BG.

      Excluir
    2. Olá, Andrew sobre as postagens populares, sem problemas mais uma vez obrigado, mais o problema que importei todas as postagens, deixei para publicar aos poucos mais o pior que quando importei deixei para publicar normal aos pouco o problema que já estava indexado já no google, agora dá só erros 404 página encontrada a ferramentas webmaster, publiquei a mesma pesquisei no google vi qual era a url que era antes que estava indexado, fui numa da postagen fiz de tudo publiquei na data que foi publicada e tentei ai deixar mesma url mudando link permanente usando o mesmo link personalizado para ver se dava certo, puxa o que eu fiz de errado o Adrew? não tinha necessidade de excluir o Feeds?, nossa puxa se vc puder me ajudar, como fazer um backup de tudo do blogger e exportar novamente o mesmo url que já está indexado no google eu agradeço, exportar e importar é simples mais o problema é que já estava tudo indexado, mas uma vez se puder dar uma dica como proceder sobre backup e restaura caja haja alguma problema eventualmente eu ficara grato, acho que enganei achei a plataforma wordpress mais dificil acho que é o blogger Mais uma vez obrigado e muito bom o blog muito bem indexado nos mecanismo de busca Grato Elias

      Excluir
    3. Olá, vamos por partes. Primeiro: indexação. Para indexar as paginas antes de enviar um Sitemap nas ferramentas para webmaster você deve buscar como Google na aba rastreamento. após enviar a "URL" ao índice você deve atualizar a página, isto deve ser feito manualmente em cada postagem do seu blog. Ainda indexação você deve enviar um Sitemap clicando na aba Sitemap, para fazer este processo é necessário que você tenha uma conta configurada no FeedBurner caso tenha uma conta devidamente correta de feed, envie um sitemap clicando no botão vermelho acima enviar sitemap, e em seguida digite o seguinte código: /atom.xml?redirect=false&start-index=1&max-results=1000

      Após digitar este código clique em enviar e atualize a página.

      Próximo passo blogger.

      No menu do blogger em configurações selecione a aba outro(ultima opção) e em feed de site coloque a URL do seu FeedBurner, a mesma que você, configurou. salve e esta etapa está ok.

      Postagens, todas as postagens que você enviou ao Google através de Sitemap e buscando como o Google irão aparecer normalmente nas buscas orgânicas. Só que levará um tempo até que o Google retire do ar todas as URL's antigas e coloque as novas no ar, aconselho esperar pelo menos de 3 a 7 dias para que todo o processo de troca de links e indexação esteja corretas.

      Siga os passos acima, que certamente irá voltar tudo ao normal, qualquer duvida volte a postar.

      Excluir
    4. Olá Andrew mais uma vez obrigado pela dica e pela explicação fiz conforme você falou, lá na ferramenta do webmaster do google fala que todas urls foi enviadas 1.103 urls enviados só que no indexados está um tracinho - , sinal que não tem agora nenhuma urls indexados, mais uma dúvida em relação a importar e exportar o blog para outro blog com endereço diferente, posso exportar as postagens para um blogger com endereço diferente e publicar todas e criar o feeds tudo certinho demora quanto tempo para o google rastrear se por um caso eu for imigrar para endereço diferente na plaforma blogger mesmo quais os procedimentos para dar certinho para google rastrear depois todas as postagen que exportei importei e publique nesse blog? outra dúvida é sobre os comentários, perdi todos comentários apaceram só para mim quando fui postagens que estava os comentários para mim ver não mostrava, só mostrava para mim no blogger o que eu fiz de errado que quando exporte e depois eu importei tudo as postagens os comentários dos visitantes não apareceram no blogger para o publico só aparecerem só para mim ai eu acabei excluindo,puxa eu tinha muito comnetários, quando a gente exporta e depois importa os comentários a gente perde nesse meio termo de importar e exportar? configuração do feedburner qual é o certo e diferença sobre a configuração ? entre exemplo http://nomedoblog.blogspot.com/feeds/posts/default e esse http://nomedoblog.blogspot.com/feeds/posts/default?alt=rss , qual a vantagem de um pro outro qual é o melhor procedimento diferença de Atom 1.0 para RSS 2.0 , mais uma vez eu agradeço pelas informações e pela dica puxa muito agradecido fico no aguardo sobre essas outras dúvidas que eu perguntei Obrigado Elias

      Excluir
    5. Olá, você tem muitas dúvidas, mas estamos aqui pra isso, vamos lá!

      Respondendo a sua primeira duvida, "importar postagens" sim! é possível importar de um blog para o outro sem problemas, primeiro você tem que ir nas configurações do blogger na opção outro selecione exportar blog desta forma você salvará em seu blog todos os artigos comentários etc... tudo que envolvia suas páginas e postagens.

      Feed, cada vez que você cria um blog ele já vem automaticamente com uma conta configurada no FeedBurner, o endereço da sua conta é o "http//: endereço do seu blog/feeds/posts/defalt" o que acontece é que esta conta é simples é necessário que se configure a conta no FeedBurner você poderá até excluir esta conta no FeedBurner e criar uma nova, o que é mais aconselhável.

      A importação dos seus artigos de um blog para o outro, pode levar de uma semana até um mês para ser todo indexado pelos motores de busca do do Google, o que influencia na indexação é a frequência com que você posta e o numero de postagem existentes para indexar.

      Ao mandar o Google indexar as postagens do blog antigo no blog novo, é necessário que se exclua as postagens do blog antigo para que não ocorra punição nos buscadores por conteúdo duplicado.

      Deixe o blog antigo ativo, por uns dois meses até que o Google indexe todo o conteúdo do blog novo.

      Quanto aos cometários não se perde se fizer o processo correto.
      desde que o blog novo esteja dentro da plataforma blogger e pertença a mesma conta Google.

      Sobre as configurações do Feed não existe uma variação entre rss atom todas as duas são boas o aconselhável é trocar o feeds/posts/defalt pelo nome do seu blog.

      Este processo pode ser feito quando você acessa o painel do FeedBurner, ele exibe uma tela dizendo para queimar um Feed agora basta colocar a url do blog só com o .com e clicar em próximo veja abaixo a forma correta de inserir a url no Feed

      exemplo→ http://bloggerenciado.blogspot.com/ não →http://bloggerenciado.blogspot.com.br/

      O primeiro exemplo é a maneira correta de queimar o Feed, feito esta etapa basta configurar qual vai ser o nome do Feed se vai divulgar em redes social etc... tudo isso está disponível no painel do FeedBurner, se tiver dificuldades para entender o painel use o Google tradutor.

      Espero ter esclarecido suas dúvidas pelo meno foi o que pude compreender no seu comentário.
      na próxima vez use a opção nome e url para que eu possa visualizar seu blog e estuda-lo com mais calma.

      Abraços Andrew Silva do BG.

      Excluir
    6. Olá andrew obrigado por esclarecer minha dúvidas sobre o blogger, e peço desculpas parece que vc não gostou de ter feito muitas perguntas mais obrigado mesmo pela atenção Elias

      Excluir
    7. Olá, que iso? você me interpretou errado, claro que gostei pelo fato de você ter dúvidas. eu apenas enfatizei o fato de que a meta do BG é ajudar os blogueiros iniciantes. O que eu busco e o que eu quero é juztamente capta publico como você. Não se preocupe, volte sempre, e poste todas as suas dúvidas com relação a qualquer assunto voltado para o blogger ou o wordpress. Peço desculpas por você ter me interpretado erado.

      E eu gosto e quero que você e todos os visitantes do BG venham esclarecer suas dúvidas com a gente, sempre estaremos a disposição.

      Abraços Andrew SIlva do BG.

      Excluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.