24.12.16

Personaliza tu página de error 404 | Tutorial

¡Hola a todos, limoneros! Ay, ya ha llegado el frío a nuestros hogares. Todos vamos con nuestras capas y capas de ropa, con gorros, bufandas y guantes... ¿Cómo puede gustarle a alguien parecer una cebolla? (╬ Ò ‸ Ó) La verdad es que yo no soy una persona de invierno. Me gusta el otoño y la primavera porque a veces hace frío y otras hace buen tiempo. Lo bueno es que en mi ciudad el clima es bastante equilibrado. Ni hace mucho calor ni hace mucho frío -siempre que no salgas a las cinco de la madrugada a la calle o esté diluviando-.

Antes de empezar con la penúltima entrada de la semana bloguera, DEBO AVISAROS de que hay un par de errores en la tipografía y con los espacios, porque blogger estaba tonto tonto -.- No es nada que afecte al tutorial, tranquilos.


El tutorial que os traigo hoy es bastante fácil, así que aunque no seáis expertos en CSS o en HTML podréis hacerlo, ya que básicamente será seguir los pasos que os daré y modificar un par de cosillas.  

Pero antes de empezar, os recomiendo que guardéis una copia de la plantilla de vuestro blog. No la tocaremos mucho -o nada- pero nunca está de más ser precavidos. 


PRIMER PASO

Para poder personalizar el mensaje de error, primero debemos asegurarnos de que lo tenemos 'activado'. Para ello debemos ir a PLANTILLA> EDITAR HTML  Una vez aquí buscamos (con CTRL+F) esta línea:

<b:include data='top' name='status-message'/>


En el caso de que la encontremos, ya está. No tendremos que hacer nada más en este primer paso.  ¿Y si no encontramos esta línea? Pues deberéis añadir el código anterior encima del siguiente:



<b:loop values='data:posts' var='post'>

<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>


Una vez añadido, os quedaría tal que así: 



SEGUNDO PASO

Ahora vamos a personalizar el mensaje. Tenemos que ir a CONFIGURACIÓN > PREFERENCIAS PARA MOTORES DE BÚSQUEDA. Y buscaremos donde dice MENSAJE DE PÁGINA NO ENCONTRADA PERSONALIZADO





Aquí es donde deberemos añadir el primer código personalizado. Os recomiendo que lo copiéis en un documento, hagáis los cambios y luego lo copiéis en la pestaña de 'Mensaje de página no encontrada':



<div id="error-404">
<div class="errort1-404"><img src="https://sdl-stickershop.line.naver.jp/stickershop/v1/product/2938/iphone/main@2x.png" style="vertical-align:middle;"/> ¡UPS!</div>
<div class="errort2-404">Página no encontrada</div>
<div class="errort3-404">
Parece que hay un error con la página que estabas buscando. Es posible que la entrada haya sido eliminada o que la dirección no exista.
</div>
<div class="errort4-404"><a href='http://nombre-de-tu-blog.blogspot.com'>Ir a la página principal</a></div>
</div>



En este código tenéis que personalizar lo que está marcado:

  1. La imagen es el primer código naranja. Yo he puesto una imagen de Rilakkuma, un osito que me encanta. Podéis buscar la imagen que queráis, pero intentad SIEMPRE que tenga un fondo transparente y revisad el tamaño de la imagen.
  2. La URL de vuestro blog. Aquí es muy fácil: añadir vuestra URL ¡y listo! MUY IMPORTANTE CAMBIAR LA URL
  3. OPCIONAL, EN VERDE: Podéis cambiar el mensaje que sale. Desde el '¡UPS! Página no encontrada' hasta 'Ir a la página principal'. Pero aseguraos de que no borráis nada más del código. 
Si solamente hacéis este paso, sin cambiar la imagen y solo la URL, el mensaje os quedará así:


Mirad, por ejemplo, con otra imagen:


Por ello os decía antes que tenéis que vigilar con el tamaño de la imagen. Una vez tengáis este código listo, lo pegáis en 'EDITAR' y dais a guardar.

TERCER PASO


Pero aún queda bastante feo, así que vamos a personalizarlo un poco más. Para ello deberéis modificar el siguiente código a vuestro gusto. Os recomiendo otra vez que lo hagáis en un Word o borrador primero. 


/* Error 404
----------------------------------------------- */
/* Contenedor general */
#error-404 {
padding:20px;
}
/* Estilos del primer texto */
.errort1-404 {
color: #000000;
font-size: 80px;
font-weight: bold;
text-transform: uppercase;
text-shadow: none;
}        
/* Estilos del segundo texto */
.errort2-404 {
color: #000000;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
text-shadow: none;
}
/* Estilos del tercer texto */
.errort3-404 {
padding:20px;
color:#414141;
text-shadow: 1px 2px 3px #fff;
text-align:justify;
font-size:20px;
}
/* Estilos del botón */
.errort4-404 {
margin-top:20px;
padding:10px;
display:inline-block;
text-decoration:none;
font: bold 13px Sans-Serif;
border:1px solid #DDD;
border-radius:3px;
border-color: #999;
background: #FAFAFA;
}



Una vez hayáis personalizado el texto, los botones...Solo tenéis que ponerlo encima de ]]></b:skin>


Si no modificáis nada y lo pegáis tal cual, el anuncio os quedará así:


Podéis cambiarle el texto, la imagen, los colores...Casi todo para que esté acorde con vuestro blog.




Y bueno, ya estamos. Quizá penséis que personalizar el mensaje de error no sirve de mucho, pero tampoco molesta 😂 De hecho, yo soy de las que piensan que son los detalles en el blog los que hacen que sea bonito. No hace falta poner nada muy llamativo,  cambiar radicalmente el diseño...

Yo os he puesto este ejemplo con el osito porque es el que tengo yo. Pero podéis hacer un mensaje con otra imagen que os guste o incluso sin imagen. O poner el texto de otro color, con otra letra...Eso ya depende de vosotros (*´∀`*)

¡HASTA MAÑANA!


COMPARTE ESTE POST EN:


FACEBOOK


TWITTERGOOGLE +
Gracias 

Psst, pstt. ¿Os queréis perder la próxima entrada? Si la respuesta es no, apuntaos al blog → SÍGUEME 

8 comentarios:

  1. Ja, me adelanté, ya lo tengo personalizado :D Aunque está muy soso, quizá lo cambie.

    ResponderEliminar
  2. Hola bonita :3
    Awwws qué cutes, aunque no creo que lo haga. Pero queda muy chachi :3
    Un besito bonita :3

    ResponderEliminar
  3. ¡Holaa! Me guardo el tutorial para hacerlo jajaja me encanta la verdad ^^
    Un besito y gracias :D

    ResponderEliminar
  4. Me encantan estos tutoriales, soy una negada con estas cosas, pero tus consejo me parecen muy útiles y seguro que lo intentaré :)

    Gracias,
    Laura.

    ResponderEliminar
  5. Ya lo he personalizado y ñalsdkjfñlkasjdalk, me encanta el resultado *-* No sabía que hasta eso se podía personalizar xD
    Me gustan mucho tus tutoriales, espero que haya alguno más en el futuro.
    ¡Felices fiestas! :D

    ResponderEliminar
  6. Yo de momento me he quedado en las cajitas para el texto, poner varias imágenes en paralelo y poco más. Tengo que investigar más formas de personalizar el blog, nunca se me habría ocurrido personalizae el mensaje de error, tal vez lo haga, aunque tengo como prioridad personalizar el menú de arriba para añadir desplegables,tengo que investigar eso primero :)

    Gracias por la idea.

    ResponderEliminar
  7. ¡Hola limoncito!

    Mira, tú siempre lo explicas todo mu sensillo y super bien, pero me pongo tan nerviosa que acabo por no hacerlo o por liar algo. De momento [como estamos de fiestas y demás] voy a intentar relajarme... y ya si eso el año que viene... Sí, el año que viene lo intento. Rilakkuma es demasiado bonito para no intentar ponerloo.

    ResponderEliminar
  8. ¡Hola!
    Aunque la imagen es muy cuqui (o son muy cuquis), no le veo sentido poner eso a un blog jajaja, pero bueno.

    Besos ^^

    ResponderEliminar

Muchas gracias por tomarte el tiempo de comentar. Un blog se alimenta de tus comentarios. Y todos los comentarios son una gran alegría para mí ^^