💬 Komentar Terbaru di Blog const blogUrl = 'https://www.aurealisa.web.id'; // Ganti dengan URL blog Anda const maxComments = 10; // Fungsi untuk menangani data komentar yang dikembalikan oleh JSON-P function handleComments(data) { const commentsList = document.getElementById('comments-list'); // Pastikan data dan entri ada if (!data || !data.feed || !data.feed.entry || data.feed.entry.length === 0) { commentsList.innerHTML = '<p>Belum ada komentar.</p>'; return; } const entries = data.feed.entry; let html = ''; for (let i = 0; i < Math.min(entries.length, maxComments); i++) { const entry = entries[i]; // Ambil data dari struktur JSON const authorName = entry.author[0].name.$t; const published = new Date(entry.published.$t).toLocaleString(); // Konten komentar (biasanya di summary, tapi menggunakan $t) const content = entry.summary ? entry.summary.$t : (entry.content ? entry.content.$t : '...'); // Ambil URL Avatar (di Blogger JSON feed biasanya ada di $t dari media$thumbnail) // Perhatikan ini mungkin berbeda tergantung feed-nya, ini adalah tebakan terbaik const imgSrc = entry.author[0].gd$image ? entry.author[0].gd$image.src : 'https://www.gravatar.com/avatar/?d=mp&s=40'; // Ambil link profil const profileLink = entry.author[0].uri ? entry.author[0].uri.$t : '#'; // Ambil link artikel let postLink = '#'; if (entry.link) { for (let link of entry.link) { if (link.rel === 'alternate') { postLink = link.href; break; } } } // HTML untuk setiap komentar html += ` <div class="comment-widget" onclick="window.location.href='${postLink}'"> <div class="comment-header"> <img data-src="${imgSrc.replace('s45', 's40-c')}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAABJJREFUCJlj/P//PwMMMDEgAQBIBgMBiYFHzwAAAABJRU5ErkJggg==" alt="${authorName}" class="lazyload comment-avatar"> <div class="comment-meta"> <div class="comment-author"><a href="${profileLink}" target="_blank" rel="nofollow">${authorName}</a></div> <div class="comment-time">${published}</div> </div> </div> <div class="comment-body">${content}</div> </div> `; } commentsList.innerHTML = html; } // 1. Buat URL JSON-P. Callback harus sesuai dengan nama fungsi Anda. const jsonpUrl = `${blogUrl}/feeds/comments/default?alt=json-in-script&orderby=published&max-results=${maxComments}&callback=handleComments`; // 2. Buat elemen <script> const script = document.createElement('script'); script.src = jsonpUrl; script.type = 'text/javascript'; // 3. Tambahkan ke dokumen (ini yang memicu permintaan) document.head.appendChild(script); // 4. Tambahkan penanganan error sederhana jika script gagal dimuat (misalnya URL salah) script.onerror = () => { console.error('Gagal memuat script JSON-P.'); document.getElementById('comments-list').innerHTML = '<p>Gagal memuat komentar (Kesalahan script).</p>'; }; /* Definisikan Variabel Global di root atau body (LIGHT MODE default) */ :root { --bg-widget-utama: #fff0e1; --bg-judul: #d2b48c; --bg-komentar: #ffffff; --bg-komentar-hover: #f5e8da; --teks-gelap: #4b2e17; --teks-time: #888; --border-komentar: #eee; --link-aksen: #4b2e17; } /* Terapkan Variabel pada Dark Mode */ [data-theme=dark] { --bg-widget-utama: #1e1e1e; --bg-judul: #333; --bg-komentar: #252525; --bg-komentar-hover: #3a3a3a; --teks-gelap: #ccc; /* Berubah menjadi terang */ --teks-time: #999; --border-komentar: #333; --link-aksen: #00bcd4; } /* ============ Comments Widget (Gunakan Variabel) ============ */ #comments-section { background-color: var(--bg-widget-utama); padding: 15px; border-radius: 10px; /* Tambahkan border yang warnanya ikut variabel */ border: 1px solid var(--border-komentar); } #comments-section .comments-title { background-color: var(--bg-judul); color: var(--teks-gelap); font-size: 18px; margin: 0 0 15px 0; padding: 10px; font-weight: bold; border-radius: 8px; text-align: center; /* Gunakan border statis 2px, warnanya ikut variabel */ border-bottom: 2px solid var(--border-komentar); } /* Komentar Sidebar */ #comments-list .comment-widget { background-color: var(--bg-komentar); border: 1px solid var(--border-komentar); border-radius: 8px; padding: 10px; margin-bottom: 10px; transition: background-color 0.3s; cursor: pointer; } #comments-list .comment-widget:hover { background-color: var(--bg-komentar-hover); } /* ... comment-header tetap sama ... */ .comment-author a { font-size: 14px; font-weight: bold; color: var(--link-aksen); text-decoration: none; } .comment-time { font-size: 11px; color: var(--teks-time); } .comment-body { font-size: 12px; color: var(--teks-gelap); line-height: 1.2; } /* ============ End Comments Widget ============ */