Todos já sabem que o Blogger incluiu novas opções na nova interface do Blogger. Uma destas opções é a possibilidade de criar uma mensagem personalizada nas páginas de erro.
Quer dizer, nas páginas que não existem, de modo que si um usuário
clica em uma postagem eliminada ou uma url mal escrita do nosso blog,
aparecerá uma mensagem personalizada.
Mas, podemos ir um pouco mais além e eliminar as sidebar e outros elementos nessas páginas de erro para que apareça a mensagem personalizada, algo como este exemplo abaixo:
Ou uma demonstração: Clicando aqui
Como inserir a pagina de erro personalizada no blogger?
Entrar em Configuração | Preferencias de pesquisa (disponível somente na nova interface do Blogger), e onde diz "Página não encontrada personalizada” dê um clique em Editar.
Na área em branco cole este código abaixo:
<div class='MBT-404-box'>
<p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Parece que houve um erro com a página que você estava procurando. É bem provável que tenha sido eliminada ou o endereço não existe:
</font></strong></p>
<ol style='line-height: 25px'>
<li><a href='javascript:history.go(-1)'>« Voltar</a> </li>
<li>Comunicar o Problema <a href='DIGITE AQUI A URL DO SEU BLOG’ >Clicando Aqui</a>    (<em>Vai nos ajudar a resolver o problema e servi-lo melhor</em>) </li>
<li>Ir para a pagina inicial <a href='DIGITE AQUI A URL DO SEU BLOG >Clicando Aqui</a>
<br/></li>
</ol>
<p>
<br/>
<br/>
<br/></p>
<p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
<p> </p>
<p align='center'/>
<p align='center'><font size='5'>Pagina não encontrada!</font></p>
</div>
Clique em Salvar alterações
Esse e um código de exemplo, na realidade você pode colocar o que você quiser e com os estilos desejados.
Agora antes de </head> cole o código abaixo:
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.status-msg-wrap {
font-size: 100%;
margin: none;
position: static;
width: 100%;
}
.status-msg-border {
display:none
}
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 100%;
z-index: auto;
}
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
}
.MBT-404-box {
background:#FFFFFF;
width:98%;
margin:10px 0px;
padding:20px 10px;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
}
</style>
</b:if>
Clique em Salvar modelo
Com isso você já tem a mensagem de erro personalizada como a imagem de exemplo. Agora vamos a eliminar a sidebar e outros elementos, para isso é necessário que conheças os IDs ou classes de todos esses elementos que desejas ocultar, aqui veremos os básicos.
Antes de </head> cole este código abaixo:
<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, .header-outer, .tabs-outer {
display: none;
}
.fauxcolumn-right-outer .fauxcolumn-inner, .fauxcolumn-left-outer .fauxcolumn-inner {
border-left: 0px;
border-right: 0px;
}
#main, #main-wrapper {
width: 960px; /* Aquí va el ancho total del blog */
margin-left: -25px;
}
</style>
</b:if>
Clique em salvar modelo
Prontinho. Está feito!
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 complexa como cada um queira.
0 comentários:
Postar um comentário