Muy buenos días lavanderos!!
Hoy vamos a aprender a poner una página de error personalizada, y no, no es la que nos ofrece blogger por defecto. Es una mucho más resultona, y con buscador y todo ;) La página de error personalizada es importatísima en el SEO (clic aquí para más consejos de posicionamiento), por eso, es conveniente tenerla.
![como-poner-pagina-error-404-personalizada-blogger]()
Si habéis quitado el típico mensaje de "Mostrando entradas para la etiqueta..." (clic aquí para saber hacerlo) y alguna persona se mete sin querer a una página que no existe, la página de error no aparece, es decir, se queda en blanco.
Como yo lo tengo quitado, necesitaba tener una página 404 personalizada, no quería que mi blog se quedara en blanco, y he aquí el resultado:
• Si no habéis quitado el mensaje este, no pasa nada, os voy a enseñar también a hacer que no aparezca sólo en la página de error, de forma que el "Mostrando entradas..." siga visible.
¡Vamos a por el tutorial!
AÑADIR EL HTML
Vamos a Plantilla → Editar HTML (recordad hacer la copia de seguridad!!) y buscamos lo siguiente:
<b:if cond='data:mobile == "false"'>
Justo debajo, vamos a pegar esto:
<!-- Inicio- Pagina error 404 -->
<b:if cond='data:blog.pageType == "error_page"'>
<div id='pagina-error'>
<h1>404</h1>
<h3>No se ha encontrado la página :(</h3>
<p>Introduce a continuación lo que buscabas:</p>
<div id='caja-buscar-error'>
<form action='/search' id='buscar-error' method='get'>
<input name='q' placeholder='' size='40' type='text'/>
</form>
</div>
<p>O regresa a la<a expr:href='data:blog.homepageUrl'>página de inicio</a></p>
</div>
</b:if>
<!-- Fin- Pagina error 404 -->
• Todo lo que está en color verde es el texto de la página y que si queréis, podéis reemplazar por lo que os apetezca. Podéis guiaros a la hora de hacerlo comparándolo con el pantallazo que os he dejado de mi página de error.
AÑADIR EL CSS
Lo podemos añadir directamente en la plantilla (clic aquí para saber cómo hacerlo), o ir a Plantilla → Editar → Avanzado → Añadir CSS (obviamente no podréis previsualizar el resultado). El código que debemos copiar y pegar es este (como siempre, de color aquello que podéis personalizar):
/* Pagina 404 personalizada
------------------------------------- */
#pagina-error {
width:400px;
text-align:center;
margin:20px auto;
margin-top:100px;
}
#pagina-error h1 { /*Texto (en el ejemplo "404")*/
font: normal normal 60px Arial; /*Tamaño y tipografía*/
color: #000000; /*Color*/
text-transform:uppercase; /*Para que esté en mayúsculas, si no lo queréis, borrad la línea*/
}
#pagina-error h3 { /*Texto de debajo del 404*/
font: normal normal 16px Arial; /*Tamaño y tipografía*/
color: #000000; /*Color*/
}
#pagina-error p { /*El resto del texto*/
font: normal normal 12px Lora; /*Tamaño y tipografía*/
color:#000000; /*Color*/
color:#000000; /*Color*/
margin-top:5px;
border-top:1px solid #333333; /*Estilo del borde superior, si no lo queréis, borrad la línea*/
padding-top:10px;
}
#caja-buscar-error {
margin:0;
padding:15px 0;
width:auto;
overflow:hidden;
}
#buscar-error input[type="text"] {
border: 2px solid #000000; /*Estilo del borde del buscador*/
width: 180px;
padding: 7px;
font: normal normal 12px Arial; /*Tamaño y tipografía del texto que se introduce para buscar*/
}
• Para ver el resultado del tutorial, cogéis la URL de vuestro blog y detrás ponéis cualquier cosa por ejemplo, para mi blog: www.misslavanda.es/error
Justo encima pegamos esto:
<b:if cond='data:blog.pageType == "error_page"'>
<style>
.status-msg-wrap{display:none;}
</style>
</b:if>
Y hale lo tenemos listo, mensaje por defecto eliminado y página de error 404 personalizada ;)
Espero que os haya gustado mucho el tutorial y ya sabéis, compartidlo si pensáis que puede serle útil a otras personas ;)
Pasad un día chachi!! besotes! Laura
• Para ver el resultado del tutorial, cogéis la URL de vuestro blog y detrás ponéis cualquier cosa por ejemplo, para mi blog: www.misslavanda.es/error
CÓMO OCULTAR EL MENSAJE QUE TRAE POR DEFECTO BLOGGER
Lo dicho, si no habéis eliminado el mensaje de "Mostrando entradas..", entonces también os saldrá uno para la página de error. Es un poco cutre, así que mejor quitarlo. Para ello vamos a Plantilla → Editar HTML y buscamos esto: /head
Justo encima pegamos esto:
<b:if cond='data:blog.pageType == "error_page"'>
<style>
.status-msg-wrap{display:none;}
</style>
</b:if>
Y hale lo tenemos listo, mensaje por defecto eliminado y página de error 404 personalizada ;)
Espero que os haya gustado mucho el tutorial y ya sabéis, compartidlo si pensáis que puede serle útil a otras personas ;)
Pasad un día chachi!! besotes! Laura
