Cómo Usar los Códigos de Redirección y Carga en Páginas 404 en Blogger

 

En este post, te explicamos cómo puedes utilizar dos fragmentos de código en tu blog de Blogger para mejorar la experiencia de usuario. Uno de estos códigos redirige URLs con fechas a un formato más limpio, y el otro mejora la página 404 mostrando un mensaje de "Cargando..." por unos segundos antes de mostrar el contenido de error.

1. Redirigir URLs con Fechas a un Formato Más Limpio

En Blogger, las URLs de las publicaciones suelen incluir la fecha, lo cual puede hacer que la dirección web se vea menos amigable para los usuarios. Con este código, puedes quitar la fecha de la URL de manera visual, redirigiendo al usuario a una versión más limpia de la misma página.

Código JavaScript para Quitar la Fecha de la URL:

html
<script>
document.addEventListener("DOMContentLoaded", function() {
    var url = window.location.pathname;
    var pattern = /^\/\d{4}\/\d{2}\//; // Verifica si la URL ya tiene la fecha

    if (pattern.test(url)) {
        // Si la URL tiene fecha, se la quitamos visualmente
        var newUrl = url.replace(/\/\d{4}\/\d{2}\//, "/");
        window.history.replaceState(null, "", newUrl);
    } else {
        // Si la URL NO tiene fecha, buscamos la correcta
        fetch(window.location.origin + "/feeds/posts/summary?alt=json&max-results=500")
        .then(response => response.json())
        .then(data => {
            var posts = data.feed.entry || [];
            var postFound = false;

            posts.forEach(function(post) {
                var postUrl = new URL(post.link.find(link => link.rel === "alternate").href);
                var postPath = postUrl.pathname;

                if (postPath.endsWith(url)) {
                    postFound = true;
                    window.location.replace(postPath);
                }
            });

            if (!postFound) {
                console.warn("Publicación no encontrada en el feed.");
            }
        })
        .catch(error => console.error("Error al obtener el feed:", error));
    }
});
</script>

Explicación:

• Reemplazo de URL: El código primero verifica si la URL contiene una fecha (en formato /aaaa/mm/). Si es así, elimina esa parte y muestra una versión más limpia de la URL.
• Redirección Automática: Si la URL no tiene fecha, el código utiliza una solicitud fetch para obtener el feed de tu blog y redirige automáticamente al usuario a la URL correcta si se encuentra en el feed.

¿Cómo usar este código?

1. Abre tu Blogger y ve a Tema > Editar HTML.
2. Pega este código al final de tu archivo HTML, antes de la etiqueta </body>.
3. Guarda los cambios. Ahora, cuando los usuarios accedan a URLs con fecha, se les redirigirá automáticamente a una versión limpia de la URL.

2. Mejorar la Página 404 Mostrando un Mensaje de "Cargando..."

La página 404 es aquella que se muestra cuando un usuario intenta acceder a una página que no existe. Para mejorar la experiencia de usuario, puedes usar el siguiente código para mostrar un mensaje de "Cargando..." mientras se carga la página de error, y después de 5 segundos, mostrar el contenido normal de la página 404.

Código para Mostrar un Mensaje de Cargando en la Página 404:

html
<b:if cond='data:view.isError'>
    <!-- Pantalla de carga que se mostrará mientras se carga la página -->
    <div id="loading-404" style="position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:bold;">
        Cargando...
    </div>
    
    <div class='errorWrap' style="display:none;">
        <h3>404</h3>
        <h4><data:messages.theresNothingHere/></h4>
        <p><data:navMessage/></p>
        <a class='homepage' expr:href='data:blog.homepageUrl'><data:messages.home/></a>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Si estamos en la página 404
            var errorTitle = document.querySelector("title");
            if (errorTitle && errorTitle.innerText.includes("404")) {
                // Espera 5 segundos antes de mostrar el contenido real
                setTimeout(function() {
                    // Oculta el cargador
                    document.getElementById("loading-404").style.display = "none";
                    // Muestra el contenido de error 404
                    document.querySelector(".errorWrap").style.display = "block";
                }, 5000); // 5 segundos de espera
            }
        });
    </script>
</b:if>

Explicación:

• Pantalla de Carga: El código crea un div con el mensaje "Cargando..." que ocupa toda la pantalla. Este div se muestra inicialmente.
• Esperar 5 Segundos: Después de que la página 404 se haya cargado, el código espera 5 segundos antes de mostrar el contenido real de la página de error 404.
• Mostrar el Contenido de Error: Después de los 5 segundos, el mensaje de carga se oculta y se muestra el contenido real de la página 404.

¿Cómo usar este código?

1. Entra en el panel de Tema > Editar HTML de Blogger.
2. Busca la etiqueta <b:if cond='data:view.isError'> dentro del archivo de tu plantilla.
3. Pega el código dentro de esa etiqueta.
4. Guarda los cambios. Ahora, los usuarios que lleguen a una página 404 verán primero el mensaje "Cargando..." antes de ver el contenido del error.

---

Conclusión

Con estos dos fragmentos de código, podrás mejorar la usabilidad y experiencia de tus visitantes en Blogger. El primer código elimina la fecha de la URL para hacerla más limpia y amigable, mientras que el segundo mejora la página de error 404 mostrando un mensaje de carga antes de mostrar el contenido del error. ¡Prueba ambos en tu blog y verás cómo mejora la interacción con los usuarios!