Karasu
Delta
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Hola chic@s, aquí vuelvo con un nuevo aporte para el foro, espero sea de su agrado. Se trata de un diseño personalizado para el error 404 de blogger, osea cuando ingresamos a una página inexistente en nuestro blog.
Demo | Demo oscuro | Repositorio en github
Instalación
La instalación está pensada para blogger, pero es perfectamente compatible con el sistema de tu preferencia.
Agregar css
En nuestro Panel de administración de blogger, buscamos la pestaña Tema » Personalizar » Opciones avanzadas » Agregar CSS y pegamos el siguiente código:
He dejado parte del css comentado y sin minificar para que le puedan editar los colores y eso.
Agregar HTML
Volvemos a la pestaña tema y esta vez pinchamos en el botón editar HTML, dentro buscamos <body> y justo abajo, pegamos el siguiente código:
luego de haber agregado el código anterior buscamos la etiqueta </body> y arriba de esta, pegamos el siguiente código:
Guardamos los cambios y listo. Ya debería de haber quedado nuestro error 404 personalizado.
Modo oscuro
He agregado un diseño oscuro como opción para quien guste de este. Para usarlo, basta con agregar la clase is-darken a la clase error-outer y con eso se activará sin mayor problema, debería quedar de la siguiente manera el html:
Bueno eso sería todo. Parte del texto aquí presentado lo extraje del artículo original. Cualquier duda, problema o mejora que quieras comentar, no dudes en hacerlo, con guste las responderé.
Saludos. 🙂
Recuerda siempre hacer una copia de seguridad de tu plantilla cuando hagas modificaciones sobre ésta, así evitarás problemas.
Demo | Demo oscuro | Repositorio en github
Instalación
La instalación está pensada para blogger, pero es perfectamente compatible con el sistema de tu preferencia.
Agregar css
En nuestro Panel de administración de blogger, buscamos la pestaña Tema » Personalizar » Opciones avanzadas » Agregar CSS y pegamos el siguiente código:
CSS:
/*! Error404-blogger | MIT License */
.outer-error{background:#fff;position:fixed;left:0;top:0;width:100%;height:100%}.error{display:flex;flex-wrap:wrap;height:100%}.error-side{width:50%;height:100%;position:relative}.error-content,.error-cover{position:absolute;left:0;top:0;width:100%;height:100%}.error-cover{animation:1.5s errCover forwards;animation-delay:1s;opacity:0;box-shadow:-6px 0 30px rgba(0,0,0,.1)}.error-content{display:flex;align-items:center;justify-content:center}.error-cover img{display:block;width:100%;height:100%;object-fit:cover}.error-main{width:90%;color:#1e272e;padding:32px}.error-title{font-size:48px;font-weight:700;text-transform:uppercase;margin:0;padding:0;opacity:0;line-height:1;animation:2.5s errTitle forwards ease-in-out}.error-about{font-size:16px;padding:16px;margin:16px 0;font-weight:300;line-height:1.5;opacity:0;animation:1.5s errTitle forwards ease-in-out;animation-delay:.75s}.error-btn{padding:0 16px;line-height:48px;font-size:14px;font-weight:500;text-decoration:none;border-radius:2px;display:inline-block;opacity:0;animation:1.5s errBtn forwards ease-in-out;animation-delay:1.25s;transition:color .3s}.error-btn svg{width:24px;height:24px;display:inline-block;position:relative;vertical-align:middle;margin-right:6px}.outer-error.is-darken{background:#101417}.outer-error.is-darken .error-main{color:rgba(255,255,255,.75)}@media screen and (max-width:768px){.error{flex-direction:column}.error-side{width:100%;height:40%}.error-side:first-child{height:60%}.error-main{padding:8px}.error-title{font-size:32px}.error-about{font-size:15px}}
/* Personalización */
.error-cover {
background: #3867d6;
}
/*Botón*/
.error-btn {
background: #3867d6; /*Color de fondo*/
color: rgba(255,255,255, .75); /*Color de texto */
}
.error-btn:hover {color:#fff;} /*Hover*/
.error-btn svg {fill: rgba(255,255,255,.5);}
/*Botón (oscuro)*/
.outer-error.is-darken .error-btn {
background: #161a1d; /*Color de fondo*/
color: rgba(255,255,255, .5); /*Color de texto */
}
.outer-error.is-darken .error-btn:hover {color:#fff;} /*Hover*/
/*About*/
.error-about {
background: rgba(0,0,0, .06); /*Color de fondo*/
color: rgba(0,0,0,.75); /*Color de texto */
}
/*About (oscuro)*/
.outer-error.is-darken .error-about {
background: #161a1d; /*Color de fondo*/
color: rgba(255,255,255,.75); /*Color de texto */
}
/* Animaciones (keyframes) */
@keyframes errTitle {
from {
transform: translateY(-55%) rotateX(-10deg);
opacity: 0;
} to {
transform: translateY(0) rotateX(0);
opacity: 1;
}
}
@keyframes errBtn {
from {
transform: translateY(55%) rotateX(10deg);
opacity: 0;
} to {
transform: translateY(0) rotateX(0);
opacity: 1;
}
}
@keyframes errCover {
from {
transform: translateX(5%);
opacity: 0;
} to {
transform: translateX(0);
opacity: 1;
}
}He dejado parte del css comentado y sin minificar para que le puedan editar los colores y eso.
Agregar HTML
Volvemos a la pestaña tema y esta vez pinchamos en el botón editar HTML, dentro buscamos <body> y justo abajo, pegamos el siguiente código:
XML:
<b:if cond='data:view.isError'>
<!-- Error404-blogger@v1.0 | Karasu-themes© - MIT License -->
<div class="outer-error">
<div class="error">
<div class="error-side is-front">
<div class="error-content">
<div class="error-main">
<h1 class="error-title">Error 404</h1>
<p class="error-about">
La página a la que estás intentando acceder no se encuentra disponible o ha sido eliminada de la web.
Revisa si la url ingresada es la correcta e intenta de nuevo.
</p>
<a expr:href='data:blog.homepageUrl' class="error-btn">
<svg viewBox="0 0 24 24">
<path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" />
</svg>
Volver a la página principal
</a>
</div>
</div>
</div>
<div class="error-side">
<div class="error-cover">
<img src="[B]URL_IMAGEN_FONDO[/B]" alt="error-images">
</div>
</div>
</div>
</div>
<b:else/>luego de haber agregado el código anterior buscamos la etiqueta </body> y arriba de esta, pegamos el siguiente código:
XML:
</b:if>Guardamos los cambios y listo. Ya debería de haber quedado nuestro error 404 personalizado.
Modo oscuro
He agregado un diseño oscuro como opción para quien guste de este. Para usarlo, basta con agregar la clase is-darken a la clase error-outer y con eso se activará sin mayor problema, debería quedar de la siguiente manera el html:
HTML:
<div class="outer-error is-darken">Bueno eso sería todo. Parte del texto aquí presentado lo extraje del artículo original. Cualquier duda, problema o mejora que quieras comentar, no dudes en hacerlo, con guste las responderé.
Saludos. 🙂
Recuerda siempre hacer una copia de seguridad de tu plantilla cuando hagas modificaciones sobre ésta, así evitarás problemas.
Última edición:
