Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Página Principal
404
Blogger

Cómo instalar la página de error 404 en Blogger

Cómo instalar la página de error 404 en Blogger < / div >
Error de página 404 'No encontrado' es la página generada por el servidor para informarle que el enlace que visitó en una página de blog no se puede encontrar. Por lo general, experimentará un error 404 cuando el enlace se ha cambiado la fecha de su publicación o eliminado, o cuando el amigo haga clic en el enlace a la dirección del blog con el error de escribir en él.
< / a>
En el Blogger ya se proporciona por defecto para mostrar una página no encontrada. Por ejemplo :

Cómo instalar la página de error 404 en Blogger < / div >
Para aquellos que quieran cambiar el aspecto de predeterminado dado a los Bloggers, aquí les daré 4 opciones de la pantalla de la página de Error 404 que pueden emparejar pares fácilmente. Aquí están los pasos.

Cómo instalar la página de error 404 en Blogger< / h4 >
< / div > < / div > < / div >
Primero, abra el Blogger > Haga clic en el Theme > Haga clic en Edit HTML > Luego busque y agregue el código a continuación antes de < kbd > </head & gt;< / kbd > 

  & lt; b:if cond='data: view.isError ' >
< estilo & gt;
/ * Error 404 */
body{background:#fff;line-height:1.4 em;overflow:hidden}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}
@ keyframes charge{from{transform: translateY (2rem); opacity: 0}to{transform: translateY (0); opacity: 1}}@keyframes rotating{from{transform: rotate (0deg)}to{transform: rotate (360deg)}}
# error-page{background:#fff;margin:auto;text-align:center;padding:0 10px;width:100%;max-width: 1100px; - webkit-box-sizing: border-box; box-sizing: border-box}
# error-inner{margin: 12% auto 35px; padding: 0; list-style: none!importante}
#error interno .box-404{display:inline-block;position:relative;font-weight:bold;width:200px;height:200px;background:#e84118;color:#fff;font-size:70px;line-height:200px;margin:25px auto}
#error interno .box-404 .zigg{display: inline-block; position: relative; animation:rotating .6s lineal}
#error interno .box-404::after{content:&#39;&#39;;width:0;height:0;position:absolute;top:0;right:0;border-width:30px;border-style:solid;border-color:#fff #fff transparente transparente;display:block}
#error interno .box-404::before{content:&#39;&#39;;width:0;height:0;position:absolute;top:0;left:0;border-width:30px;border-style:solid;border-color:#fff transparente transparente #fff;display:block}
#error interno .cuadro-404 div::after{content:&#39;&#39;;width:0;height:0;position:absolute;bottom:0;left:0;border-width:30px;border-style:solid;border-color:transparente transparente #fff #fff;display:block}
#error interno .cuadro-404 div::before{content:&#39;&#39;;width:0;height:0;position:absolute;bottom:0;right:0;border-width:30px;border-style:solid;border-color:transparente #fff #fff transparente;display:block}
# error-inner h2 {color:#2d2d2d; font-weight: 700; line-height:1.4 em;font-size:30px;animación: charge .5s lineal}
# error-inner p{line-height:1.7 em;font-size: 16px;color:#111;padding:0;margin:15px auto 0 auto;max-width:640px;animation: charge .5s lineal}
# search-404{max-width: 75%; display: block; margin: 0 auto 15%; position: relative}
# search-404 .icons{width: 26px;height:26px; fill:#4285f4; vertical-align: middle}
# search-404 .icon-Forward{ancho:20px;alto:20px}
# search-404 p{font-size: 90%; color:#999; padding: 20px 20px 0;text-align: right}
# search404 input [type=search]{width: 100%; border-radius:99em;height:48px;box-shadow:0 1px 6px 0 rgba(32,33,36,0);border: 1px solid #dfe1e5; padding: 0 48px 0 24px;line-height:48px;font-size:16px;box-sizing:border-box;outline:0;background-color:#fff;transition:todos .3s}
# search404 input [type = search]: focus{background: # fff; box-shadow: 0 1px 6px 0 rgba (32,33,36,0. 28)}
# search404 .src-btn404{background:transparent;border:none;padding:0 20px;outline:none;height:48px;línea-altura:48px;font-weight:700;margin:0 auto;cursor:pointer;position:absolute;right:0;top:0;z-index:999}
@media screen and (max-width:640px){#error-inner{margin: 5% auto 35px} # search-404{max-width:100%}}
</estilo & gt;
< / b: if & gt; < / pre > 

El siguiente paso, buscar el código <body & gt; y luego poner este código a continuación.




  & lt; b: if cond='!datos: vista.isError ' >< / code > < / pre > 

Luego agregue el siguiente código antes de  & lt;/body & gt;< / kbd > 




  < / b: if & gt;
& lt;b:if cond='data:view.isError ' >
& lt;div class='error-wrapper' id = 'error-wrapper' >
& lt;div id = 'error-page' >
& lt;div id = 'error-inner' >
& lt;div class = 'box-404'>
<div><span class='zigg'>404</span></div>
& lt;/div & gt;
<h2>No se encontró la Página</h2 & gt;
<p> La página que estaba intentando visitar ha desaparecido o se ha movido a otra dimensión. Tal vez la búsqueda ayude.<br/></p>
& lt;/div & gt;
& lt;div id = 'search-404' >
& lt;form action='/search' id = 'search404' >
< input name = ' cof 'type =' hidden 'value =' FORID: 10 ' />
< input name = ' ie 'type =' hidden ' value = 'ISO-8859-1' />
& lt;input class='src-form404' name='q' placeholder='Buscar aquí...'required=' required 'type =' search ' />
& lt;button class= 'src-btn404' title = 'Search' type = 'submit'>;
& lt;svg class= 'icons icon-Search' viewBox = '0 0 24 24' >
<path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5 Z'/>;
& lt;/svg>
</botón & gt;
</formulario & gt;
< p & gt;
O, volver a
& lt;a expr:href='data:blog.Página de inicio>
página de inicio
& lt;svg class= 'icons icon-Forward' viewBox = '0 0 24 24' >
& lt;path d = 'M4, 11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5. 5L16,11H4Z'/>;
& lt;/svg>
< / a>
< / p & gt;
& lt;/div & gt;
& lt;/div & gt;
& lt;/div & gt;
< / b: if & gt; < / pre > 

El siguiente paso botón haga clic en < b > Guardar tema

y ver el resultado.


Para mostrar las opciones a dos, live mate seleccione la versión CSS de este

  & lt; b:if cond='data: view.isError ' >
< estilo & gt;
/ * Error 404 */

@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@los fotogramas clave littleShine{0%{background-position:-400px 0}100% {background-position: 400px 0}}@keyframes movebg{0% {transform: scale(1)}50% {transform: scale(1.6) rotate(15deg)} 100%{transform:scale(1)}}@keyframes rotating{from{transform:rotate (0deg)} to{transform:rotate (360deg)}}

Publicar un comentario