A veces necesitamos realizar cambios en el diseño, actualizar o corregir contenido, entre otros ajustes. Pero como sabemos, Blogger no cuenta con un modo mantenimiento incorporado. En este tutorial, te mostraré cómo poner tu blog de Blogger en modo mantenimiento.
Sobre el modo mantenimiento
Este modo consiste en una página temporal que se muestra a los visitantes, en donde se puede incluir información sobre los cambios que se están realizando y cuándo se espera que el sitio vuelva a estar en línea. Entre los beneficios de usar este modo tenemos:
- Proporciona información: Permite informar a los visitantes sobre lo que se está haciendo y cuándo el sitio web volverá estar disponible.
- Aumenta la expectativa: Si los cambios son grandes, puedes despertar la curiosidad de los usuarios, lo que los alentará a regresar.
- Profesionalismo: Muestra que el sitio web está cuidado y actualizado.
- Ahorra tiempo: Puedes trabajar directamente en el blog principal sin tener que crear blogs de prueba, lo que te ahorra hacer lo mismo dos veces.
Instalar
Antes de empezar realiza una copia de seguridad de tu plantilla actual. Recuerda que editar el código XML de un tema de Blogger puede causar problemas si no se hace correctamente, por lo tanto es importante tener una copia de seguridad para poder restaurarla en caso de que algo salga mal.
Paso 1.- Ve a tu panel de administración de Blogger, dirígete a la sección Temas y Haz clic en el botón Editar HTML. Luego, busca la etiqueta <head> (está casi al inicio del código) y pega el siguiente código justo arriba:
<b:with value='false' var='maintenance'>
<b:if cond='!data:maintenance or (data:view.isLayoutMode or data:view.isPreview) or (data:blog.view and data:blog.view == data:maintenance)'>Paso 2.- Busca la etiqueta </body> (está prácticamente al final del tema) y pega el siguiente código justo debajo de la misma:
<!-- Inicio mantenimiento -->
<b:else/>
<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='//cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css' rel='stylesheet'/>
<link href='//cdn.jsdelivr.net/gh/zkreations/data/static/css/maintenance.min.css' rel='stylesheet'/>
</b:tag>
<b:tag name='body'>
<div class='mainte'>
<div class='mainte-content'>
<h1 class='mainte-title'>Titulo de mantenimiento</h1>
<div class='mainte-text'>Texto informativo del mantenimiento</div>
<div class='mainte-social'>
<!-- Ejemplo de botón social | Mas iconos en: meteoricons.com -->
<a class='mainte-social-item' href='#url'>
<svg class='i i-x' viewBox='0 0 24 24'>
<path d='m3 21 7.5-7.5m3-3L21 3M8 3H3l13 18h5Z'/>
</svg>
</a><!-- Fin ejemplo botón social -->
</div>
</div>
</div>
<div class='wave'><div class='wave-item'/></div>
</b:tag>
</b:if><!-- Fin de la condición -->
<!-- Agrega el parámetro view a los enlaces cuando el modo mantenimiento está activo -->
<b:if cond='data:maintenance'>
<script>//<![CDATA[
const initMaintenance = (() => {
const viewParam = new URLSearchParams(window.location.search).get('view')
document.querySelectorAll('a').forEach(link => {
const url = new URL(link.href, window.location.origin)
url.searchParams.set('view', viewParam)
link.href = url.toString()
})
})();//]]>
</script>
</b:if>
</b:with>
<!-- Fin mantenimiento -->Y listo, tu blog ahora cuenta con una nueva característica que te permitirá poner tu blog en modo mantenimiento.
Modo de uso
Tú como administrador, puedes ver el blog en todas las opciones de vista que posees desde el panel de administración de Blogger. Por lo tanto, podras acceder normalmente a la creación de entradas y páginas, editar la plantilla, personalizar el blog, editar widgets y demás opciones.
Para activar el modo mantenimiento, simplemente revisa la primera linea de código que agregamos al principio del tema, y cambia el valor de false a true. Guarda los cambios y listo, tu blog estará en modo mantenimiento:
<b:with value='true' var='maintenance'>Contraseña de acceso
Si deseas acceder a tu blog mientras se encuentra en modo mantenimiento, puedes hacerlo usando el parámetro view. Por ejemplo, si la URL de tu blog es https://ejemplo.blogspot.com, deberás agregar ?view=CLAVE al final, en donde CLAVE es una contraseña compuesta unicamente por letras, que pueden ser mayúsculas o minúsculas, sin espacios y entre comillas dobles.
<b:with value='"EjemploClave"' var='maintenance'>https://ejemplo.blogspot.com/?view=EjemploClaveAl visitar tu blog usando tu clave, podrás navegar por todas las páginas con normalidad. Esto es muy útil cuando los cambios que estás realizando requieren una vista previa más amplia y real de lo que verá el usuario cuando desactives el modo mantenimiento.
Aviso: Es muy importancia que la clave solo contenga letras, además las comillas dobles son estrictamente necesarias.
Desactivar el modo mantenimiento
Cambia cualquier valor que hayas puesto por false, no o "", de esta manera el modo mantenimiento se desactivará y tu blog volverá a estar disponible para todos:
<b:with value='false' var='maintenance'>Personalización
Me he esforzado por realizar un diseño muy sencillo con la menor cantidad de código posible para que no sea confuso de editar. Para facilitar la personalización, he dejado variables CSS que puedes modificar a tu gusto. Si deseas cambiar el color de fondo, el color del texto, el tamaño de la fuente, entre otros, puedes hacerlo directamente en el código CSS.
:root {
--mt-accent: #14b8a6;
--mt-bg: #0a0a0a;
--mt-color-title: #fff;
--mt-color-text: #fff;
--mt-title-size: 2rem;
--mt-text-size: 1.125rem;
--mt-icon-size: 26px;
--mt-content: 500px;
--mt-gap: 1.5rem;
--mt-transition: .3s;
}Desarrollador avanzado
Si posees conocimientos suficientes para crear tu propio diseño del modo mantenimiento, puedes omitir el código del paso 2 en la instalación y en su lugar usar el siguiente código:
<!-- Inicio mantenimiento -->
<b:else/>
<b:tag name='head'>
<title>Mantenimiento</title>
<meta content='width=device-width,initial-scale=1' name='viewport'/>
<!-- Tus propias etiquetas meta -->
</b:tag>
<b:tag name='body'>
<!-- Tu propio diseño -->
</b:tag>
</b:if><!-- Fin de la condición -->
<!-- Agrega el parámetro view a los enlaces cuando el modo mantenimiento está activo -->
<b:if cond='data:maintenance'>
<!-- Tu propio script para obtener el parámetro view -->
</b:if>
</b:with>
<!-- Fin mantenimiento -->Conclusión
El modo mantenimiento es una característica que podemos usar para mantener informados a nuestros usuarios sobre los cambios en los que estemos trabajando. Con este tutorial, podrás poner tu blog de Blogger en modo mantenimiento de forma sencilla y sin necesidad de cerrarlo al público. Si tienes alguna inquietud o sugerencia, no dudes en dejar un comentario, siempre me tomo el tiempo de leer todos. Muchas gracias por pasar.
