Modo mantenimiento para Blogger

min mantenimiento

Demostración Video Star

Hoy les voy a compartir el método que utilizaba para poner un blog de blogger en mantenimiento. Tal vez algunos recuerden que solía hacer eso en zkreations, con el tiempo he ido mejorando el método, aunque actualmente prefiero realizar los experimentos en un blog de pruebas.


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 justo arriba pega el siguiente codigo:


<b:if cond='data:blog.title == "mantenimiento" and !data:view.isPreview and not data:view.isPreview and not data:view.isLayoutMode'>
<head>
<meta expr:charset='data:blog.encoding'/>
<title>Estamos en mantenimiento</title>
<meta content='width=device-width, initial-scale=1, user-scalable=no' name='viewport'/>
<link href='https:[email protected].0.8.min.css' rel='stylesheet' type='text/css'/>
<link href='https://cdn.rawgit.com/zkreations/Canvas.xml/master/misc/under/dist/under.min.css' rel='stylesheet' type='text/css'/>
<b:tag cond='data:blog.blogspotFaviconUrl' expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon' name='link'/>
<b:if cond='data:view.isError'>
   <meta content='noindex,nofollow' name='robots'/>
<b:else/>
   <b:if cond='data:view.isMultipleItems and data:view.isHomepage'>
      <meta content='index,follow' name='robots'/>
   <b:else/>
      <meta content='index,follow' name='robots'/>
   </b:if>
</b:if>
&lt;!--</head>--&gt;&lt;/head&gt;
<body>
<div class='under flex column align-items-center justify-content-center'>
 <header class='under__content flex column align-items-center justify-content-center'>
  <h1 class='under__title'>Mantenimiento :(</h1>
  <h4 class='under__subtitle'>Volveremos en breve</h4>
  <p class='under__text'>Estamos realizando unos cambios en el blog. Siguenos en nuestras redes sociales para mantenerte informado :)</p>
 </header>
 <footer class='under__footer flex align-items-center justify-content-center'>
  <a href='#facebook' class='under-facebook'></a>
  <a href='#twitter' class='under-twitter'></a>
  <a href='#googe' class='under-google'></a>
  <a href='#youtube' class='under-youtube'></a>
  <a href='#instagram' class='under-instagram'></a>
 </footer>
</div>
&lt;!--</body>--&gt;&lt;/body&gt;
<b:else/>

Ahora vamos a buscar </html> y justo arriba pegamos el siguiente codigo:


</b:if>

Guardamos los cambios y listo. Si tienes problemas para entender estos pasos te recomiendo visitar el video de configuración


Explicación

El código agrega una mini plantilla, que solo es visible cuando las condiciones se cumplen, además no es posible mostrar las dos plantillas al mismo tiempo, esto gracias a la etiqueta <b:else/> y a la condición en sí misma.


cond='data:blog.title == "mantenimiento" and !data:view.isPreview and not data:view.isPreview and not data:view.isLayoutMode'

Primero comprobamos si el título del blog es igual a mantenimiento data:blog.title == "mantenimiento", si esto se cumple verificamos que la página actual sea distinta a la vista previa !data:view.isPreview pero también que no sea la vista previa and not data:view.isPreview y que tampoco sea el panel de diseño and not data:view.isLayoutMode. Esta condición devuelve verdadero si todo esto se cumple, caso contrario mostrará la plantilla de tu blog por defecto.


Uso básico

Para iniciar el modo de mantenimiento vamos a ir a nuestro panel de blogger, a la pestaña Configuración > lo básico y cambiamos el título de nuestro blog por la palabra "mantenimiento" en minúsculas. Guardamos los cambios y nuestro 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 e incluso ver los cambios realizados desde la edición html pero solo será visible desde la vista previa, también podremos usar el diseñador de plantillas y editar los widgets.


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 mantenimiento funciona como el switch que activa o desactiva este modo, si prefieres usar otra en su lugar, busca el siguiente codigo:


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

Y cambia la palabra mantenimiento por otra de tu elección, guarda los cambios y desde ahora, la palabra que escogiste será la que active el aviso.


Redes sociales - Por supuesto, el html de los botones también es modificable, solo reemplaza las url de los siguientes enlaces:


<a href='#facebook' class='under-facebook'></a>
<a href='#twitter' class='under-twitter'></a>
<a href='#googe' class='under-google'></a>
<a href='#youtube' class='under-youtube'></a>
<a href='#instagram' class='under-instagram'></a>

Por las redes sociales correspondiente. Así mismo, también puedes eliminar los botones que no necesites.


Recomiendo no utilizar por más de unas cuantas horas el modo de mantenimiento, recordemos que esto priva a los usuarios de visualizar tu contenidoy puede llegar a ser molesto. Si te ha gustado este aporte por favor no olvides compartir la entrada, eso me ayudaria mucho. Si tienes alguna duda dejala en los comentarios, respondo a todos.