Tutorial: Cómo crear una pantalla en modo mantenimiento de Blogger

jcduranm · 26 Mar 2024

Modo Mantenimiento es una pantalla que contiene información de que un sitio web o una aplicación está en mantenimiento o reparación de características u otras cosas.

La información del modo mantenimiento es muy útil cuando se aplica en un sitio web que está en reparación o cambio, para que los visitantes puedan entender que el sitio web no está disponible debido a mantenimiento.

En este artículo compartiré cómo implementar el Modo Mantenimiento en un blog creado con Blogger. Este modo mantenimiento también se puede activar y desactivar fácilmente.

Normalmente, un blog construido con WordPress mostrará automáticamente el modo mantenimiento o bajo mantenimiento si el sitio está en reparación o actualización.

A diferencia de la plataforma de Blogger, donde no hay una página o información de modo mantenimiento si el blog está en reparación, por lo que debemos crear nosotros mismos la apariencia del blog en mantenimiento.

Para ver la demostración, puedes hacer clic en el botón de abajo

Para Crear el Modo Mantenimiento en Blogger
Paso #1: Inicia sesión en Blogger.
Paso #2: Abre el menú de Temas > Haz clic en la Flecha hacia abajo > Luego Haz clic en Editar HTML
Para asegurarte ante cualquier error, puedes hacer una copia de seguridad de tu plantilla de Blogger primero haciendo clic en la flecha hacia abajo > Hacer una Copia de Seguridad.

Una vez que estés en la Vista del Editor de Plantillas, luego copia y pega el siguiente código justo encima del código <head> de tu plantilla.

Insertar CODE, HTML o PHP:

<!-- Under.css v1.0.2 -->
<b:if cond='data:blog.pageType == &quot;item&quot; and (data:blog.title contains &quot;.&quot; or data:view.title contains &quot;.&quot;)'>
<b:tag name='head'>
<!-- Meta -->
<meta expr:charset='data:blog.encoding'/>
 <link expr:href='data:blog.canonicalHomepageUrl + &quot;favicon.ico&quot;' rel='icon'/>
<title>Estamos en mantenimiento</title>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<!-- Under -->
<link href='//use.fontawesome.com/releases/v5.3.1/css/all.css' rel='stylesheet'/>
<link href='//cdn.jsdelivr.net/gh/zkreations/plugins@1/dist/css/under.min.css' rel='stylesheet'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<!-- Robots -->
<b:if cond='data:view.isError or data:view.isArchive or data:view.isSearch'>
   <meta content='noindex,follow' name='robots'/>
</b:if>
</b:tag>

<b:tag name='body'>
  <style>/*<![CDATA[*/
/* Wave */
.wave {
  background: #010304; /* color de las ondas */
}
.under {
  background-color: #061c2d; /* color del fondo */
}
.under__footer {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 600px;
    opacity: 0;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    color: #fff;
}

        .under .under__content .spinny-cogs{display:block;margin-bottom:2rem}
        @-webkit-keyframes fa-spin-one{0%{transform:translateY(-2rem) rotate(0deg)}100%{transform:translateY(-2rem) rotate(-359deg)}}
        @keyframes fa-spin-one{0%{transform:translateY(-2rem) rotate(0deg)}100%{transform:translateY(-2rem) rotate(-359deg)}}
        .fa-spin-one,.under .under__content .spinny-cogs .fa:nth-of-type(1){-webkit-animation:fa-spin-one 1s infinite linear;animation:fa-spin-one 1s infinite linear}
        @-webkit-keyframes fa-spin-two{0%{transform:translateY(-0.5rem) translateY(1rem) rotate(0deg)}100%{transform:translateY(-0.5rem) translateY(1rem) rotate(-359deg)}}
        @keyframes fa-spin-two{0%{transform:translateY(-0.5rem) translateY(1rem) rotate(0deg)}100%{transform:translateY(-0.5rem) translateY(1rem) rotate(-359deg)}}
        .fa-spin-two,.under .under__content .spinny-cogs .fa:nth-of-type(3){-webkit-animation:fa-spin-two 2s infinite linear;animation:fa-spin-two 2s infinite linear}
        @media only screen and (max-width: 1440px) {
        }
        @media only screen and (max-width: 900px) {
        }
        @media only screen and (max-width: 768px) {
        }
        @media only screen and (max-width: 540px) {
          .maintenance {font-size: 2rem}
        }
        @media only screen and (max-width: 425px) {
        }
 body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
  }
  .progress-bar {
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    background-color: #ddd;
    border-radius: 5px;
    overflow: hidden;
  }
  .progress {
    height: 30px;
    background-color: #4caf50;
    text-align: center;
    line-height: 30px;
    color: white;
    transition: width 0.5s ease-in-out;
  }

/*]]>*/</style>
<!-- HTML -->
<div class='under'>
  <header class='under__content'>
    <div class='spinny-cogs'>
<i aria-hidden='true' class='fa fa-cog'/>
<i aria-hidden='true' class='fa fa-5x fa-cog fa-spin'/>
<i aria-hidden='true' class='fa fa-3x fa-cog'/>
          <h1 class='under__title'><b>EN MANTENIMIENTO</b></h1>
    <div class='under__text'><b>Nuestro equipo de desarrolladores está trabajando diligentemente en la actualización de nuestro sitio web. Le pedimos que por favor espere mientras alcanzamos el 100% de nuestra actualización. A continuación, mostramos la barra de progreso:</b><div class='progress-bar'>
  <div class='progress' id='progress'>0%</div>
</div></div>
</div>  </header>
  <footer class='under__footer'>
     Copyright &#169; <script>
        const d = new Date();
        document.write(d.getFullYear() + &#39; &#39;);
    </script>
    &#8194;
    <b expr:href='data:blog.homepageUrl'><data:blog.title/></b>&#8194;Todos los derechos reservados.
<script type='text/javascript'>
/*<![CDATA[*/
const countdownDate = new Date("2024-12-31T00:00:00").getTime();

setInterval(() => {
  const now = new Date().getTime();
  const distance = countdownDate - now;

  const elapsedTime = countdownDate - new Date("2024-01-01T00:00:00").getTime();
  const percentage = (elapsedTime - distance) / elapsedTime * 100;

  document.getElementById("progress").style.width = `${percentage}%`;
  document.getElementById("progress").innerHTML = `${Math.round(percentage)}%`;

  if (distance < 0) {
    clearInterval();
    document.getElementById("progress").style.width = "100%";
    document.getElementById("progress").innerHTML = "100%";
  }
}, 1000);
/*]]>*/                   
</script>
<!-- Under.css v1.0.2 -->

Luego copie el código a continuación y péguelo justo encima del código de cierre </html> de su plantilla de Blogger.

Insertar CODE, HTML o PHP:

</b:if>

Paso #3: Si ya está, GUARDA la plantilla.
Aunque hayas aplicado el script de modo mantenimiento de Blogger arriba, si abres tu blog aún no muestra la página o información de bajo mantenimiento.

Entonces, se necesita el siguiente paso para activar el modo mantenimiento mencionado anteriormente.
La manera es bastante simple, aquí están los pasos:

Activar y Desactivar el Modo Mantenimiento de Blogger Para que el modo mantenimiento que has instalado se active, necesitas agregar un punto "." al título del Blog. Por ejemplo, como este TUTITULO.

Ve a Configuración > Básica > Título, luego inserta el punto "." al final del título de tu Blog > luego guarda.

Ahora, mira el resultado, si abres tu blog ya está en modo mantenimiento. ¿Entonces, cómo se activa nuevamente para que el blog vuelva a la normalidad?

Es bastante simple, simplemente elimina el punto "." del título del blog que agregaste antes.

Con este modo mantenimiento, aún puedes ver cualquier cambio en el blog a través del modo de vista previa. Así que no tendrás problemas para ver los cambios realizados.

Ajustes del Modo Mantenimiento de Blogger
Aquí tienes una explicación para hacer cambios en la apariencia del modo mantenimiento de Blogger:

La barra progresiva es completamente funcional en vez de mostrar la fecha de cuando estará tu blog listo muestra una pequeña barra del porcentaje avanzado la fecha la aplicas aquí

Insertar CODE, HTML o PHP:

const countdownDate = new Date("2024-12-31T00:00:00").getTime();

("2024-12-31T00:00:00")

Apariencia de Fondo del Modo Mantenimiento Para cambiar la apariencia de fondo, simplemente modifica los colores en
.wave {
background: #010304; /* color de las ondas */
}
.under {
background-color: #061c2d; /* color del fondo */
}

Agradecimientos Especiales a ZKreations

Queremos expresar nuestro más profundo agradecimiento a ZKreations por ser el visionario detrás del innovador concepto del modo mantenimiento. Su creatividad y habilidad para concebir soluciones únicas han sido una inspiración invaluable para nosotros.

A través de su trabajo pionero, ZKreations ha sentado las bases sobre las cuales hemos podido construir y agregar nuestro propio toque distintivo. Su contribución ha sido fundamental para el desarrollo y la evolución de esta función, permitiéndonos expandirnos y explorar nuevas posibilidades.

Nos sentimos honrados de poder seguir adelante con su legado, siempre reconociendo su impacto y dedicación en la creación del modo mantenimiento. Su visión continúa inspirándonos a alcanzar nuevas alturas y a seguir innovando en este emocionante campo.

Gracias, ZKreations, por tu ingenio, tu creatividad y tu visión audaz. Este proyecto no habría sido posible sin tu inspiración y liderazgo. Estamos profundamente agradecidos por tu contribución duradera.

Empresadex · 26 Mar 2024

Excelente aporte compañero yo usaba uno antiguo pero me gusta el que compartiste lo usaré en mi página 👍 gracias por el aporte

Tutorial: Cómo crear una pantalla en modo mantenimiento de Blogger

jcduranm Seguir Seguidores 5

Empresadex

jcduranm Seguir

Seguidores

5