Criar Página de Erro 404

26 de março de 2015
404 page

Olá pessoal, hoje vou ensinar a criar uma página de erro 404 para a plataforma blogger.
O que falta em muitos blogs é a página de erro 404, que até pode nunca aparecer, mas faz parte do blog.
A página de erro 404 deve ser: divertida e deve conter os links que achar importantes (Home, Contacto, Redes Sociais, etc). 
É super fácil colocar uma página de erro 404, depois do tutorial só precisa arranjar uma ideia criativa e divertida e colocar mãos à obra. LET'S DO IT

No painel do blogger, vá em Definições -> Preferência de Pesquisa -> Página não Encontrada [Editar] -> Adiciona este código:
<div id="erro-404">
<div class="errot1-404"><img src="Link da sua Imagem"/></div>
</div>
Agora vai em Editar HTML -> Procurar </head> -> Colar acima:
<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; /* Posicionar a Imagem */
}
</style>
</b:if>


Nós Elementos que queremos ocultar, caso queira que o seu header e scrollbar desapareça acrescente .header, ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar.
 Caso queira que desapareça outras coisa mas não sabe como fazer, deixe um comentário que eu não me importo de ajudar.

10 comentários:

  1. Que legal isso, eu adorei *U* Vou tentar depois ~

    ResponderEliminar
  2. Adorei o tutorial *o* é uma coisa nova e que pode ser util um dia *-*

    jovenclube(.blogspot.com.br)

    ResponderEliminar
    Respostas
    1. Acho que são poucos os blogs com uma página de erro personalizada. Fica diferente.

      Eliminar
  3. Muito legal, amei a dica ^^ *0*


    sense-wonder.blogspot.com.br

    ResponderEliminar
  4. Gostei.. Fica diferente e divertido!
    Beijos, Aline
    http://24diasdeprimavera.wordpress.com

    ResponderEliminar
  5. Achei muito útil este tutorial! No meu próximo lay faço isto!

    Bruno Dias // Teen Cat

    ResponderEliminar
    Respostas
    1. Fico contente por ter achado útil o tutorial ;)

      Eliminar