Modo mantenimiento para Blogger

Modo mantenimiento para Blogger Modo mantenimiento de wordpress para Blogger

Demostración Repositorio

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:


<!-- Under.css v1.0.0 -->
<b:if cond='data:blog.title == "mant" and !data:view.isPreview and not data:view.isPreview and not data:view.isLayoutMode'>
<b:tag name='head'>
<!-- Meta -->
<meta expr:charset='data:blog.encoding'/>
<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/necolas/normalize.css@8/normalize.min.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.isHomepage or data:view.isSingleItem'>
  <meta content='index,follow' name='robots'/>
<b:else/>
  <meta content='noindex,nofollow' name='robots'/>
</b:if>
</b:tag>

<b:tag name='body'>
<!-- HTML -->
<div class='under'>
  <header class='under__content'>
    <h1 class='under__title'>Mantenimiento</h1>
    <div class='under__text'>Escribe tu mensaje aquí</div>
  </header>
  <footer class='under__footer'>
    <a href='#facebook' target='_blank'><i class="fab fa-facebook-f"/></a>
    <a href='#twitter' target='_blank'><i class="fab fa-twitter"/></a>
    <a href='#Google' target='_blank'><i class="fab fa-google"/></a>
  </footer>
  <b:loop values='["wave","wave wave2","wave wave3"]' var='l'><div expr:class='data:l'/></b:loop>
</div>
</b:tag>
<b:else/>

Del codigo anterior reemplaza el texto y los enlaces sociales. Además también puedes agregar mas botones utilizando iconos de fontawesome. Una vez realizado busca </html> y justo arriba pega el siguiente código:


</b:if>

Guardamos los cambios y listo. Si tienes problemas para entender estos pasos te recomiendo ver el video de configuración que realicé para este aporte.


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.


data:blog.title == "mant" 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 mant, si esto se cumple verificamos que la página actual sea distinta a la vista previa, pero también que no sea la vista previa y que tampoco sea el panel de diseño. Esta condición devuelve verdadero si todo se cumple.


Uso básico

Para iniciar el modo de mantenimiento vamos a ir a nuestro panel de blogger, Configuración > Lo básico y cambiamos el título de nuestro blog por la palabra "mant" 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 podemos 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 mant funciona como el "switch" que activa este modo, si prefieres usar otra en su lugar, busca el siguiente codigo:


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

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


Redes sociales

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


<a href='#facebook' target='_blank'><i class="fab fa-facebook-f"/></a>
<a href='#twitter' target='_blank'><i class="fab fa-twitter"/></a>
<a href='#Google' target='_blank'><i class="fab fa-google"/></a>

También puedes agregar nuevos botones siguiendo el mismo ejemplo y utilizando iconos de fontawesome por ejemplo:


<a href='#url' target='_blank'><i class="fab fa-instagram"/></a>

Fondos

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


<style>/*<![CDATA[*/
/*
=> Personalizar
*/
/* Wave
--------------------------------------------*/
.wave {
  background: #000; /*color de fondo*/
}
/* Under
--------------------------------------------*/
.under {
  background-color: #061c2d;
}
/*]]>*/</style>

Puedes editar el color de fondo principal y el color de fondo de la animación, mismas que pertenecen a un pen que compartí anteriormente por mi pagina de facebook.


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.

Quizás te interese