Icon Icon

Página de erro 404


Exemplo de Página 404 para Blogger (tipo 1) 
Vamos ao Tutorial:

1º – Acesse o painel do seu blog Blogger e clique na guia Modelo.

2º – Em seguida, clique no botão Editar HTML.


3º – Segure as teclas CTRL+F e procure por:
<body>
 

4º – E abaixo dele, cole o seguinte código:


<b:if cond='data:blog.pageType == "error_page"'>
<div id='page-404'><div class='p404-text'><h2>Não encontramos nada nesta página!</h2>
<div id='busca-conteudo-erro-404'>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' placeholder='Digite aqui o que você estava procurando' type='text'/>
<input id='search-btn' style=' background- border: 1px solid #000000;' type='submit' value='OK'/>
</form>
</div>
</div></div>
</b:if>
<div id='error404-display-none'>


5º – Depois, segure as teclas CTRL+F e procure por:
</body>
 

6º – E, acima dele, cole o seguinte código:


</div>
 

7º – Depois, segure as teclas CTRL+F e procure por:
</head>
 

8º – E, acima dele, cole o seguinte código:


<b:if cond='data:blog.pageType == "error_page"'>
<style>
body {background: whiteSmoke;text-align: center;margin: 0;padding: 0;}
#error404-display-none {display: none;}
#page-404 {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99999;}
.p404-text {position: absolute;width: 100%;top: 30%;}
#page-404 div h2 {border-bottom: 1px solid #DDD;margin: 10px 0px;padding: 5px 0px 10px;font-family: Arial,sans-serif;font-weight: bold;text-transform: uppercase;font-size: 18px;color: #555;text-shadow: 1px 1px white;}
#busca-conteudo-erro-404 {width: 340px;height: 40px;margin: 0 auto;}
#search-box {width: 250px;padding: 12px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;-moz-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;border: 1px solid #CCC;font-size: 12px;height: 15px;border-image: initial;float: left;margin-right: 6px;}
#search-btn {cursor: pointer;background: #1F9CD8;background: -moz-linear-gradient(top, rgba(31, 156, 216, 1) 0%, rgba(14, 131, 201, 1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(31, 156, 216, 1)), color-stop(100%,rgba(14, 131, 201, 1)));background: -webkit-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);background: -o-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);background: -ms-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);background: linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f9cd8', endColorstr='#0e83c9',GradientType=0 );border: 1px solid #085988;font-size: 22px;color: white !important;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;cursor: pointer;line-height: 12px;text-shadow: 1px 1px 1px #117AAB;filter: dropshadow(color=#117aab, offx=1, offy=1);border-image: initial;padding: 12px !important;float: left;font-weight: bold;padding-left: 8px !important;padding-right: 8px !important;}
#search-box:hover {border: 1px solid #A6A6A6;}
#search-box:focus {border: 1px solid #A6A6A6;outline: none;}
#search-btn:hover {background: #1F9CD8;}
</style></b:if>


9º – Depois, clique em Salvar Modelo.
Creditos :

0 comentários:

Postar um comentário