En blogger ¿cuál es el css, html y script para hacer un <div> cuando no encuentra una entrada (error 404 not found), con imagen con animacion css?
Aquí hay un ejemplo de código que puedes usar en tu sitio de Blogger para mostrar un mensaje de error personalizado cuando se accede a un resultado que no se encuentra (error 404 not found):
HTML:
```
<div class="error-container">
<h1>Error 404 - Página no encontrada</h1>
<p>Lo sentimos, la página que estás buscando no se encuentra.</p>
<img src="enlace-de-la-imagen-animated.gif" alt="Imagen animada de error"/>
</div>
```
CSS:
```
.error-container {
text-align: center;
padding: 50px;
}
.error-container h1 {
font-size: 48px;
font-weight: bold;
margin-bottom: 20px;
}
.error-container p {
font-size: 24px;
margin-bottom: 40px;
}
.error-container img {
width: 100%;
max-width: 400px;
animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
```
Este código crea un <div> con una animación CSS para darle una apariencia única y personalizada. La imagen GIF animada se puede enlazar desde cualquier sitio web para que aparezca en la página.
Debes asegurarte de agregar este código en la sección del archivo de plantilla HTML de tu sitio de Blogger, dentro del código de la página de error 404. Para agregarlo, haz lo siguiente:
1. Accede a tu sitio de Blogger en el navegador.
2. Haz clic en "Tema" en el menú del panel lateral.
3. Selecciona "Editar HTML" en la sección "Vista previa del tema".
4. Busca el código que muestra la página de error 404 en la vista previa del tema.
5. Añade el código HTML y CSS en el lugar apropiado dentro del código.
6. Guarda los cambios y haz clic en "Vista previa" para ver los resultados.