Cómo agregar un widget de comentarios recientes en Blogger

Es momento de renovar y actualizar los gadgets widgets de Blogger, para ello empezamos con un truco muy fácil de realizar como lo es agregar un widget de comentarios recientes en Blogger. El nuevo gadget de comentarios recientes se lo puede agregar en un widget de Blogger y ubicarlo donde mejor le parezca.

El nuevo widget de comentarios recientes V-3 es totalmente responsive, ademas tiene excelentes características al puro estilo de Material design

Puede ver su demostración en el sidebar de este blog

Empezamos

1.- Ir a Blogger.com

2.- Un clic en Diseño

3.- Un clic en Agregar un gadget

4.- Un clic en HTML/Javascript

5.- Inserte las siguientes lineas de código

<!-- Widget Comentarios Modernos - v3.0 (Optimizado) -->
<style type="text/css">
/* Contenedor principal con aislamiento */
#rc-widget-wrapper {
    all: initial; /* Reset para evitar herencias molestas de la plantilla */
    display: block;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    max-width: 100%;
}

.rc-list {
    list-style: none;
    margin: 0;
    padding: 10px;
}

/* Burbuja de comentario */
.rc-item {
    position: relative;
    background: #f1f7ff; /* AliceBlue moderno */
    border-radius: 12px;
    padding: 15px 15px 15px 25px;
    margin: 0 0 35px 60px; /* Espacio para el avatar a la izquierda */
    border: 1px solid #e1e9f5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Triángulo de la burbuja */
.rc-item::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -12px;
    border-width: 8px 12px 8px 0;
    border-style: solid;
    border-color: transparent #f1f7ff transparent transparent;
}

/* Avatar flotante ultra-estable */
.rc-avatar-container {
    position: absolute;
    left: -75px;
    top: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e0e0e0; /* Color base para evitar titileo */
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 2;
}

.rc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease; /* Aparición suave */
}

/* Nombre del autor */
.rc-author {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
    text-decoration: none;
}

/* Cuerpo del comentario */
.rc-body {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #4a5568;
    font-style: italic;
    word-wrap: break-word;
}

/* Link inferior */
.rc-footer-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 10px;
    font-weight: 600;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.rc-footer-link:hover { color: #3182ce; }

/* Estado de carga */
.rc-loading {
    text-align: center;
    padding: 20px;
    color: #718096;
    font-size: 14px;
}
</style>

<div id="rc-widget-wrapper">
    <div id="rc-container" class="rc-list">
        <div class="rc-loading">Cargando comentarios...</div>
    </div>
</div>

<script type="text/javascript">
(function() {
    const SETTINGS = {
        num: 5,
        chars: 85,
        // Avatar oficial de Blogger/Google como fallback definitivo
        defaultAvatar: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT8Q047n67YUBtV9WQ3-ttrYS7HssP-m-0zwGrWwl7Mez5Hn_b2F0JZ4CGWMs9uuT_MaeTVrIkdFbyGR7okiFWk-2xD89XTaYyVqcN2AUNbjoZvuU6tjANv-A_S85fRWCDaofIebp_e3U/s1600/avatar-none.png"
    };

    async function getBloggerComments() {
        const container = document.getElementById('rc-container');
        const blogUrl = window.location.origin;
        
        try {
            const response = await fetch(`${blogUrl}/feeds/comments/default?alt=json&amp;max-results=${SETTINGS.num}`);
            const data = await response.json();
            
            if (!data.feed.entry) {
                container.innerHTML = '<div class="rc-loading">No hay comentarios nuevos.</div>';
                return;
            }

            let htmlOutput = '';

            data.feed.entry.forEach(entry => {
                const author = entry.author[0];
                const name = author.name.$t;
                let avatarUrl = SETTINGS.defaultAvatar;

                // Lógica avanzada de avatares para evitar el titileo
                if (author.gd$image &amp;&amp; author.gd$image.src &amp;&amp; !author.gd$image.src.includes('blank.gif')) {
                    avatarUrl = author.gd$image.src.replace('http://', 'https://');
                    
                    // Si es imagen de Google/Blogger, pedimos tamaño exacto para optimizar carga
                    if (avatarUrl.includes('googleusercontent.com') || avatarUrl.includes('blogspot.com')) {
                        avatarUrl = avatarUrl.replace(/\/s\d+(-c)?\//, '/s80-c/');
                        if (!avatarUrl.includes('/s80-c/')) {
                            const urlObj = new URL(avatarUrl);
                            urlObj.searchParams.set('sz', '80');
                            avatarUrl = urlObj.toString();
                        }
                    }
                }

                const link = entry.link.find(l => l.rel === 'alternate').href;
                const content = (entry.summary ? entry.summary.$t : entry.content.$t)
                                .replace(/<\/?[^>]+(>|$)/g, "")
                                .substring(0, SETTINGS.chars) + '...';

                htmlOutput += `
                    <div class="rc-item">
                        <div class="rc-avatar-container">
                            <img src="${avatarUrl}" 
                                 class="rc-img" 
                                 onload="this.style.opacity='1'" 
                                 onerror="this.src='${SETTINGS.defaultAvatar}'; this.style.opacity='1';"
                                 alt="">
                        </div>
                        <a href="${link}" class="rc-author">${name}</a>
                        <span class="rc-body">"${content}"</span>
                        <a href="${link}" class="rc-footer-link">Ver comentario →</a>
                    </div>
                `;
            });

            container.innerHTML = htmlOutput;

        } catch (error) {
            console.error("RC Error:", error);
            container.innerHTML = '<div class="rc-loading">Error al conectar con el feed.</div>';
        }
    }

    // Ejecución controlada
    if (document.readyState === 'complete') {
        getBloggerComments();
    } else {
        window.addEventListener('load', getBloggerComments);
    }
})();
</script>

6.- Realice los cambios respectivos:

Si necesita aumentar el número de comentarios puede cambiar el número 5 por el número de comentarios recientes que necesite mostrar: 

num: 5

7.- Un clic en Guardar

Eso es todo, ahora ubique su nuevo Gadget de comentarios recientes al puro estilo de Material design donde usted quiera

Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Caja de comentariosComoWidgets para BloggerWidgets y Plugins

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.