Modo mantenimiento para Blogger Modo mantenimiento de wordpress para Blogger

Demo en Codepen

El modo mantenimiento es una página que contiene un mensaje informativo que sustituye al sitio web. Sirve para informar a tus visitantes sobre cuándo volverá a estar activo el sitio nuevamente. En este articulo vamos a aprender a instalar el modo mantenimiento en Blogger.


Contenido


Instalación

Antes de comenzar recomiendo hacer una copia de seguridad de la plantilla en caso de cualquier error. Ve a la edición html, busca <head> y arriba pega el siguiente código:


<!-- Under v1.2.1 -->
<b:if cond='data:blog.title == "off" and !data:view.isPreview and !data:view.isLayoutMode'>
<b:tag name='head'>
<title>Mantenimiento</title>
<meta content='width=device-width,initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<link href='//use.fontawesome.com/releases/v5.12.1/css/all.css' rel='stylesheet'/>
<link href='//cdn.jsdelivr.net/gh/zkreations/plugins@1.0.5/dist/css/under.min.css' rel='stylesheet'/>
</b:tag>
<b:tag name='body'>
<div class='under'>
  <header class='under__content'>
    <h1 class='under__title'>Mantenimiento</h1>
    <div class='under__text'>Mensaje de mantenimiento</div>
  </header>
  <footer class='under__footer'>
    <a href='//facebook.com/' target='_blank'><i class="fab fa-facebook-f"/></a>
  </footer>
  <b:loop values='1 to 3' var='l'><div expr:class='"wave wave" + data:l'/></b:loop>
</div>
</b:tag>
<b:else/>

Del código anterior reemplaza el texto resaltado y los enlaces sociales. También puedes agregar más botones utilizando iconos de Font Awesome. Por último busca </html> y arriba pega el siguiente código:


</b:if>

Guarda los cambios y el modo mantenimiento estará instalado en tu blog.


Uso básico

Para iniciar el modo de mantenimiento ve a tu Panel de blogger Configuración Lo básico y cambia el título del blog por la palabra "off" en minúsculas, guarda los cambios y el blog ya no será visible para los visitantes. Para regresar a la normalidad, solo vuelve a insertar el título original del blog.


Desde el modo mantenimiento podemos editar todas las opciones del blog y ver los cambios realizados desde la edición html usando el botón vista previa, también podemos usar el diseñador de plantillas, editar los widgets, entradas y paginas.


Mientras el modo mantenimiento se encuentre activo, el código xml que corresponde a nuestra plantilla no cargará en lo absoluto, por lo tanto no se puede saltar, no se utiliza javascript y el diseño es responsive.


Personalización

Palabra clave

Por defecto, la palabra off funciona como "switch" para activar el modo mantenimiento, si prefieres usar otra, busca el siguiente código:


<b:if cond='data:blog.title == "off" and !data:view.isPreview and !data:view.isLayoutMode'>

Y cambia la palabra off por otra de tu elección.


Redes sociales

Puedes agregar nuevos botones siguiendo el botón de ejemplo y utilizando iconos de Font Awesome por ejemplo:


<a href='//facebook.com/' target='_blank'><i class="fab fa-facebook-f"/></a>

Fondos

Para personalizar los fondos agrega debajo de <b:tag name='body'> el siguiente código:


<style>/*<![CDATA[*/
.wave {
  background: #000; /* color de las ondas */
}
.under {
  background-color: #061c2d; /* color del fondo */
}
/*]]>*/</style>

Puedes editar el color de fondo principal y el color de fondo de la animación, este último pertenece a un pequeño código que compartí en mi cuenta de Codepen.


Si te ha gustado este aporte por favor no olvides compartir, eso me ayudaria mucho. Si tienes alguna duda déjala en los comentarios, respondo a todos.