Modo mantenimiento para Blogger


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:

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

<!-- Tiny Meta -->
<meta expr:charset='data:blog.encoding'/>
<title>Estamos en mantenimiento</title>
<meta content='width=device-width, initial-scale=1, user-scalable=no' name='viewport'/>

<!-- Under -->
<link href='https://cdn.rawgit.com/zkreations/whale.css/master/dist/version/whale@1.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'/>

<!-- Robots solo en SingleItem y Homepage -->
<b:with value='data:view.isHomepage or data:view.isSingleItem ? "index,follow" : "noindex,nofollow"' var='pagefollow'>
   <meta expr:content='data:blog.isMobile ? "noindex,noarchive" : data:pagefollow' name='robots'/>
   <b:if cond='data:pagefollow == "index,follow"'>
      <meta content='noodp,noydir' name='robots'/>
   </b:if>
</b:with>

&lt;!--</head>--&gt;&lt;/head&gt;

<body>

<!-- HTML -->
<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>
<!-- Fin HTML -->

&lt;!--</body>--&gt;&lt;/body&gt;
<b:else/>
<!-- Fin de Mantenimiento -->

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

</b:if>

Guardamos los cambios y listo.

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.

Entradas que pueden interesarte

Entradas más recientes Entradas antiguas