Popular Post

Popular Posts - Khairmedia * { box-sizing: border-box; } body { font-family: Helvetica, Arial, sans-serif; font-size: 15px; color: #555; margin: 0; padding: 0; background: transparent; line-height: 1.7; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } /* ===== WRAPPER ===== */ .pp-wrap { max-width: 760px; margin: 0 auto; padding: 10px 0; } /* ===== JUDUL WIDGET ===== */ .pp-heading { font-size: 20px; font-weight: 700; color: #111; margin: 0 0 14px; } /* ===== FILTER TOMBOL ===== */ .pp-filter { display: flex; gap: 8px; margin-bottom: 18px; } .pp-filter button { padding: 6px 18px; border: 1.5px solid #ddd; border-radius: 20px; background: #fff; font-size: 13px; font-weight: 700; color: #555; cursor: pointer; transition: all .2s; outline: none; } .pp-filter button.active { background: #111; color: #fff; border-color: #111; } .pp-filter button:hover:not(.active) { border-color: #888; color: #111; } /* ===== LIST POST ===== */ .pp-list { list-style: none; margin: 0; padding: 0; } /* ===== ITEM ===== */ .pp-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0f0f0; align-items: flex-start; } .pp-item:first-child { padding-top: 0; } .pp-item:last-child { border-bottom: none; padding-bottom: 0; } /* Thumbnail */ .pp-thumb-wrap { flex-shrink: 0; } .pp-thumb { width: 155px; height: 98px; object-fit: cover; border-radius: 6px; display: block; background: #eee; } .pp-thumb-blank { width: 155px; height: 98px; border-radius: 6px; background: #e8ebed; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 26px; } /* Konten */ .pp-body { flex: 1; min-width: 0; } .pp-title { font-size: 16px; font-weight: 700; color: #111; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; margin-bottom: 6px; transition: color .2s; } .pp-title:hover { color: #ea0202; } .pp-snippet { font-size: 13.5px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; } .pp-meta { font-size: 12px; color: #aaa; margin-top: 5px; } /* ===== SKELETON ===== */ .pp-skeleton { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0f0f0; align-items: flex-start; } .pp-skeleton:first-child { padding-top: 0; } .sk { background: linear-gradient(90deg,#ebebeb 25%,#f5f5f5 50%,#ebebeb 75%); background-size: 400% 100%; animation: sk 1.3s infinite; border-radius: 5px; } @keyframes sk { 0%{background-position:100% 0} 100%{background-position:-100% 0} } .sk-img { width:155px; min-width:155px; height:98px; border-radius:6px; } .sk-body { flex:1; padding-top:4px; } .sk-line { height:14px; margin-bottom:9px; } .sk-t1 { width:95%; } .sk-t2 { width:75%; } .sk-s1 { width:100%; height:12px; } .sk-s2 { width:80%; height:12px; } /* ===== EMPTY / ERROR ===== */ .pp-notice { text-align: center; padding: 36px 0; color: #aaa; font-size: 14px; } .pp-notice span { font-size: 32px; display: block; margin-bottom: 8px; } /* ===== RESPONSIVE ===== */ @media (max-width: 480px) { .pp-thumb, .pp-thumb-blank, .sk-img { width:105px; min-width:105px; height:70px; } .pp-title { font-size:14.5px; } } Popular Posts Last 7 Days Last 30 Days /* ================================================================ KONFIGURASI ================================================================ */ var CFG = { blogUrl : 'https://www.khairmedia.web.id', // URL blog (tanpa slash akhir) maxPosts : 10, // jumlah post per periode imgFail : 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22155%22 height=%2298%22%3E%3Crect fill=%22%23e8ebed%22 width=%22155%22 height=%2298%22/%3E%3C/svg%3E' }; /* ================================================================ HELPER ================================================================ */ function stripHtml(s) { var d = document.createElement('div'); d.innerHTML = s; return (d.textContent || d.innerText || '').replace(/\s+/g,' ').trim(); } function getThumb(entry) { // 1. media$thumbnail (Blogger) var mt = entry['media$thumbnail']; if (mt && mt.url) return mt.url.replace(/\/s\d+-c\//,'/s400-c/').replace(/=s\d+/,'=s400'); // 2. pertama di konten var raw = (entry.content && entry.content.$t) || (entry.summary && entry.summary.$t) || ''; var m = raw.match(/ ]+src=["']([^"'>]+)["']/i); if (m) return m[1]; return null; } function formatDate(published) { // published.$t = "2024-11-05T10:00:00+07:00" var d = new Date(published.$t); var opts = { day:'numeric', month:'short', year:'numeric' }; return d.toLocaleDateString('id-ID', opts); } function getLink(entry) { var links = entry.link || []; for (var i=0; i ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' '; } document.getElementById('pp-list').innerHTML = h; } function renderPosts(entries) { var list = document.getElementById('pp-list'); if (!entries || !entries.length) { list.innerHTML = ' 📭 Belum ada artikel dalam periode ini. '; return; } var h = ''; entries.forEach(function(e) { var title = (e.title && e.title.$t) || '(Tanpa Judul)'; var url = getLink(e); var thumb = getThumb(e); var snippet = ''; var raw = (e.summary && e.summary.$t) || (e.content && e.content.$t) || ''; if (raw) snippet = stripHtml(raw).substring(0, 160) + '...'; var date = (e.published) ? formatDate(e.published) : ''; var imgHtml = thumb ? ' ' : ' 🖼 '; h += ' ' + ' '+imgHtml+' ' + ' ' + ' '+title+' ' + (snippet ? ' '+snippet+' ' : '') + (date ? ' '+date+' ' : '') + ' ' + ' '; }); list.innerHTML = h; } function renderError() { document.getElementById('pp-list').innerHTML = ' ⚠️ Gagal memuat artikel. Coba refresh halaman. '; } /* ================================================================ FETCH via JSONP (Blogger Feed API) ================================================================ */ var _cbName = null; var _cbTimer = null; function fetchPosts(days) { // Batalkan request sebelumnya if (_cbName && window[_cbName]) { delete window[_cbName]; clearTimeout(_cbTimer); var old = document.getElementById('_ppScript'); if (old) old.parentNode.removeChild(old); } renderSkeleton(5); // Hitung tanggal mulai var since = new Date(); since.setDate(since.getDate() - days); since.setHours(0,0,0,0); var params = [ 'alt=json', 'max-results=' + CFG.maxPosts, 'orderby=published', 'published-min=' + since.toISOString() ].join('&'); _cbName = '_ppCb' + Date.now(); window[_cbName] = function(data) { clearTimeout(_cbTimer); delete window[_cbName]; var s = document.getElementById('_ppScript'); if (s) s.parentNode.removeChild(s); try { var entries = (data.feed && data.feed.entry) ? data.feed.entry : []; renderPosts(entries); } catch(err) { renderError(); } }; _cbTimer = setTimeout(function() { if (window[_cbName]) { delete window[_cbName]; renderError(); } }, 9000); var script = document.createElement('script'); script.id = '_ppScript'; script.src = CFG.blogUrl + '/feeds/posts/default?' + params + '&callback=' + _cbName; script.onerror = function() { renderError(); }; document.head.appendChild(script); } /* ================================================================ INIT ================================================================ */ // Tombol filter document.querySelectorAll('.pp-filter button').forEach(function(btn) { btn.addEventListener('click', function() { document.querySelectorAll('.pp-filter button').forEach(function(b){ b.classList.remove('active'); }); btn.classList.add('active'); fetchPosts(parseInt(btn.dataset.days, 10)); }); }); // Load awal: Last 7 Days fetchPosts(7);

Khair Media

Halaman

Iklan Billboard

Popular Post

Popular Posts

Halaman

Copyright ©