Berita Kampus SIE Telkom University<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .news-section-wrapper {\r\n font-family: 'Inter', sans-serif;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 16px;\r\n width: 100%;\r\n }\r\n\r\n \/* Grid Responsif (Desktop, Tablet, Mobile) *\/\r\n .news-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n gap: 20px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n \/* News Card Item *\/\r\n .news-card {\r\n display: flex;\r\n flex-direction: column;\r\n background: #fff;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\r\n transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n height: 100%;\r\n }\r\n\r\n .news-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 6px 16px rgba(0,0,0,0.1);\r\n }\r\n\r\n .news-thumbnail-link {\r\n width: 100%;\r\n aspect-ratio: 16 \/ 9;\r\n overflow: hidden;\r\n display: block;\r\n background-color: #f0f0f0;\r\n }\r\n\r\n .news-thumbnail {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n .news-content {\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n }\r\n\r\n .news-title {\r\n margin: 0 0 10px 0;\r\n font-size: 15px;\r\n font-weight: 700;\r\n line-height: 1.4;\r\n }\r\n\r\n .news-title a {\r\n color: #0f733d;\r\n text-decoration: none;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .news-title a:hover {\r\n color: #084926;\r\n }\r\n\r\n .news-date {\r\n font-size: 12px;\r\n color: #777;\r\n margin-bottom: 12px;\r\n margin-top: auto;\r\n }\r\n\r\n .news-readmore {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: #900c1e;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n\r\n .news-readmore:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n \/* Pagination Style Mobile Friendly *\/\r\n .news-pagination {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 6px;\r\n margin-top: 20px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .news-pagination button, \r\n .news-pagination span.dots {\r\n min-width: 40px;\r\n height: 40px;\r\n padding: 0 6px;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n font-family: inherit;\r\n box-sizing: border-box;\r\n touch-action: manipulation;\r\n }\r\n\r\n .news-pagination button {\r\n background: #fff;\r\n border: 1px solid #ddd;\r\n cursor: pointer;\r\n color: #333;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .news-pagination button:hover:not(:disabled) {\r\n background: #0f733d;\r\n color: #fff;\r\n border-color: #0f733d;\r\n }\r\n\r\n .news-pagination button.active {\r\n background: #0f733d;\r\n color: #fff;\r\n border-color: #0f733d;\r\n font-weight: 700;\r\n }\r\n\r\n .news-pagination button:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n }\r\n\r\n .news-pagination span.dots {\r\n color: #888;\r\n user-select: none;\r\n min-width: 24px;\r\n }\r\n\r\n .news-loading {\r\n text-align: center;\r\n grid-column: 1 \/ -1;\r\n padding: 40px 10px;\r\n color: #666;\r\n font-size: 14px;\r\n }\r\n\r\n \/* Penyesuaian Khusus HP Kecil *\/\r\n @media (max-width: 480px) {\r\n .news-section-wrapper {\r\n padding: 10px;\r\n }\r\n\r\n .news-grid {\r\n grid-template-columns: 1fr;\r\n gap: 16px;\r\n }\r\n\r\n .news-title {\r\n font-size: 14px;\r\n }\r\n\r\n .news-pagination button, \r\n .news-pagination span.dots {\r\n min-width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"news-section-wrapper\">\r\n \r\n <div class=\"news-grid\" id=\"newsContainer\">\r\n <div class=\"news-loading\">Memuat berita...<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"news-pagination\" id=\"paginationContainer\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n const WORDPRESS_URL = 'https:\/\/sie.telkomuniversity.ac.id'; \r\n const CATEGORY_SLUG = 'berita-kampus'; \r\n const POSTS_PER_PAGE = 18; \/\/ Diubah menjadi 18 berita per halaman\r\n \r\n let currentPage = 1;\r\n let totalPages = 1;\r\n\r\n async function fetchPosts(page = 1) {\r\n const container = document.getElementById('newsContainer');\r\n const pagination = document.getElementById('paginationContainer');\r\n \r\n container.innerHTML = '<div class=\"news-loading\">Memuat berita...<\/div>';\r\n\r\n const endpoint = `${WORDPRESS_URL}\/wp-json\/wp\/v2\/posts?_embed&category_name=${CATEGORY_SLUG}&per_page=${POSTS_PER_PAGE}&page=${page}`;\r\n\r\n try {\r\n const response = await fetch(endpoint);\r\n \r\n if (!response.ok) throw new Error('Gagal mengambil data');\r\n\r\n totalPages = parseInt(response.headers.get('X-WP-TotalPages')) || 1;\r\n const posts = await response.json();\r\n\r\n renderPosts(posts);\r\n renderPagination();\r\n } catch (error) {\r\n container.innerHTML = `<div class=\"news-loading\">Gagal memuat berita dari server.<\/div>`;\r\n if (pagination) pagination.innerHTML = '';\r\n }\r\n }\r\n\r\n function renderPosts(posts) {\r\n const container = document.getElementById('newsContainer');\r\n \r\n if (posts.length === 0) {\r\n container.innerHTML = '<div class=\"news-loading\">Belum ada berita di kategori ini.<\/div>';\r\n return;\r\n }\r\n\r\n container.innerHTML = posts.map(post => {\r\n let imageSrc = 'https:\/\/via.placeholder.com\/600x400?text=No+Image';\r\n if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\r\n const media = post._embedded['wp:featuredmedia'][0];\r\n imageSrc = media.media_details?.sizes?.medium_large?.source_url || media.source_url;\r\n }\r\n\r\n const postDate = new Date(post.date).toLocaleDateString('en-US', {\r\n year: 'numeric',\r\n month: 'long',\r\n day: 'numeric'\r\n });\r\n\r\n return `\r\n <article class=\"news-card\">\r\n <a href=\"${post.link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"news-thumbnail-link\">\r\n <img decoding=\"async\" src=\"${imageSrc}\" alt=\"${post.title.rendered}\" class=\"news-thumbnail\" loading=\"lazy\">\r\n <\/a>\r\n <div class=\"news-content\">\r\n <h3 class=\"news-title\">\r\n <a href=\"${post.link}\" target=\"_blank\" rel=\"noopener noreferrer\">${post.title.rendered}<\/a>\r\n <\/h3>\r\n <div class=\"news-date\">${postDate}<\/div>\r\n <a href=\"${post.link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"news-readmore\">Read More →<\/a>\r\n <\/div>\r\n <\/article>\r\n `;\r\n }).join('');\r\n }\r\n\r\n function renderPagination() {\r\n const pagination = document.getElementById('paginationContainer');\r\n if (!pagination || totalPages <= 1) {\r\n if (pagination) pagination.innerHTML = '';\r\n return;\r\n }\r\n\r\n let html = `<button id=\"prevBtn\" ${currentPage === 1 ? 'disabled' : ''}>«<\/button>`;\r\n\r\n const isMobile = window.innerWidth <= 480;\r\n const delta = isMobile ? 0 : 1; \r\n \r\n let range = [];\r\n\r\n for (let i = 1; i <= totalPages; i++) {\r\n if (i === 1 || i === totalPages || (i >= currentPage - delta && i <= currentPage + delta)) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n let lastItem = 0;\r\n for (let i of range) {\r\n if (lastItem) {\r\n if (i - lastItem === 2) {\r\n html += `<button class=\"page-num ${lastItem + 1 === currentPage ? 'active' : ''}\" data-page=\"${lastItem + 1}\">${lastItem + 1}<\/button>`;\r\n } else if (i - lastItem > 2) {\r\n html += `<span class=\"dots\">…<\/span>`;\r\n }\r\n }\r\n \r\n html += `<button class=\"page-num ${i === currentPage ? 'active' : ''}\" data-page=\"${i}\">${i}<\/button>`;\r\n lastItem = i;\r\n }\r\n\r\n html += `<button id=\"nextBtn\" ${currentPage === totalPages ? 'disabled' : ''}>»<\/button>`;\r\n\r\n pagination.innerHTML = html;\r\n }\r\n\r\n function initEvents() {\r\n const pagination = document.getElementById('paginationContainer');\r\n if (!pagination) return;\r\n\r\n pagination.addEventListener('click', (e) => {\r\n const target = e.target;\r\n \r\n if (target.classList.contains('page-num')) {\r\n const page = parseInt(target.getAttribute('data-page'));\r\n if (page !== currentPage) {\r\n currentPage = page;\r\n fetchPosts(currentPage);\r\n window.scrollTo({ top: document.querySelector('.news-section-wrapper').offsetTop - 20, behavior: 'smooth' });\r\n }\r\n } else if (target.id === 'prevBtn' && currentPage > 1) {\r\n currentPage--;\r\n fetchPosts(currentPage);\r\n window.scrollTo({ top: document.querySelector('.news-section-wrapper').offsetTop - 20, behavior: 'smooth' });\r\n } else if (target.id === 'nextBtn' && currentPage < totalPages) {\r\n currentPage++;\r\n fetchPosts(currentPage);\r\n window.scrollTo({ top: document.querySelector('.news-section-wrapper').offsetTop - 20, behavior: 'smooth' });\r\n }\r\n });\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', () => {\r\n fetchPosts(currentPage);\r\n initEvents();\r\n });\r\n } else {\r\n fetchPosts(currentPage);\r\n initEvents();\r\n }\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Berita Fakultas Pusat informasi dan publikasi terbaru mengenai kegiatan serta perkembangan Fakultas. Berita Kampus SIE Telkom University Memuat berita…<\/p>\n","protected":false},"author":44,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-52788","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sie.telkomuniversity.ac.id\/id\/wp-json\/wp\/v2\/pages\/52788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sie.telkomuniversity.ac.id\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sie.telkomuniversity.ac.id\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sie.telkomuniversity.ac.id\/id\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/sie.telkomuniversity.ac.id\/id\/wp-json\/wp\/v2\/comments?post=52788"}],"version-history":[{"count":14,"href":"https:\/\/sie.telkomuniversity.ac.id\/id\/wp-json\/wp\/v2\/pages\/52788\/revisions"}],"predecessor-version":[{"id":57562,"href":"https:\/\/sie.telkomuniversity.ac.id\/id\/wp-json\/wp\/v2\/pages\/52788\/revisions\/57562"}],"wp:attachment":[{"href":"https:\/\/sie.telkomuniversity.ac.id\/id\/wp-json\/wp\/v2\/media?parent=52788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}