¡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>
</div>
En este código tenéis que personalizar lo que está marcado:
- 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.
- La URL de vuestro blog. Aquí es muy fácil: añadir vuestra URL ¡y listo! MUY IMPORTANTE CAMBIAR LA URL
- 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: |
| GOOGLE + |
Gracias ♥
Psst, pstt. ¿Os queréis perder la próxima entrada? Si la respuesta es no, apuntaos al blog → SÍGUEME