Comment

💬 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 = ' Belum ada komentar.

'; 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 += ` ${authorName} ${published} ${content} `; }

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 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 = ' Gagal memuat komentar (Kesalahan script).

'; }; /* 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 ============ */