Top Bar - Follow Us & Search<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n<style>\n\n*, *::before, *::after{\n box-sizing:border-box;\n margin:0;\n padding:0;\n}\n\nbody{\n background:transparent;\n font-family:'Poppins', sans-serif;\n}\n\n\/* =====================================================\n TOP BAR\n===================================================== *\/\n.topbar-ti{\n display:flex;\n align-items:center;\n justify-content:space-between;\n\n width:100%;\n background:#3559DB;\n\n padding:14px 28px;\n\n position:relative;\n}\n\n\/* ===== FOLLOW US + ICONS (Font Awesome) ===== *\/\n.follow-us-box{\n display:flex;\n align-items:center;\n gap:12px;\n flex-wrap:wrap;\n}\n.follow-title{\n color:#fff;\n font-size:18px;\n font-weight:700;\n line-height:1.2;\n white-space:nowrap;\n}\n.social-icons{\n display:flex;\n align-items:center;\n gap:12px;\n flex-wrap:wrap;\n}\n.social-btn{\n width:40px;\n height:40px;\n background:#fff;\n border-radius:50%;\n display:flex;\n align-items:center;\n justify-content:center;\n text-decoration:none;\n transition:all .3s ease;\n flex-shrink:0;\n}\n.social-btn i{\n color:#3457d5;\n font-size:20px;\n}\n.social-btn:hover{\n transform:translateY(-3px);\n}\n\n\/* ===== TANGGAL + SEARCH (KANAN) ===== *\/\n.topbar-right{\n display:flex;\n align-items:center;\n gap:20px;\n}\n\n.topbar-date{\n color:#ffffff;\n font-size:22px;\n font-weight:400;\n white-space:nowrap;\n}\n\n.topbar-search-btn{\n background:none;\n border:none;\n cursor:pointer;\n padding:8px;\n display:flex;\n align-items:center;\n justify-content:center;\n}\n\n\/* =====================================================\n MOBILE\n===================================================== *\/\n@media (max-width:768px){\n\n .topbar-ti{\n flex-direction:column;\n align-items:center;\n gap:14px;\n\n padding:20px 20px 24px;\n }\n\n \/* tombol search nempel di pojok kanan atas *\/\n .topbar-search-btn{\n position:absolute;\n top:14px;\n right:14px;\n }\n\n .topbar-right{\n order:-1;\n justify-content:center;\n width:100%;\n }\n\n .topbar-date{\n font-size:12px;\n }\n\n .topbar-follow{\n order:1;\n flex-direction:column;\n gap:12px;\n }\n\n .topbar-label{\n font-size:14px;\n }\n\n \/* ===== FOLLOW US BOX (mobile) ===== *\/\n .follow-us-box{\n order:1;\n justify-content:center;\n text-align:center;\n gap:10px;\n width:100%;\n }\n .follow-title{\n width:100%;\n font-size:16px;\n }\n .social-icons{\n justify-content:center;\n width:100%;\n gap:10px;\n }\n .social-btn{\n width:38px;\n height:38px;\n }\n .social-btn i{\n font-size:18px;\n }\n\n}\n\n\/* Mobile kecil *\/\n@media (max-width:480px){\n .follow-title{\n font-size:15px;\n }\n .social-btn{\n width:34px;\n height:34px;\n }\n .social-btn i{\n font-size:16px;\n }\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"topbar-ti\">\n\n \n <div class=\"follow-us-box\">\n <div class=\"follow-title\">\n Follow Us :\n <\/div>\n <div class=\"social-icons\">\n <a href=\"https:\/\/instagram.com\/\" target=\"_blank\" class=\"social-btn\" aria-label=\"Instagram\">\n <i class=\"fab fa-instagram\"><\/i>\n <\/a>\n <a href=\"https:\/\/youtube.com\/\" target=\"_blank\" class=\"social-btn\" aria-label=\"YouTube\">\n <i class=\"fab fa-youtube\"><\/i>\n <\/a>\n <a href=\"https:\/\/wa.me\/6281234567890\" target=\"_blank\" class=\"social-btn\" aria-label=\"WhatsApp\">\n <i class=\"fab fa-whatsapp\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"topbar-right\">\n <span class=\"topbar-date\" id=\"topbar-datetime\"><\/span>\n <\/div>\n\n \n <button id=\"btn-search-open\" class=\"topbar-search-btn\" aria-label=\"Buka pencarian\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 20 20\">\n <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" fill=\"transparent\" stroke=\"#ffffff\" stroke-width=\"2.4\"\/>\n <line x1=\"16\" y1=\"16\" x2=\"21\" y2=\"21\" stroke=\"#ffffff\" stroke-width=\"2.4\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/button>\n\n<\/div>\n\n\n<div id=\"search-overlay\" style=\"\n display:none;\n position:fixed;\n inset:0;\n background:rgba(0,0,0,0.78);\n z-index:2147483647;\n align-items:center;\n justify-content:center;\n flex-direction:column;\n gap:28px;\n padding:20px;\n\">\n\n \n <button id=\"btn-search-close\" style=\"\n width:64px;\n height:64px;\n border:none;\n border-radius:50%;\n background:#305CDE;\n cursor:pointer;\n display:flex;\n align-items:center;\n justify-content:center;\n padding:0;\n transition:0.3s;\n \">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"34\" height=\"34\" viewBox=\"0 0 24 24\" fill=\"none\">\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" stroke=\"#ffffff\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" stroke=\"#ffffff\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/button>\n\n \n <form id=\"search-form-overlay\" method=\"get\" style=\"\n display:flex;\n align-items:center;\n width:min(760px,92vw);\n height:72px;\n background:#ffffff;\n border-radius:14px;\n overflow:hidden;\n box-shadow:0 8px 32px rgba(0,0,0,0.18);\n \">\n <input\n id=\"search-input-overlay\"\n type=\"text\"\n name=\"s\"\n placeholder=\"Search Here...\"\n autocomplete=\"off\"\n style=\"\n flex:1;\n height:100%;\n border:none;\n outline:none;\n background:transparent;\n color:#333;\n font-size:18px;\n padding:0 28px;\n \"\n >\n <button type=\"submit\" style=\"\n width:88px;\n height:100%;\n border:none;\n background:#305CDE;\n cursor:pointer;\n display:flex;\n align-items:center;\n justify-content:center;\n flex-shrink:0;\n \">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"34\" height=\"34\" viewBox=\"0 0 24 24\">\n <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" fill=\"transparent\" stroke=\"#ffffff\" stroke-width=\"2.8\"\/>\n <line x1=\"16\" y1=\"16\" x2=\"21\" y2=\"21\" stroke=\"#ffffff\" stroke-width=\"2.8\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/button>\n <\/form>\n\n<\/div>\n\n\n<style>\n\n@media (max-width:768px){\n\n #btn-search-close{\n width:56px !important;\n height:56px !important;\n }\n\n #btn-search-close svg{\n width:28px !important;\n height:28px !important;\n }\n\n #search-form-overlay{\n height:62px !important;\n }\n\n #search-input-overlay{\n font-size:15px !important;\n padding:0 18px !important;\n }\n\n #search-form-overlay button svg{\n width:28px !important;\n height:28px !important;\n }\n\n #search-overlay{\n align-items:flex-start !important;\n justify-content:flex-start !important;\n padding-top:100px !important;\n gap:16px !important;\n }\n\n}\n\n<\/style>\n\n\n<script>\n(function () {\n\n \/* =========================================\n JAM & TANGGAL BERJALAN\n ========================================= *\/\n var dtEl = document.getElementById('topbar-datetime');\n\n var bulan = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n function updateClock(){\n var now = new Date();\n\n var tanggal = String(now.getDate()).padStart(2,'0');\n var namaBulan = bulan[now.getMonth()];\n var tahun = now.getFullYear();\n\n var jam24 = now.getHours();\n var ampm = jam24 >= 12 ? 'PM' : 'AM';\n var jam12 = jam24 % 12;\n if (jam12 === 0) jam12 = 12;\n\n var menit = String(now.getMinutes()).padStart(2,'0');\n var detik = String(now.getSeconds()).padStart(2,'0');\n\n dtEl.textContent = namaBulan + ' ' + tanggal + ', ' + tahun + ' ' + jam12 + ':' + menit + ':' + detik + ampm;\n }\n\n updateClock();\n setInterval(updateClock, 1000);\n\n \/* =========================================\n BUKA \/ TUTUP SEARCH OVERLAY\n ========================================= *\/\n var btnOpen = document.getElementById('btn-search-open');\n var btnClose = document.getElementById('btn-search-close');\n var overlay = document.getElementById('search-overlay');\n var input = document.getElementById('search-input-overlay');\n\n function openSearch() {\n overlay.style.display = 'flex';\n document.body.style.overflow = 'hidden';\n setTimeout(function () { input.focus(); }, 50);\n }\n\n function closeSearch() {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n\n btnOpen.addEventListener('click', openSearch);\n btnClose.addEventListener('click', closeSearch);\n\n overlay.addEventListener('click', function (e) {\n if (e.target === overlay) closeSearch();\n });\n\n document.addEventListener('keydown', function (e) {\n if (e.key === 'Escape' && overlay.style.display === 'flex') closeSearch();\n });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2a5bcb2 e-con-full e-flex e-con e-parent\" data-id=\"2a5bcb2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e68f74 elementor-widget elementor-widget-html\" data-id=\"1e68f74\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Header Program Studi TI<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\n\/* ===== RESET ===== *\/\n*, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody{\n background: transparent;\n margin: 0;\n padding: 0;\n font-family: 'Poppins', sans-serif;\n}\n\n\/* =====================================================\n HEADER\n===================================================== *\/\n.site-header-ti{\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:24px;\n width:100%;\n padding:14px 28px;\n position:relative;\n}\n\n\/* ===== LOGO + TEKS ===== *\/\n.logo-block-ti{\n display:flex;\n align-items:center;\n gap:14px;\n text-decoration:none;\n flex-shrink:0;\n}\n\n.logo-block-ti img{\n height:56px;\n width:auto;\n flex-shrink:0;\n}\n\n.logo-text-ti{\n display:flex;\n flex-direction:column;\n line-height:1.15;\n}\n\n.logo-text-ti .logo-title{\n font-size:20px;\n font-weight:800;\n color:#3559DB;\n letter-spacing:0.3px;\n}\n\n.logo-text-ti .logo-subtitle{\n font-size:20px;\n font-weight:800;\n color:#1a1a1a;\n letter-spacing:0.3px;\n}\n\n\/* ===== WRAPPER MENU (dari kode menu sebelumnya) ===== *\/\n.menu-wrapper{\n position:relative;\n flex-shrink:0;\n}\n\n\/* ===== HAMBURGER ===== *\/\n.menu-toggle{\n display:none;\n background:#3559DB;\n color:#fff;\n border:none;\n border-radius:8px;\n padding:10px 14px;\n font-size:22px;\n cursor:pointer;\n font-family:'Poppins', sans-serif;\n}\n\n\/* ===== MENU WRAPPER ===== *\/\n.menu-ti {\n font-family: 'Poppins', sans-serif;\n}\n\n\/* ===== UL LEVEL 1 ===== *\/\n.menu-ti > ul {\n list-style: none;\n display: flex;\n flex-wrap: nowrap;\n gap: 6px;\n align-items: center;\n padding: 0;\n margin: 0;\n}\n\n\/* ===== LI LEVEL 1 ===== *\/\n.menu-ti > ul > li {\n position: relative;\n}\n\n.menu-ti > ul > li > a.active{\n background:#032B63;\n color:#fff;\n}\n\n\/* ===== TOMBOL LEVEL 1 ===== *\/\n.menu-ti > ul > li > a {\n display: block;\n padding: 9px 16px;\n background: #3559DB;\n color: #fff;\n border-radius: 8px;\n text-decoration: none;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n transition: background 0.25s, box-shadow 0.2s;\n}\n\n.menu-ti > ul > li > a:hover,\n.menu-ti > ul > li.is-open > a {\n background: #2747bd;\n box-shadow: 0 4px 12px rgba(53,89,219,0.35);\n}\n\n\/* ===== SUBMENU BIASA ===== *\/\n.menu-ti > ul > li > ul {\n list-style: none;\n position: fixed;\n min-width: 220px;\n background: #ffffff;\n border-radius: 0 0 8px 8px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.12);\n overflow: visible;\n display: none;\n z-index: 99999;\n padding: 0;\n border-top: 3px solid #305CDE;\n}\n\n\/* ===== TRANSPARENT HOVER BRIDGE ===== *\/\n.menu-ti > ul > li > ul::before,\n.menu-ti > ul > li > .mega-menu::before{\n content:'';\n position:absolute;\n top:-10px;\n left:0;\n width:100%;\n height:10px;\n background:transparent;\n}\n\n.menu-ti > ul > li.is-open > ul {\n display: block;\n}\n\n\/* ===== ITEM SUBMENU ===== *\/\n.menu-ti > ul > li > ul > li > a {\n display: block;\n padding: 12px 18px;\n color: #555;\n text-decoration: none;\n font-size: 13px;\n background: #ffffff;\n border-bottom: 1px solid #e5e5e5;\n white-space: nowrap;\n transition: background 0.2s, color 0.2s, padding-left 0.2s;\n}\n\n.menu-ti > ul > li > ul > li:last-child > a {\n border-bottom: none;\n}\n\n.menu-ti > ul > li > ul > li > a:hover {\n background: #eaeaea;\n color: #032B63;\n padding-left: 24px;\n}\n\n\/* ===== MEGA MENU ===== *\/\n.mega-menu {\n position: fixed;\n background: #ffffff;\n display: none;\n padding: 32px 36px;\n grid-template-columns: repeat(4, 1fr);\n gap: 28px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.12);\n border-radius: 0 0 8px 8px;\n z-index: 99999;\n min-width: 700px;\n border-top: 3px solid #305CDE;\n}\n\n.menu-ti > ul > li.is-open > .mega-menu {\n display: grid;\n}\n\n\/* ===== KOLOM MEGA MENU ===== *\/\n.mega-column h4 {\n color: #1f3566;\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 2px solid #3559DB;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.mega-column a {\n display: block;\n text-decoration: none;\n color: #555;\n margin-bottom: 9px;\n font-size: 13px;\n transition: color 0.2s, transform 0.2s;\n}\n\n.mega-column a:hover {\n color: #032B63;\n transform: translateX(4px);\n}\n\n\/* =====================================================\n MOBILE\n===================================================== *\/\n@media (max-width: 768px) {\n\n .site-header-ti{\n width:100%; \n padding:10px 16px;\n flex-direction:column;\n align-items:center;\n gap:120px;\n }\n\n .menu-wrapper{\n order:-1;\n align-self:flex-start;\n }\n\n .logo-block-ti{\n order:1;\n flex-direction:column;\n text-align:center;\n }\n\n .logo-text-ti{\n align-items:center;\n }\n\n .logo-block-ti img{\n height:42px;\n width:auto;\n }\n\n .logo-text-ti .logo-title,\n .logo-text-ti .logo-subtitle{\n font-size:13px;\n }\n\n .menu-wrapper{\n position:relative;\n z-index:999999;\n order:-1;\n align-self:flex-start;\n }\n\n \/* HAMBURGER \u2014 putih, rata kiri *\/\n .menu-toggle{\n display:flex !important;\n align-items:center;\n justify-content:center;\n\n width:32px;\n height:32px;\n\n padding:0;\n\n background:transparent;\n border:none;\n outline:none;\n\n color:#ffffff;\n\n font-size:26px;\n line-height:1;\n\n cursor:pointer;\n\n position:relative;\n z-index:999999;\n\n transition: transform 0.3s ease;\n }\n\n .menu-toggle:hover{\n background:transparent;\n box-shadow:none;\n }\n\n .menu-toggle.is-active{\n transform: rotate(90deg);\n }\n\n \/* MENU CONTAINER *\/\n .menu-ti{\n position:absolute;\n top:8px;\n left:0;\n\n width:210px;\n\n z-index:999998;\n\n opacity:0;\n visibility:hidden;\n transform:translateY(-12px);\n pointer-events:none;\n transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;\n }\n\n .menu-ti.active{\n opacity:1;\n visibility:visible;\n transform:translateY(0);\n pointer-events:auto;\n transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;\n }\n\n \/* UL *\/\n .menu-ti > ul{\n flex-direction:column;\n align-items:stretch;\n gap:6px;\n }\n\n \/* ITEM *\/\n .menu-ti > ul > li{\n width:100%;\n }\n\n \/* BUTTON MENU *\/\n .menu-ti > ul > li > a{\n width:100%;\n padding:12px 16px;\n font-size:12px;\n font-weight:600;\n border-radius:12px;\n background:#3559DB;\n box-shadow:0 4px 10px rgba(0,0,0,0.08);\n }\n\n .menu-ti > ul > li::after{\n content:'';\n position:absolute;\n left:0;\n top:100%;\n width:100%;\n height:30px;\n }\n\n \/* SUBMENU *\/\n .menu-ti > ul > li > ul,\n .mega-menu{\n position:relative !important;\n top:0 !important;\n left:0 !important;\n width:100% !important;\n min-width:100% !important;\n margin-top:4px;\n border-radius:12px;\n box-shadow:none;\n display:none;\n }\n\n .menu-ti > ul > li.is-open > ul,\n .menu-ti > ul > li.is-open > .mega-menu{\n display:block;\n }\n\n .mega-menu {\n position: fixed;\n background: #ffffff;\n display: none;\n padding: 32px 36px;\n grid-template-columns: repeat(4, 1fr);\n gap: 28px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.12);\n border-radius: 0 0 8px 8px;\n z-index: 99999;\n min-width: 700px;\n border-top: 3px solid #305CDE;\n overflow: visible;\n }\n}\n\n\n<\/style>\n<\/head>\n\n<body>\n\n<header class=\"site-header-ti\">\n\n \n <a href=\"\/ti\" class=\"logo-block-ti\">\n <img decoding=\"async\" src=\"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png\" alt=\"Logo Program Studi Teknologi Informasi\">\n <div class=\"logo-text-ti\">\n <span class=\"logo-title\">PROGRAM STUDI<\/span>\n <span class=\"logo-subtitle\">TEKNOLOGI INFORMASI<\/span>\n <\/div>\n <\/a>\n\n \n <div class=\"menu-wrapper\">\n\n \n <button class=\"menu-toggle\" id=\"menuToggle\">\n <span id=\"menuToggleIcon\">\u2630<\/span>\n <\/button>\n\n <nav class=\"menu-ti\" id=\"menuTI\">\n\n <ul>\n\n <li>\n <a href=\"\/ti\/profil\">Profil<\/a>\n <\/li>\n\n <li>\n <a href=\"\/ti\/tata_kelola\">Tata Kelola<\/a>\n <\/li>\n\n <li>\n <a href=\"\/ti\/dosen-pengampu\">Dosen Pengampu<\/a>\n <\/li>\n\n <li>\n <a href=\"#\">Pendidikan<\/a>\n <ul>\n <li><a href=\"\/ti\/akreditasi\">Akreditasi<\/a><\/li>\n <li><a href=\"\/ti\/kurikulum\">Kurikulum<\/a><\/li>\n <li><a href=\"\/ti\/pedoman\">Pedoman<\/a><\/li>\n <li><a href=\"\/ti\/sebaran-matkul\">Sebaran Matkul<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Mahasiswa<\/a>\n <ul>\n <li><a href=\"\/ti\/prestasi\">Prestasi<\/a><\/li>\n <li><a href=\"\/ti\/hmps\">HMPS<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Penelitian<\/a>\n <ul>\n <li><a href=\"\/ti\/e-jurnal\">E-Jurnal<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Pengabdian<\/a>\n <ul>\n <li><a href=\"\/ti\/pengabdian-dosen\">Pengabdian Dosen<\/a><\/li>\n <li><a href=\"\/ti\/pengabdian-mhs\">Pengabdian Mhs<\/a><\/li>\n <\/ul>\n <\/li>\n\n \n <li>\n <a href=\"#\">Layanan<\/a>\n\n <div class=\"mega-menu\">\n\n <div class=\"mega-column\">\n <h4>Layanan Mahasiswa<\/h4>\n <a href=\"\/ti\/layanan\/siakad\">SIAKAD<\/a>\n <a href=\"\/ti\/layanan\/smart\">SMART<\/a>\n <a href=\"\/ti\/layanan\/smart-mobile\">SMART Mobile<\/a>\n <a href=\"\/ti\/layanan\/e-class\">E-Class<\/a>\n <a href=\"\/ti\/layanan\/beasiswa\">Beasiswa<\/a>\n <a href=\"\/ti\/layanan\/karir-wirausaha\">Karir dan Wirausaha<\/a>\n <a href=\"\/ti\/layanan\/kesehatan\">Kesehatan<\/a>\n <\/div>\n\n <div class=\"mega-column\">\n <h4>Layanan Dosen<\/h4>\n <a href=\"\/ti\/layanan\/siakad\">SIAKAD<\/a>\n <a href=\"\/ti\/layanan\/smart\">SMART<\/a>\n <a href=\"\/ti\/layanan\/simpis\">SIMPIS<\/a>\n <a href=\"\/ti\/layanan\/siperaga\">SIPERAGA<\/a>\n <\/div>\n\n <div class=\"mega-column\">\n <h4>Layanan Tendik<\/h4>\n <a href=\"\/ti\/layanan\/simpis\">SIMPIS<\/a>\n <a href=\"\/ti\/layanan\/siperaga\">SIPERAGA<\/a>\n <\/div>\n\n <div class=\"mega-column\">\n <h4>Layanan Disabilitas<\/h4>\n <a href=\"\/ti\/layanan\/disabilitas\">Layanan Disabilitas<\/a>\n <a href=\"\/ti\/layanan\/pedoman-disabilitas\">Pedoman<\/a>\n <\/div>\n\n <\/div>\n <\/li>\n\n <li>\n <a href=\"#\">Kerjasama<\/a>\n <ul>\n <li><a href=\"\/ti\/kerjasama-ln\">Kerjasama Luar Negeri<\/a><\/li>\n <li><a href=\"\/ti\/kerjasama-dn\">Kerjasama Dalam Negeri<\/a><\/li>\n <li><a href=\"\/ti\/industri\">Industri<\/a><\/li>\n <li><a href=\"\/ti\/asosiasi\">Asosiasi<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Survei<\/a>\n <ul>\n <li><a href=\"\/ti\/survey-vmts\">Survey Pemahaman VMTS<\/a><\/li>\n <li><a href=\"\/ti\/survey-pelayanan\">Survey Kepuasan Pelayanan <br>Akademik<\/a><\/li>\n <\/ul>\n <\/li>\n\n <\/ul>\n\n <\/nav>\n\n <\/div>\n\n<\/header>\n\n<script>\n(function () {\n\n \/* =========================================\n HAMBURGER TOGGLE\n ========================================= *\/\n const toggleBtn = document.getElementById('menuToggle');\n const toggleIcon = document.getElementById('menuToggleIcon');\n const menuTI = document.getElementById('menuTI');\n\n toggleBtn.addEventListener('click', function () {\n\n const willOpen = !menuTI.classList.contains('active');\n\n menuTI.classList.toggle('active', willOpen);\n toggleBtn.classList.toggle('is-active', willOpen);\n\n toggleIcon.textContent = willOpen ? '\u2715' : '\u2630';\n\n if (!willOpen) {\n items.forEach(function (li) {\n li.classList.remove('is-open');\n });\n }\n });\n\n \/* =========================================\n DROPDOWN POSITION DESKTOP\n Diposisikan relatif ke tombol menu itu sendiri\n (bukan ke elemen <header> global), supaya jarak\n ke kotak submenu selalu dekat & konsisten meskipun\n tema WordPress punya struktur header yang berbeda.\n ========================================= *\/\n var GAP = 43; \/\/ jarak vertikal antara tombol menu dan kotak submenu\n\n function positionDropdown(li) {\n\n if (window.innerWidth <= 768) return;\n\n var dropdown =\n li.querySelector(':scope > ul') ||\n li.querySelector(':scope > .mega-menu');\n\n if (!dropdown) return;\n\n var btn = li.querySelector(':scope > a');\n\n var btnRect = btn.getBoundingClientRect();\n\n var isMega = dropdown.classList.contains('mega-menu');\n\n var prevDisplay = dropdown.style.display;\n\n dropdown.style.visibility = 'hidden';\n\n dropdown.style.display = isMega ? 'grid' : 'block';\n\n var dropW = dropdown.offsetWidth;\n\n dropdown.style.display = prevDisplay;\n\n dropdown.style.visibility = '';\n\n dropdown.style.top = (btnRect.bottom + GAP) + 'px';\n\n if (isMega) {\n\n var left = btnRect.right - dropW;\n\n if (left < 8) left = 8;\n\n if (left + dropW > window.innerWidth - 8) {\n left = window.innerWidth - dropW - 8;\n }\n\n dropdown.style.left = left + 'px';\n\n } else {\n\n var left =\n btnRect.left +\n (btnRect.width \/ 2) -\n (dropW \/ 2);\n\n if (left < 8) left = 8;\n\n if (left + dropW > window.innerWidth - 8) {\n left = window.innerWidth - dropW - 8;\n }\n\n dropdown.style.left = left + 'px';\n }\n }\n\n \/* =========================================\n MENU ITEMS\n Pakai timer sebelum menutup dropdown, supaya\n kursor sempat berpindah dari tombol menu ke\n kotak submenu tanpa dropdown keburu hilang.\n ========================================= *\/\n var items = document.querySelectorAll('.menu-ti > ul > li');\n\n \/* setiap <li> punya timer penutupnya masing-masing, supaya\n hover-timer satu menu tidak ikut membatalkan timer menu lain *\/\n var closeTimers = new Map();\n\n function cancelClose(li) {\n if (closeTimers.has(li)) {\n clearTimeout(closeTimers.get(li));\n closeTimers.delete(li);\n }\n }\n\n function scheduleClose(li) {\n cancelClose(li);\n var t = setTimeout(function () {\n li.classList.remove('is-open');\n closeTimers.delete(li);\n }, 250);\n closeTimers.set(li, t);\n }\n\n \/* hanya boleh satu submenu yang terbuka dalam satu waktu *\/\n function closeAllExcept(li) {\n items.forEach(function (other) {\n if (other !== li) {\n cancelClose(other);\n other.classList.remove('is-open');\n }\n });\n }\n\n items.forEach(function (li) {\n\n var dropdown =\n li.querySelector(':scope > ul') ||\n li.querySelector(':scope > .mega-menu');\n\n if (!dropdown) return;\n\n \/* DESKTOP: hover tombol menu *\/\n li.addEventListener('mouseenter', function () {\n\n if (window.innerWidth <= 768) return;\n\n cancelClose(li);\n closeAllExcept(li);\n\n positionDropdown(li);\n\n li.classList.add('is-open');\n });\n\n li.addEventListener('mouseleave', function () {\n\n if (window.innerWidth <= 768) return;\n\n scheduleClose(li);\n });\n\n \/* DESKTOP: hover kotak submenu itu sendiri\n (dropdown posisinya \"fixed\" di layar, jadi perlu\n listener terpisah supaya tetap terbuka saat kursor\n ada di atasnya) *\/\n dropdown.addEventListener('mouseenter', function () {\n\n if (window.innerWidth <= 768) return;\n\n cancelClose(li);\n closeAllExcept(li);\n\n li.classList.add('is-open');\n });\n\n dropdown.addEventListener('mouseleave', function () {\n\n if (window.innerWidth <= 768) return;\n\n scheduleClose(li);\n });\n\n \/* MOBILE *\/\n var link = li.querySelector(':scope > a');\n\n link.addEventListener('click', function (e) {\n\n if (window.innerWidth > 768) return;\n\n e.preventDefault();\n\n items.forEach(function (other) {\n\n if (other !== li) {\n other.classList.remove('is-open');\n }\n\n });\n\n li.classList.toggle('is-open');\n\n });\n\n });\n\n \/* =========================================\n UPDATE POSITION\n ========================================= *\/\n window.addEventListener('scroll', function () {\n\n var open =\n document.querySelector('.menu-ti > ul > li.is-open');\n\n if (open) positionDropdown(open);\n\n }, { passive: true });\n\n window.addEventListener('resize', function () {\n\n var open =\n document.querySelector('.menu-ti > ul > li.is-open');\n\n if (open) positionDropdown(open);\n\n });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-39e6951 e-con-full e-flex e-con e-parent\" data-id=\"39e6951\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b49617 elementor-widget elementor-widget-html\" data-id=\"5b49617\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap');\n<\/style>\n\n<div class=\"ab-wrapper\">\n\n <div class=\"ab-header\">\n <h1>Berita<\/h1>\n <p id=\"abSubtitle\">Memuat data...<\/p>\n <\/div>\n\n <div class=\"ab-filter\">\n <div class=\"ab-filter-group\">\n <label for=\"abFilterMonth\">Bulan<\/label>\n <select id=\"abFilterMonth\">\n <option value=\"0\">Semua Bulan<\/option>\n <\/select>\n <\/div>\n <div class=\"ab-filter-group\">\n <label for=\"abFilterYear\">Tahun<\/label>\n <select id=\"abFilterYear\">\n <option value=\"0\">Semua Tahun<\/option>\n <\/select>\n <\/div>\n <button class=\"ab-filter-reset\" id=\"abFilterReset\" type=\"button\">Reset<\/button>\n <\/div>\n\n <div class=\"ab-grid\" id=\"abGrid\">\n <div class=\"ab-loading\">Memuat berita...<\/div>\n <\/div>\n\n <div class=\"ab-pagination\" id=\"abPagination\"><\/div>\n\n<\/div>\n\n\n<style>\n\n\/* ==============================\n RESET\n============================== *\/\n\n.ab-wrapper * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n\n\/* ==============================\n WRAPPER\n============================== *\/\n\n.ab-wrapper {\n font-family: 'Poppins', sans-serif;\n width: 100%;\n background: #eef1f9;\n border-radius: 16px;\n padding: 32px clamp(16px, 4vw, 36px) 40px;\n}\n\n\n\/* ==============================\n HEADER\n============================== *\/\n\n.ab-header {\n margin-bottom: 24px;\n padding-bottom: 16px;\n border-bottom: 3px solid #305CDE;\n}\n\n.ab-header .ab-eyebrow {\n display: inline-block;\n background: #305CDE;\n color: #fff;\n font-size: 0.68rem;\n font-weight: 700;\n letter-spacing: 1.5px;\n padding: 4px 12px;\n border-radius: 4px;\n margin-bottom: 12px;\n text-transform: uppercase;\n}\n\n.ab-header h1 {\n font-size: 1.8rem;\n font-weight: 700;\n color: #1a1a1a;\n margin-bottom: 6px;\n}\n\n.ab-header p {\n font-size: 0.85rem;\n color: #777;\n}\n\n\n\/* ==============================\n FILTER BAR\n============================== *\/\n\n.ab-filter {\n display: flex;\n align-items: flex-end;\n gap: 16px;\n flex-wrap: wrap;\n margin-bottom: 28px;\n padding: 18px 20px;\n background: #fff;\n border: 1px solid #e6e6e6;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(20, 30, 60, 0.05);\n}\n\n.ab-filter-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.ab-filter-group label {\n font-size: 0.72rem;\n font-weight: 600;\n color: #666;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.ab-filter-group select {\n font-family: 'Poppins', sans-serif;\n font-size: 0.85rem;\n font-weight: 500;\n color: #222;\n background: #fff;\n border: 1px solid #d8d8d8;\n border-radius: 6px;\n padding: 8px 12px;\n min-width: 160px;\n cursor: pointer;\n}\n\n.ab-filter-group select:focus {\n outline: none;\n border-color: #305CDE;\n}\n\n.ab-filter-reset {\n font-family: 'Poppins', sans-serif;\n font-size: 0.82rem;\n font-weight: 600;\n color: #305CDE;\n background: #fff;\n border: 1px solid #305CDE;\n border-radius: 6px;\n padding: 8px 16px;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n}\n\n.ab-filter-reset:hover {\n background: #305CDE;\n color: #fff;\n}\n\n\n\/* ==============================\n GRID\n============================== *\/\n\n.ab-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n min-height: 200px;\n}\n\n\n\/* ==============================\n CARD\n============================== *\/\n\n.ab-card {\n background: #fff;\n border: 1px solid #e6e6e6;\n border-radius: 12px;\n overflow: hidden;\n text-decoration: none;\n display: flex;\n flex-direction: column;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.ab-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 10px 24px rgba(48, 92, 222, 0.14);\n}\n\n.ab-card-img-wrap {\n position: relative;\n width: 100%;\n aspect-ratio: 16 \/ 10;\n background: #1a3a8f;\n overflow: hidden;\n}\n\n.ab-card-img {\n position: absolute !important;\n inset: 0 !important;\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n max-width: 100% !important;\n object-fit: cover !important;\n object-position: center !important;\n display: block !important;\n margin: 0 !important;\n padding: 0 !important;\n border: none !important;\n image-rendering: crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n}\n\n.ab-card-img-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.8rem;\n color: rgba(255,255,255,0.6);\n background: #1a3a8f;\n}\n\n.ab-card-kategori {\n position: absolute;\n top: 10px;\n left: 10px;\n background: #305CDE;\n color: #fff;\n font-size: 0.68rem;\n font-weight: 700;\n padding: 3px 10px;\n border-radius: 4px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.ab-card-body {\n padding: 16px;\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n.ab-card-title {\n font-size: 0.95rem;\n font-weight: 600;\n color: #1a1a1a;\n line-height: 1.4;\n margin-bottom: 8px;\n}\n\n.ab-card-excerpt {\n font-size: 0.8rem;\n color: #777;\n line-height: 1.5;\n margin-bottom: 12px;\n flex: 1;\n}\n\n.ab-card-date {\n font-size: 0.72rem;\n color: #999;\n padding-top: 10px;\n border-top: 1px solid #f0f0f0;\n}\n\n\n\/* ==============================\n LOADING \/ EMPTY\n============================== *\/\n\n.ab-loading,\n.ab-empty {\n grid-column: 1 \/ -1;\n text-align: center;\n padding: 60px 20px;\n color: #888;\n font-size: 0.9rem;\n}\n\n\n\/* ==============================\n PAGINATION\n============================== *\/\n\n.ab-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n margin-top: 32px;\n flex-wrap: wrap;\n}\n\n.ab-page-btn {\n min-width: 36px;\n height: 36px;\n padding: 0 8px;\n border: 1px solid #e0e0e0;\n background: #fff;\n color: #444;\n font-family: 'Poppins', sans-serif;\n font-size: 0.82rem;\n font-weight: 600;\n border-radius: 6px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.ab-page-btn:hover:not(:disabled):not(.ab-page-dots) {\n background: #f0f4ff;\n border-color: #305CDE;\n color: #305CDE;\n}\n\n.ab-page-btn.active {\n background: #305CDE;\n border-color: #305CDE;\n color: #fff;\n}\n\n.ab-page-btn:disabled {\n opacity: 0.4;\n cursor: default;\n}\n\n.ab-page-dots {\n border: none;\n background: none;\n cursor: default;\n color: #999;\n}\n\n\n\/* ==============================\n RESPONSIVE\n============================== *\/\n\n@media (max-width: 900px) {\n .ab-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 560px) {\n .ab-grid {\n grid-template-columns: 1fr;\n }\n}\n\n<\/style>\n\n\n<script>\n(function() {\n\n const PER_PAGE = 9;\n let abCurrentPage = 1;\n let abMaxPages = 1;\n let abTotal = 0;\n let abFilterYear = 0;\n let abFilterMonth = 0;\n let abArsipData = [];\n\n const NAMA_BULAN = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',\n 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];\n\n function formatTanggal(iso) {\n try {\n return new Date(iso).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' });\n } catch (e) {\n return '';\n }\n }\n\n function getFullImageUrl(url) {\n if (!url) return '';\n return url.replace(\/(-\\d+x\\d+)\\.(jpg|jpeg|png|webp)$\/i, '.$2');\n }\n\n async function loadArsipList() {\n try {\n const formData = new FormData();\n formData.append('action', 'get_berita_arsip');\n\n const res = await fetch('\/ti\/wp-admin\/admin-ajax.php', { method: 'POST', body: formData });\n const data = await res.json();\n abArsipData = data.arsip || [];\n populateFilterDropdowns();\n } catch (e) {\n console.error('Gagal memuat daftar arsip', e);\n }\n }\n\n function populateFilterDropdowns() {\n const yearSelect = document.getElementById('abFilterYear');\n const monthSelect = document.getElementById('abFilterMonth');\n\n const years = [...new Set(abArsipData.map(a => a.year))].sort((a, b) => b - a);\n yearSelect.innerHTML = '<option value=\"0\">Semua Tahun<\/option>' +\n years.map(y => `<option value=\"${y}\">${y}<\/option>`).join('');\n\n updateMonthOptions();\n\n yearSelect.addEventListener('change', () => {\n abFilterYear = parseInt(yearSelect.value, 10);\n updateMonthOptions();\n abFilterMonth = 0;\n monthSelect.value = '0';\n loadBeritaPage(1);\n });\n\n monthSelect.addEventListener('change', () => {\n abFilterMonth = parseInt(monthSelect.value, 10);\n loadBeritaPage(1);\n });\n\n document.getElementById('abFilterReset').addEventListener('click', () => {\n abFilterYear = 0;\n abFilterMonth = 0;\n yearSelect.value = '0';\n updateMonthOptions();\n monthSelect.value = '0';\n loadBeritaPage(1);\n });\n }\n\n \/\/ Bulan yang ditampilkan hanya yang punya berita, dan cuma untuk tahun yang dipilih\n \/\/ (kalau \"Semua Tahun\" dipilih, gabungkan semua bulan yang pernah ada).\n function updateMonthOptions() {\n const monthSelect = document.getElementById('abFilterMonth');\n const relevant = abFilterYear > 0\n ? abArsipData.filter(a => a.year === abFilterYear)\n : abArsipData;\n\n const months = [...new Set(relevant.map(a => a.month))].sort((a, b) => a - b);\n monthSelect.innerHTML = '<option value=\"0\">Semua Bulan<\/option>' +\n months.map(m => `<option value=\"${m}\">${NAMA_BULAN[m]}<\/option>`).join('');\n }\n\n async function loadBeritaPage(page) {\n const grid = document.getElementById('abGrid');\n const subtitle = document.getElementById('abSubtitle');\n\n grid.innerHTML = '<div class=\"ab-loading\">Memuat berita...<\/div>';\n\n try {\n const formData = new FormData();\n formData.append('action', 'get_berita_ti_page');\n formData.append('paged', page);\n formData.append('per_page', PER_PAGE);\n if (abFilterYear > 0) formData.append('year', abFilterYear);\n if (abFilterMonth > 0) formData.append('month', abFilterMonth);\n\n \/\/ \u26a0\ufe0f CEK BARIS INI: sesuaikan path dengan struktur URL situsmu.\n \/\/ Kalau situsmu di root (namasitus.com), pakai: '\/wp-admin\/admin-ajax.php' (sudah default di bawah)\n \/\/ Kalau situsmu di subfolder (namasitus.com\/nama-folder\/), pakai: '\/nama-folder\/wp-admin\/admin-ajax.php'\n const res = await fetch('\/ti\/wp-admin\/admin-ajax.php', { method: 'POST', body: formData });\n const data = await res.json();\n\n abCurrentPage = data.paged || page;\n abMaxPages = data.max_pages || 1;\n abTotal = data.total || 0;\n\n subtitle.textContent = abTotal > 0\n ? `Menampilkan halaman ${abCurrentPage} dari ${abMaxPages} (${abTotal} berita)`\n : 'Belum ada berita.';\n\n renderGrid(data.posts || []);\n renderPagination();\n\n window.scrollTo({ top: document.querySelector('.ab-wrapper').offsetTop - 20, behavior: 'smooth' });\n\n } catch (e) {\n grid.innerHTML = '<div class=\"ab-empty\">Gagal memuat berita.<\/div>';\n console.error(e);\n }\n }\n\n function renderGrid(posts) {\n const grid = document.getElementById('abGrid');\n\n if (!posts.length) {\n grid.innerHTML = '<div class=\"ab-empty\">Tidak ada berita ditemukan.<\/div>';\n return;\n }\n\n grid.innerHTML = posts.map(b => `\n <a class=\"ab-card\" href=\"${b.link}\">\n <div class=\"ab-card-img-wrap\">\n ${ b.gambar\n ? `<img decoding=\"async\" class=\"ab-card-img\" src=\"${getFullImageUrl(b.gambar)}\" alt=\"${b.title}\" loading=\"lazy\" onerror=\"this.parentElement.innerHTML='<div class=\\\\'ab-card-img-placeholder\\\\'>\ud83d\udcf0<\/div>'\">`\n : `<div class=\"ab-card-img-placeholder\">\ud83d\udcf0<\/div>`\n }\n <span class=\"ab-card-kategori\">${b.kategori}<\/span>\n <\/div>\n <div class=\"ab-card-body\">\n <div class=\"ab-card-title\">${b.title}<\/div>\n ${ b.excerpt ? `<div class=\"ab-card-excerpt\">${b.excerpt}<\/div>` : '' }\n <div class=\"ab-card-date\">\ud83d\udcc5 ${formatTanggal(b.date)}<\/div>\n <\/div>\n <\/a>\n `).join('');\n }\n\n function renderPagination() {\n const pag = document.getElementById('abPagination');\n\n if (abMaxPages <= 1) {\n pag.innerHTML = '';\n return;\n }\n\n const pages = getPageList(abCurrentPage, abMaxPages);\n let html = '';\n\n html += `<button class=\"ab-page-btn\" ${abCurrentPage === 1 ? 'disabled' : ''} data-page=\"${abCurrentPage - 1}\">‹<\/button>`;\n\n pages.forEach(p => {\n if (p === '...') {\n html += `<span class=\"ab-page-btn ab-page-dots\">...<\/span>`;\n } else {\n html += `<button class=\"ab-page-btn ${p === abCurrentPage ? 'active' : ''}\" data-page=\"${p}\">${p}<\/button>`;\n }\n });\n\n html += `<button class=\"ab-page-btn\" ${abCurrentPage === abMaxPages ? 'disabled' : ''} data-page=\"${abCurrentPage + 1}\">›<\/button>`;\n\n pag.innerHTML = html;\n\n pag.querySelectorAll('.ab-page-btn[data-page]').forEach(btn => {\n btn.addEventListener('click', () => {\n const page = parseInt(btn.getAttribute('data-page'), 10);\n if (page >= 1 && page <= abMaxPages && page !== abCurrentPage) {\n loadBeritaPage(page);\n }\n });\n });\n }\n\n \/\/ Menghasilkan daftar nomor halaman dengan elipsis, misal: 1 ... 4 5 6 ... 20\n function getPageList(current, max) {\n const delta = 2;\n const range = [];\n const rangeWithDots = [];\n let last;\n\n for (let i = 1; i <= max; i++) {\n if (i === 1 || i === max || (i >= current - delta && i <= current + delta)) {\n range.push(i);\n }\n }\n\n range.forEach(i => {\n if (last) {\n if (i - last === 2) {\n rangeWithDots.push(last + 1);\n } else if (i - last > 2) {\n rangeWithDots.push('...');\n }\n }\n rangeWithDots.push(i);\n last = i;\n });\n\n return rangeWithDots;\n }\n\n loadArsipList();\n loadBeritaPage(1);\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Top Bar – Follow Us & Search Follow Us : Header Program Studi TI PROGRAM STUDI TEKNOLOGI INFORMASI \u2630 Profil […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1570","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Berita - Program Studi Teknologi Informasi<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Berita - Program Studi Teknologi Informasi\" \/>\n<meta property=\"og:description\" content=\"Top Bar – Follow Us & Search Follow Us : Header Program Studi TI PROGRAM STUDI TEKNOLOGI INFORMASI \u2630 Profil […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/\" \/>\n<meta property=\"og:site_name\" content=\"Program Studi Teknologi Informasi\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-23T07:34:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/\",\"name\":\"Berita - Program Studi Teknologi Informasi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_UIN_Salatiga.png\",\"datePublished\":\"2026-07-23T07:03:31+00:00\",\"dateModified\":\"2026-07-23T07:34:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/#primaryimage\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_UIN_Salatiga.png\",\"contentUrl\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_UIN_Salatiga.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Berita\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#website\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\",\"name\":\"Program Studi Teknologi Informasi\",\"description\":\"UNIVERSITAS ISLAM NEGERI SALATIGA\",\"publisher\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#organization\",\"name\":\"Program Studi Teknologi Informasi\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/05\\\/Logo_UIN_Salatiga.svg\",\"contentUrl\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/05\\\/Logo_UIN_Salatiga.svg\",\"width\":80,\"height\":80,\"caption\":\"Program Studi Teknologi Informasi\"},\"image\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Berita - Program Studi Teknologi Informasi","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/","og_locale":"en_US","og_type":"article","og_title":"Berita - Program Studi Teknologi Informasi","og_description":"Top Bar – Follow Us & Search Follow Us : Header Program Studi TI PROGRAM STUDI TEKNOLOGI INFORMASI \u2630 Profil […]","og_url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/","og_site_name":"Program Studi Teknologi Informasi","article_modified_time":"2026-07-23T07:34:21+00:00","og_image":[{"url":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/","name":"Berita - Program Studi Teknologi Informasi","isPartOf":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#website"},"primaryImageOfPage":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/#primaryimage"},"image":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/#primaryimage"},"thumbnailUrl":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png","datePublished":"2026-07-23T07:03:31+00:00","dateModified":"2026-07-23T07:34:21+00:00","breadcrumb":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/#primaryimage","url":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png","contentUrl":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png"},{"@type":"BreadcrumbList","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/"},{"@type":"ListItem","position":2,"name":"Berita"}]},{"@type":"WebSite","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#website","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/","name":"Program Studi Teknologi Informasi","description":"UNIVERSITAS ISLAM NEGERI SALATIGA","publisher":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#organization","name":"Program Studi Teknologi Informasi","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#\/schema\/logo\/image\/","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/Logo_UIN_Salatiga.svg","contentUrl":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/Logo_UIN_Salatiga.svg","width":80,"height":80,"caption":"Program Studi Teknologi Informasi"},"image":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages\/1570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/comments?post=1570"}],"version-history":[{"count":22,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages\/1570\/revisions"}],"predecessor-version":[{"id":1595,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages\/1570\/revisions\/1595"}],"wp:attachment":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/media?parent=1570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nTop Bar - Follow Us & Search<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n<style>\n\n*, *::before, *::after{\n box-sizing:border-box;\n margin:0;\n padding:0;\n}\n\nbody{\n background:transparent;\n font-family:'Poppins', sans-serif;\n}\n\n\/* =====================================================\n TOP BAR\n===================================================== *\/\n.topbar-ti{\n display:flex;\n align-items:center;\n justify-content:space-between;\n\n width:100%;\n background:#3559DB;\n\n padding:14px 28px;\n\n position:relative;\n}\n\n\/* ===== FOLLOW US + ICONS (Font Awesome) ===== *\/\n.follow-us-box{\n display:flex;\n align-items:center;\n gap:12px;\n flex-wrap:wrap;\n}\n.follow-title{\n color:#fff;\n font-size:18px;\n font-weight:700;\n line-height:1.2;\n white-space:nowrap;\n}\n.social-icons{\n display:flex;\n align-items:center;\n gap:12px;\n flex-wrap:wrap;\n}\n.social-btn{\n width:40px;\n height:40px;\n background:#fff;\n border-radius:50%;\n display:flex;\n align-items:center;\n justify-content:center;\n text-decoration:none;\n transition:all .3s ease;\n flex-shrink:0;\n}\n.social-btn i{\n color:#3457d5;\n font-size:20px;\n}\n.social-btn:hover{\n transform:translateY(-3px);\n}\n\n\/* ===== TANGGAL + SEARCH (KANAN) ===== *\/\n.topbar-right{\n display:flex;\n align-items:center;\n gap:20px;\n}\n\n.topbar-date{\n color:#ffffff;\n font-size:22px;\n font-weight:400;\n white-space:nowrap;\n}\n\n.topbar-search-btn{\n background:none;\n border:none;\n cursor:pointer;\n padding:8px;\n display:flex;\n align-items:center;\n justify-content:center;\n}\n\n\/* =====================================================\n MOBILE\n===================================================== *\/\n@media (max-width:768px){\n\n .topbar-ti{\n flex-direction:column;\n align-items:center;\n gap:14px;\n\n padding:20px 20px 24px;\n }\n\n \/* tombol search nempel di pojok kanan atas *\/\n .topbar-search-btn{\n position:absolute;\n top:14px;\n right:14px;\n }\n\n .topbar-right{\n order:-1;\n justify-content:center;\n width:100%;\n }\n\n .topbar-date{\n font-size:12px;\n }\n\n .topbar-follow{\n order:1;\n flex-direction:column;\n gap:12px;\n }\n\n .topbar-label{\n font-size:14px;\n }\n\n \/* ===== FOLLOW US BOX (mobile) ===== *\/\n .follow-us-box{\n order:1;\n justify-content:center;\n text-align:center;\n gap:10px;\n width:100%;\n }\n .follow-title{\n width:100%;\n font-size:16px;\n }\n .social-icons{\n justify-content:center;\n width:100%;\n gap:10px;\n }\n .social-btn{\n width:38px;\n height:38px;\n }\n .social-btn i{\n font-size:18px;\n }\n\n}\n\n\/* Mobile kecil *\/\n@media (max-width:480px){\n .follow-title{\n font-size:15px;\n }\n .social-btn{\n width:34px;\n height:34px;\n }\n .social-btn i{\n font-size:16px;\n }\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"topbar-ti\">\n\n \n <div class=\"follow-us-box\">\n <div class=\"follow-title\">\n Follow Us :\n <\/div>\n <div class=\"social-icons\">\n <a href=\"https:\/\/instagram.com\/\" target=\"_blank\" class=\"social-btn\" aria-label=\"Instagram\">\n <i class=\"fab fa-instagram\"><\/i>\n <\/a>\n <a href=\"https:\/\/youtube.com\/\" target=\"_blank\" class=\"social-btn\" aria-label=\"YouTube\">\n <i class=\"fab fa-youtube\"><\/i>\n <\/a>\n <a href=\"https:\/\/wa.me\/6281234567890\" target=\"_blank\" class=\"social-btn\" aria-label=\"WhatsApp\">\n <i class=\"fab fa-whatsapp\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"topbar-right\">\n <span class=\"topbar-date\" id=\"topbar-datetime\"><\/span>\n <\/div>\n\n \n <button id=\"btn-search-open\" class=\"topbar-search-btn\" aria-label=\"Buka pencarian\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 20 20\">\n <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" fill=\"transparent\" stroke=\"#ffffff\" stroke-width=\"2.4\"\/>\n <line x1=\"16\" y1=\"16\" x2=\"21\" y2=\"21\" stroke=\"#ffffff\" stroke-width=\"2.4\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/button>\n\n<\/div>\n\n\n<div id=\"search-overlay\" style=\"\n display:none;\n position:fixed;\n inset:0;\n background:rgba(0,0,0,0.78);\n z-index:2147483647;\n align-items:center;\n justify-content:center;\n flex-direction:column;\n gap:28px;\n padding:20px;\n\">\n\n \n <button id=\"btn-search-close\" style=\"\n width:64px;\n height:64px;\n border:none;\n border-radius:50%;\n background:#305CDE;\n cursor:pointer;\n display:flex;\n align-items:center;\n justify-content:center;\n padding:0;\n transition:0.3s;\n \">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"34\" height=\"34\" viewBox=\"0 0 24 24\" fill=\"none\">\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" stroke=\"#ffffff\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" stroke=\"#ffffff\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/button>\n\n \n <form id=\"search-form-overlay\" method=\"get\" style=\"\n display:flex;\n align-items:center;\n width:min(760px,92vw);\n height:72px;\n background:#ffffff;\n border-radius:14px;\n overflow:hidden;\n box-shadow:0 8px 32px rgba(0,0,0,0.18);\n \">\n <input\n id=\"search-input-overlay\"\n type=\"text\"\n name=\"s\"\n placeholder=\"Search Here...\"\n autocomplete=\"off\"\n style=\"\n flex:1;\n height:100%;\n border:none;\n outline:none;\n background:transparent;\n color:#333;\n font-size:18px;\n padding:0 28px;\n \"\n >\n <button type=\"submit\" style=\"\n width:88px;\n height:100%;\n border:none;\n background:#305CDE;\n cursor:pointer;\n display:flex;\n align-items:center;\n justify-content:center;\n flex-shrink:0;\n \">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"34\" height=\"34\" viewBox=\"0 0 24 24\">\n <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" fill=\"transparent\" stroke=\"#ffffff\" stroke-width=\"2.8\"\/>\n <line x1=\"16\" y1=\"16\" x2=\"21\" y2=\"21\" stroke=\"#ffffff\" stroke-width=\"2.8\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/button>\n <\/form>\n\n<\/div>\n\n\n<style>\n\n@media (max-width:768px){\n\n #btn-search-close{\n width:56px !important;\n height:56px !important;\n }\n\n #btn-search-close svg{\n width:28px !important;\n height:28px !important;\n }\n\n #search-form-overlay{\n height:62px !important;\n }\n\n #search-input-overlay{\n font-size:15px !important;\n padding:0 18px !important;\n }\n\n #search-form-overlay button svg{\n width:28px !important;\n height:28px !important;\n }\n\n #search-overlay{\n align-items:flex-start !important;\n justify-content:flex-start !important;\n padding-top:100px !important;\n gap:16px !important;\n }\n\n}\n\n<\/style>\n\n\n<script>\n(function () {\n\n \/* =========================================\n JAM & TANGGAL BERJALAN\n ========================================= *\/\n var dtEl = document.getElementById('topbar-datetime');\n\n var bulan = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n function updateClock(){\n var now = new Date();\n\n var tanggal = String(now.getDate()).padStart(2,'0');\n var namaBulan = bulan[now.getMonth()];\n var tahun = now.getFullYear();\n\n var jam24 = now.getHours();\n var ampm = jam24 >= 12 ? 'PM' : 'AM';\n var jam12 = jam24 % 12;\n if (jam12 === 0) jam12 = 12;\n\n var menit = String(now.getMinutes()).padStart(2,'0');\n var detik = String(now.getSeconds()).padStart(2,'0');\n\n dtEl.textContent = namaBulan + ' ' + tanggal + ', ' + tahun + ' ' + jam12 + ':' + menit + ':' + detik + ampm;\n }\n\n updateClock();\n setInterval(updateClock, 1000);\n\n \/* =========================================\n BUKA \/ TUTUP SEARCH OVERLAY\n ========================================= *\/\n var btnOpen = document.getElementById('btn-search-open');\n var btnClose = document.getElementById('btn-search-close');\n var overlay = document.getElementById('search-overlay');\n var input = document.getElementById('search-input-overlay');\n\n function openSearch() {\n overlay.style.display = 'flex';\n document.body.style.overflow = 'hidden';\n setTimeout(function () { input.focus(); }, 50);\n }\n\n function closeSearch() {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n\n btnOpen.addEventListener('click', openSearch);\n btnClose.addEventListener('click', closeSearch);\n\n overlay.addEventListener('click', function (e) {\n if (e.target === overlay) closeSearch();\n });\n\n document.addEventListener('keydown', function (e) {\n if (e.key === 'Escape' && overlay.style.display === 'flex') closeSearch();\n });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2a5bcb2 e-con-full e-flex e-con e-parent\" data-id=\"2a5bcb2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e68f74 elementor-widget elementor-widget-html\" data-id=\"1e68f74\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Header Program Studi TI<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\n\/* ===== RESET ===== *\/\n*, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody{\n background: transparent;\n margin: 0;\n padding: 0;\n font-family: 'Poppins', sans-serif;\n}\n\n\/* =====================================================\n HEADER\n===================================================== *\/\n.site-header-ti{\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:24px;\n width:100%;\n padding:14px 28px;\n position:relative;\n}\n\n\/* ===== LOGO + TEKS ===== *\/\n.logo-block-ti{\n display:flex;\n align-items:center;\n gap:14px;\n text-decoration:none;\n flex-shrink:0;\n}\n\n.logo-block-ti img{\n height:56px;\n width:auto;\n flex-shrink:0;\n}\n\n.logo-text-ti{\n display:flex;\n flex-direction:column;\n line-height:1.15;\n}\n\n.logo-text-ti .logo-title{\n font-size:20px;\n font-weight:800;\n color:#3559DB;\n letter-spacing:0.3px;\n}\n\n.logo-text-ti .logo-subtitle{\n font-size:20px;\n font-weight:800;\n color:#1a1a1a;\n letter-spacing:0.3px;\n}\n\n\/* ===== WRAPPER MENU (dari kode menu sebelumnya) ===== *\/\n.menu-wrapper{\n position:relative;\n flex-shrink:0;\n}\n\n\/* ===== HAMBURGER ===== *\/\n.menu-toggle{\n display:none;\n background:#3559DB;\n color:#fff;\n border:none;\n border-radius:8px;\n padding:10px 14px;\n font-size:22px;\n cursor:pointer;\n font-family:'Poppins', sans-serif;\n}\n\n\/* ===== MENU WRAPPER ===== *\/\n.menu-ti {\n font-family: 'Poppins', sans-serif;\n}\n\n\/* ===== UL LEVEL 1 ===== *\/\n.menu-ti > ul {\n list-style: none;\n display: flex;\n flex-wrap: nowrap;\n gap: 6px;\n align-items: center;\n padding: 0;\n margin: 0;\n}\n\n\/* ===== LI LEVEL 1 ===== *\/\n.menu-ti > ul > li {\n position: relative;\n}\n\n.menu-ti > ul > li > a.active{\n background:#032B63;\n color:#fff;\n}\n\n\/* ===== TOMBOL LEVEL 1 ===== *\/\n.menu-ti > ul > li > a {\n display: block;\n padding: 9px 16px;\n background: #3559DB;\n color: #fff;\n border-radius: 8px;\n text-decoration: none;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n transition: background 0.25s, box-shadow 0.2s;\n}\n\n.menu-ti > ul > li > a:hover,\n.menu-ti > ul > li.is-open > a {\n background: #2747bd;\n box-shadow: 0 4px 12px rgba(53,89,219,0.35);\n}\n\n\/* ===== SUBMENU BIASA ===== *\/\n.menu-ti > ul > li > ul {\n list-style: none;\n position: fixed;\n min-width: 220px;\n background: #ffffff;\n border-radius: 0 0 8px 8px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.12);\n overflow: visible;\n display: none;\n z-index: 99999;\n padding: 0;\n border-top: 3px solid #305CDE;\n}\n\n\/* ===== TRANSPARENT HOVER BRIDGE ===== *\/\n.menu-ti > ul > li > ul::before,\n.menu-ti > ul > li > .mega-menu::before{\n content:'';\n position:absolute;\n top:-10px;\n left:0;\n width:100%;\n height:10px;\n background:transparent;\n}\n\n.menu-ti > ul > li.is-open > ul {\n display: block;\n}\n\n\/* ===== ITEM SUBMENU ===== *\/\n.menu-ti > ul > li > ul > li > a {\n display: block;\n padding: 12px 18px;\n color: #555;\n text-decoration: none;\n font-size: 13px;\n background: #ffffff;\n border-bottom: 1px solid #e5e5e5;\n white-space: nowrap;\n transition: background 0.2s, color 0.2s, padding-left 0.2s;\n}\n\n.menu-ti > ul > li > ul > li:last-child > a {\n border-bottom: none;\n}\n\n.menu-ti > ul > li > ul > li > a:hover {\n background: #eaeaea;\n color: #032B63;\n padding-left: 24px;\n}\n\n\/* ===== MEGA MENU ===== *\/\n.mega-menu {\n position: fixed;\n background: #ffffff;\n display: none;\n padding: 32px 36px;\n grid-template-columns: repeat(4, 1fr);\n gap: 28px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.12);\n border-radius: 0 0 8px 8px;\n z-index: 99999;\n min-width: 700px;\n border-top: 3px solid #305CDE;\n}\n\n.menu-ti > ul > li.is-open > .mega-menu {\n display: grid;\n}\n\n\/* ===== KOLOM MEGA MENU ===== *\/\n.mega-column h4 {\n color: #1f3566;\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 2px solid #3559DB;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.mega-column a {\n display: block;\n text-decoration: none;\n color: #555;\n margin-bottom: 9px;\n font-size: 13px;\n transition: color 0.2s, transform 0.2s;\n}\n\n.mega-column a:hover {\n color: #032B63;\n transform: translateX(4px);\n}\n\n\/* =====================================================\n MOBILE\n===================================================== *\/\n@media (max-width: 768px) {\n\n .site-header-ti{\n width:100%; \n padding:10px 16px;\n flex-direction:column;\n align-items:center;\n gap:120px;\n }\n\n .menu-wrapper{\n order:-1;\n align-self:flex-start;\n }\n\n .logo-block-ti{\n order:1;\n flex-direction:column;\n text-align:center;\n }\n\n .logo-text-ti{\n align-items:center;\n }\n\n .logo-block-ti img{\n height:42px;\n width:auto;\n }\n\n .logo-text-ti .logo-title,\n .logo-text-ti .logo-subtitle{\n font-size:13px;\n }\n\n .menu-wrapper{\n position:relative;\n z-index:999999;\n order:-1;\n align-self:flex-start;\n }\n\n \/* HAMBURGER \u2014 putih, rata kiri *\/\n .menu-toggle{\n display:flex !important;\n align-items:center;\n justify-content:center;\n\n width:32px;\n height:32px;\n\n padding:0;\n\n background:transparent;\n border:none;\n outline:none;\n\n color:#ffffff;\n\n font-size:26px;\n line-height:1;\n\n cursor:pointer;\n\n position:relative;\n z-index:999999;\n\n transition: transform 0.3s ease;\n }\n\n .menu-toggle:hover{\n background:transparent;\n box-shadow:none;\n }\n\n .menu-toggle.is-active{\n transform: rotate(90deg);\n }\n\n \/* MENU CONTAINER *\/\n .menu-ti{\n position:absolute;\n top:8px;\n left:0;\n\n width:210px;\n\n z-index:999998;\n\n opacity:0;\n visibility:hidden;\n transform:translateY(-12px);\n pointer-events:none;\n transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;\n }\n\n .menu-ti.active{\n opacity:1;\n visibility:visible;\n transform:translateY(0);\n pointer-events:auto;\n transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;\n }\n\n \/* UL *\/\n .menu-ti > ul{\n flex-direction:column;\n align-items:stretch;\n gap:6px;\n }\n\n \/* ITEM *\/\n .menu-ti > ul > li{\n width:100%;\n }\n\n \/* BUTTON MENU *\/\n .menu-ti > ul > li > a{\n width:100%;\n padding:12px 16px;\n font-size:12px;\n font-weight:600;\n border-radius:12px;\n background:#3559DB;\n box-shadow:0 4px 10px rgba(0,0,0,0.08);\n }\n\n .menu-ti > ul > li::after{\n content:'';\n position:absolute;\n left:0;\n top:100%;\n width:100%;\n height:30px;\n }\n\n \/* SUBMENU *\/\n .menu-ti > ul > li > ul,\n .mega-menu{\n position:relative !important;\n top:0 !important;\n left:0 !important;\n width:100% !important;\n min-width:100% !important;\n margin-top:4px;\n border-radius:12px;\n box-shadow:none;\n display:none;\n }\n\n .menu-ti > ul > li.is-open > ul,\n .menu-ti > ul > li.is-open > .mega-menu{\n display:block;\n }\n\n .mega-menu {\n position: fixed;\n background: #ffffff;\n display: none;\n padding: 32px 36px;\n grid-template-columns: repeat(4, 1fr);\n gap: 28px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.12);\n border-radius: 0 0 8px 8px;\n z-index: 99999;\n min-width: 700px;\n border-top: 3px solid #305CDE;\n overflow: visible;\n }\n}\n\n\n<\/style>\n<\/head>\n\n<body>\n\n<header class=\"site-header-ti\">\n\n \n <a href=\"\/ti\" class=\"logo-block-ti\">\n <img decoding=\"async\" src=\"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png\" alt=\"Logo Program Studi Teknologi Informasi\">\n <div class=\"logo-text-ti\">\n <span class=\"logo-title\">PROGRAM STUDI<\/span>\n <span class=\"logo-subtitle\">TEKNOLOGI INFORMASI<\/span>\n <\/div>\n <\/a>\n\n \n <div class=\"menu-wrapper\">\n\n \n <button class=\"menu-toggle\" id=\"menuToggle\">\n <span id=\"menuToggleIcon\">\u2630<\/span>\n <\/button>\n\n <nav class=\"menu-ti\" id=\"menuTI\">\n\n <ul>\n\n <li>\n <a href=\"\/ti\/profil\">Profil<\/a>\n <\/li>\n\n <li>\n <a href=\"\/ti\/tata_kelola\">Tata Kelola<\/a>\n <\/li>\n\n <li>\n <a href=\"\/ti\/dosen-pengampu\">Dosen Pengampu<\/a>\n <\/li>\n\n <li>\n <a href=\"#\">Pendidikan<\/a>\n <ul>\n <li><a href=\"\/ti\/akreditasi\">Akreditasi<\/a><\/li>\n <li><a href=\"\/ti\/kurikulum\">Kurikulum<\/a><\/li>\n <li><a href=\"\/ti\/pedoman\">Pedoman<\/a><\/li>\n <li><a href=\"\/ti\/sebaran-matkul\">Sebaran Matkul<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Mahasiswa<\/a>\n <ul>\n <li><a href=\"\/ti\/prestasi\">Prestasi<\/a><\/li>\n <li><a href=\"\/ti\/hmps\">HMPS<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Penelitian<\/a>\n <ul>\n <li><a href=\"\/ti\/e-jurnal\">E-Jurnal<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Pengabdian<\/a>\n <ul>\n <li><a href=\"\/ti\/pengabdian-dosen\">Pengabdian Dosen<\/a><\/li>\n <li><a href=\"\/ti\/pengabdian-mhs\">Pengabdian Mhs<\/a><\/li>\n <\/ul>\n <\/li>\n\n \n <li>\n <a href=\"#\">Layanan<\/a>\n\n <div class=\"mega-menu\">\n\n <div class=\"mega-column\">\n <h4>Layanan Mahasiswa<\/h4>\n <a href=\"\/ti\/layanan\/siakad\">SIAKAD<\/a>\n <a href=\"\/ti\/layanan\/smart\">SMART<\/a>\n <a href=\"\/ti\/layanan\/smart-mobile\">SMART Mobile<\/a>\n <a href=\"\/ti\/layanan\/e-class\">E-Class<\/a>\n <a href=\"\/ti\/layanan\/beasiswa\">Beasiswa<\/a>\n <a href=\"\/ti\/layanan\/karir-wirausaha\">Karir dan Wirausaha<\/a>\n <a href=\"\/ti\/layanan\/kesehatan\">Kesehatan<\/a>\n <\/div>\n\n <div class=\"mega-column\">\n <h4>Layanan Dosen<\/h4>\n <a href=\"\/ti\/layanan\/siakad\">SIAKAD<\/a>\n <a href=\"\/ti\/layanan\/smart\">SMART<\/a>\n <a href=\"\/ti\/layanan\/simpis\">SIMPIS<\/a>\n <a href=\"\/ti\/layanan\/siperaga\">SIPERAGA<\/a>\n <\/div>\n\n <div class=\"mega-column\">\n <h4>Layanan Tendik<\/h4>\n <a href=\"\/ti\/layanan\/simpis\">SIMPIS<\/a>\n <a href=\"\/ti\/layanan\/siperaga\">SIPERAGA<\/a>\n <\/div>\n\n <div class=\"mega-column\">\n <h4>Layanan Disabilitas<\/h4>\n <a href=\"\/ti\/layanan\/disabilitas\">Layanan Disabilitas<\/a>\n <a href=\"\/ti\/layanan\/pedoman-disabilitas\">Pedoman<\/a>\n <\/div>\n\n <\/div>\n <\/li>\n\n <li>\n <a href=\"#\">Kerjasama<\/a>\n <ul>\n <li><a href=\"\/ti\/kerjasama-ln\">Kerjasama Luar Negeri<\/a><\/li>\n <li><a href=\"\/ti\/kerjasama-dn\">Kerjasama Dalam Negeri<\/a><\/li>\n <li><a href=\"\/ti\/industri\">Industri<\/a><\/li>\n <li><a href=\"\/ti\/asosiasi\">Asosiasi<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Survei<\/a>\n <ul>\n <li><a href=\"\/ti\/survey-vmts\">Survey Pemahaman VMTS<\/a><\/li>\n <li><a href=\"\/ti\/survey-pelayanan\">Survey Kepuasan Pelayanan <br>Akademik<\/a><\/li>\n <\/ul>\n <\/li>\n\n <\/ul>\n\n <\/nav>\n\n <\/div>\n\n<\/header>\n\n<script>\n(function () {\n\n \/* =========================================\n HAMBURGER TOGGLE\n ========================================= *\/\n const toggleBtn = document.getElementById('menuToggle');\n const toggleIcon = document.getElementById('menuToggleIcon');\n const menuTI = document.getElementById('menuTI');\n\n toggleBtn.addEventListener('click', function () {\n\n const willOpen = !menuTI.classList.contains('active');\n\n menuTI.classList.toggle('active', willOpen);\n toggleBtn.classList.toggle('is-active', willOpen);\n\n toggleIcon.textContent = willOpen ? '\u2715' : '\u2630';\n\n if (!willOpen) {\n items.forEach(function (li) {\n li.classList.remove('is-open');\n });\n }\n });\n\n \/* =========================================\n DROPDOWN POSITION DESKTOP\n Diposisikan relatif ke tombol menu itu sendiri\n (bukan ke elemen <header> global), supaya jarak\n ke kotak submenu selalu dekat & konsisten meskipun\n tema WordPress punya struktur header yang berbeda.\n ========================================= *\/\n var GAP = 43; \/\/ jarak vertikal antara tombol menu dan kotak submenu\n\n function positionDropdown(li) {\n\n if (window.innerWidth <= 768) return;\n\n var dropdown =\n li.querySelector(':scope > ul') ||\n li.querySelector(':scope > .mega-menu');\n\n if (!dropdown) return;\n\n var btn = li.querySelector(':scope > a');\n\n var btnRect = btn.getBoundingClientRect();\n\n var isMega = dropdown.classList.contains('mega-menu');\n\n var prevDisplay = dropdown.style.display;\n\n dropdown.style.visibility = 'hidden';\n\n dropdown.style.display = isMega ? 'grid' : 'block';\n\n var dropW = dropdown.offsetWidth;\n\n dropdown.style.display = prevDisplay;\n\n dropdown.style.visibility = '';\n\n dropdown.style.top = (btnRect.bottom + GAP) + 'px';\n\n if (isMega) {\n\n var left = btnRect.right - dropW;\n\n if (left < 8) left = 8;\n\n if (left + dropW > window.innerWidth - 8) {\n left = window.innerWidth - dropW - 8;\n }\n\n dropdown.style.left = left + 'px';\n\n } else {\n\n var left =\n btnRect.left +\n (btnRect.width \/ 2) -\n (dropW \/ 2);\n\n if (left < 8) left = 8;\n\n if (left + dropW > window.innerWidth - 8) {\n left = window.innerWidth - dropW - 8;\n }\n\n dropdown.style.left = left + 'px';\n }\n }\n\n \/* =========================================\n MENU ITEMS\n Pakai timer sebelum menutup dropdown, supaya\n kursor sempat berpindah dari tombol menu ke\n kotak submenu tanpa dropdown keburu hilang.\n ========================================= *\/\n var items = document.querySelectorAll('.menu-ti > ul > li');\n\n \/* setiap <li> punya timer penutupnya masing-masing, supaya\n hover-timer satu menu tidak ikut membatalkan timer menu lain *\/\n var closeTimers = new Map();\n\n function cancelClose(li) {\n if (closeTimers.has(li)) {\n clearTimeout(closeTimers.get(li));\n closeTimers.delete(li);\n }\n }\n\n function scheduleClose(li) {\n cancelClose(li);\n var t = setTimeout(function () {\n li.classList.remove('is-open');\n closeTimers.delete(li);\n }, 250);\n closeTimers.set(li, t);\n }\n\n \/* hanya boleh satu submenu yang terbuka dalam satu waktu *\/\n function closeAllExcept(li) {\n items.forEach(function (other) {\n if (other !== li) {\n cancelClose(other);\n other.classList.remove('is-open');\n }\n });\n }\n\n items.forEach(function (li) {\n\n var dropdown =\n li.querySelector(':scope > ul') ||\n li.querySelector(':scope > .mega-menu');\n\n if (!dropdown) return;\n\n \/* DESKTOP: hover tombol menu *\/\n li.addEventListener('mouseenter', function () {\n\n if (window.innerWidth <= 768) return;\n\n cancelClose(li);\n closeAllExcept(li);\n\n positionDropdown(li);\n\n li.classList.add('is-open');\n });\n\n li.addEventListener('mouseleave', function () {\n\n if (window.innerWidth <= 768) return;\n\n scheduleClose(li);\n });\n\n \/* DESKTOP: hover kotak submenu itu sendiri\n (dropdown posisinya \"fixed\" di layar, jadi perlu\n listener terpisah supaya tetap terbuka saat kursor\n ada di atasnya) *\/\n dropdown.addEventListener('mouseenter', function () {\n\n if (window.innerWidth <= 768) return;\n\n cancelClose(li);\n closeAllExcept(li);\n\n li.classList.add('is-open');\n });\n\n dropdown.addEventListener('mouseleave', function () {\n\n if (window.innerWidth <= 768) return;\n\n scheduleClose(li);\n });\n\n \/* MOBILE *\/\n var link = li.querySelector(':scope > a');\n\n link.addEventListener('click', function (e) {\n\n if (window.innerWidth > 768) return;\n\n e.preventDefault();\n\n items.forEach(function (other) {\n\n if (other !== li) {\n other.classList.remove('is-open');\n }\n\n });\n\n li.classList.toggle('is-open');\n\n });\n\n });\n\n \/* =========================================\n UPDATE POSITION\n ========================================= *\/\n window.addEventListener('scroll', function () {\n\n var open =\n document.querySelector('.menu-ti > ul > li.is-open');\n\n if (open) positionDropdown(open);\n\n }, { passive: true });\n\n window.addEventListener('resize', function () {\n\n var open =\n document.querySelector('.menu-ti > ul > li.is-open');\n\n if (open) positionDropdown(open);\n\n });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-39e6951 e-con-full e-flex e-con e-parent\" data-id=\"39e6951\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b49617 elementor-widget elementor-widget-html\" data-id=\"5b49617\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap');\n<\/style>\n\n<div class=\"ab-wrapper\">\n\n <div class=\"ab-header\">\n <h1>Berita<\/h1>\n <p id=\"abSubtitle\">Memuat data...<\/p>\n <\/div>\n\n <div class=\"ab-filter\">\n <div class=\"ab-filter-group\">\n <label for=\"abFilterMonth\">Bulan<\/label>\n <select id=\"abFilterMonth\">\n <option value=\"0\">Semua Bulan<\/option>\n <\/select>\n <\/div>\n <div class=\"ab-filter-group\">\n <label for=\"abFilterYear\">Tahun<\/label>\n <select id=\"abFilterYear\">\n <option value=\"0\">Semua Tahun<\/option>\n <\/select>\n <\/div>\n <button class=\"ab-filter-reset\" id=\"abFilterReset\" type=\"button\">Reset<\/button>\n <\/div>\n\n <div class=\"ab-grid\" id=\"abGrid\">\n <div class=\"ab-loading\">Memuat berita...<\/div>\n <\/div>\n\n <div class=\"ab-pagination\" id=\"abPagination\"><\/div>\n\n<\/div>\n\n\n<style>\n\n\/* ==============================\n RESET\n============================== *\/\n\n.ab-wrapper * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n\n\/* ==============================\n WRAPPER\n============================== *\/\n\n.ab-wrapper {\n font-family: 'Poppins', sans-serif;\n width: 100%;\n background: #eef1f9;\n border-radius: 16px;\n padding: 32px clamp(16px, 4vw, 36px) 40px;\n}\n\n\n\/* ==============================\n HEADER\n============================== *\/\n\n.ab-header {\n margin-bottom: 24px;\n padding-bottom: 16px;\n border-bottom: 3px solid #305CDE;\n}\n\n.ab-header .ab-eyebrow {\n display: inline-block;\n background: #305CDE;\n color: #fff;\n font-size: 0.68rem;\n font-weight: 700;\n letter-spacing: 1.5px;\n padding: 4px 12px;\n border-radius: 4px;\n margin-bottom: 12px;\n text-transform: uppercase;\n}\n\n.ab-header h1 {\n font-size: 1.8rem;\n font-weight: 700;\n color: #1a1a1a;\n margin-bottom: 6px;\n}\n\n.ab-header p {\n font-size: 0.85rem;\n color: #777;\n}\n\n\n\/* ==============================\n FILTER BAR\n============================== *\/\n\n.ab-filter {\n display: flex;\n align-items: flex-end;\n gap: 16px;\n flex-wrap: wrap;\n margin-bottom: 28px;\n padding: 18px 20px;\n background: #fff;\n border: 1px solid #e6e6e6;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(20, 30, 60, 0.05);\n}\n\n.ab-filter-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.ab-filter-group label {\n font-size: 0.72rem;\n font-weight: 600;\n color: #666;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.ab-filter-group select {\n font-family: 'Poppins', sans-serif;\n font-size: 0.85rem;\n font-weight: 500;\n color: #222;\n background: #fff;\n border: 1px solid #d8d8d8;\n border-radius: 6px;\n padding: 8px 12px;\n min-width: 160px;\n cursor: pointer;\n}\n\n.ab-filter-group select:focus {\n outline: none;\n border-color: #305CDE;\n}\n\n.ab-filter-reset {\n font-family: 'Poppins', sans-serif;\n font-size: 0.82rem;\n font-weight: 600;\n color: #305CDE;\n background: #fff;\n border: 1px solid #305CDE;\n border-radius: 6px;\n padding: 8px 16px;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n}\n\n.ab-filter-reset:hover {\n background: #305CDE;\n color: #fff;\n}\n\n\n\/* ==============================\n GRID\n============================== *\/\n\n.ab-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n min-height: 200px;\n}\n\n\n\/* ==============================\n CARD\n============================== *\/\n\n.ab-card {\n background: #fff;\n border: 1px solid #e6e6e6;\n border-radius: 12px;\n overflow: hidden;\n text-decoration: none;\n display: flex;\n flex-direction: column;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.ab-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 10px 24px rgba(48, 92, 222, 0.14);\n}\n\n.ab-card-img-wrap {\n position: relative;\n width: 100%;\n aspect-ratio: 16 \/ 10;\n background: #1a3a8f;\n overflow: hidden;\n}\n\n.ab-card-img {\n position: absolute !important;\n inset: 0 !important;\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n max-width: 100% !important;\n object-fit: cover !important;\n object-position: center !important;\n display: block !important;\n margin: 0 !important;\n padding: 0 !important;\n border: none !important;\n image-rendering: crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n}\n\n.ab-card-img-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.8rem;\n color: rgba(255,255,255,0.6);\n background: #1a3a8f;\n}\n\n.ab-card-kategori {\n position: absolute;\n top: 10px;\n left: 10px;\n background: #305CDE;\n color: #fff;\n font-size: 0.68rem;\n font-weight: 700;\n padding: 3px 10px;\n border-radius: 4px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.ab-card-body {\n padding: 16px;\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n.ab-card-title {\n font-size: 0.95rem;\n font-weight: 600;\n color: #1a1a1a;\n line-height: 1.4;\n margin-bottom: 8px;\n}\n\n.ab-card-excerpt {\n font-size: 0.8rem;\n color: #777;\n line-height: 1.5;\n margin-bottom: 12px;\n flex: 1;\n}\n\n.ab-card-date {\n font-size: 0.72rem;\n color: #999;\n padding-top: 10px;\n border-top: 1px solid #f0f0f0;\n}\n\n\n\/* ==============================\n LOADING \/ EMPTY\n============================== *\/\n\n.ab-loading,\n.ab-empty {\n grid-column: 1 \/ -1;\n text-align: center;\n padding: 60px 20px;\n color: #888;\n font-size: 0.9rem;\n}\n\n\n\/* ==============================\n PAGINATION\n============================== *\/\n\n.ab-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n margin-top: 32px;\n flex-wrap: wrap;\n}\n\n.ab-page-btn {\n min-width: 36px;\n height: 36px;\n padding: 0 8px;\n border: 1px solid #e0e0e0;\n background: #fff;\n color: #444;\n font-family: 'Poppins', sans-serif;\n font-size: 0.82rem;\n font-weight: 600;\n border-radius: 6px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.ab-page-btn:hover:not(:disabled):not(.ab-page-dots) {\n background: #f0f4ff;\n border-color: #305CDE;\n color: #305CDE;\n}\n\n.ab-page-btn.active {\n background: #305CDE;\n border-color: #305CDE;\n color: #fff;\n}\n\n.ab-page-btn:disabled {\n opacity: 0.4;\n cursor: default;\n}\n\n.ab-page-dots {\n border: none;\n background: none;\n cursor: default;\n color: #999;\n}\n\n\n\/* ==============================\n RESPONSIVE\n============================== *\/\n\n@media (max-width: 900px) {\n .ab-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 560px) {\n .ab-grid {\n grid-template-columns: 1fr;\n }\n}\n\n<\/style>\n\n\n<script>\n(function() {\n\n const PER_PAGE = 9;\n let abCurrentPage = 1;\n let abMaxPages = 1;\n let abTotal = 0;\n let abFilterYear = 0;\n let abFilterMonth = 0;\n let abArsipData = [];\n\n const NAMA_BULAN = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',\n 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];\n\n function formatTanggal(iso) {\n try {\n return new Date(iso).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' });\n } catch (e) {\n return '';\n }\n }\n\n function getFullImageUrl(url) {\n if (!url) return '';\n return url.replace(\/(-\\d+x\\d+)\\.(jpg|jpeg|png|webp)$\/i, '.$2');\n }\n\n async function loadArsipList() {\n try {\n const formData = new FormData();\n formData.append('action', 'get_berita_arsip');\n\n const res = await fetch('\/ti\/wp-admin\/admin-ajax.php', { method: 'POST', body: formData });\n const data = await res.json();\n abArsipData = data.arsip || [];\n populateFilterDropdowns();\n } catch (e) {\n console.error('Gagal memuat daftar arsip', e);\n }\n }\n\n function populateFilterDropdowns() {\n const yearSelect = document.getElementById('abFilterYear');\n const monthSelect = document.getElementById('abFilterMonth');\n\n const years = [...new Set(abArsipData.map(a => a.year))].sort((a, b) => b - a);\n yearSelect.innerHTML = '<option value=\"0\">Semua Tahun<\/option>' +\n years.map(y => `<option value=\"${y}\">${y}<\/option>`).join('');\n\n updateMonthOptions();\n\n yearSelect.addEventListener('change', () => {\n abFilterYear = parseInt(yearSelect.value, 10);\n updateMonthOptions();\n abFilterMonth = 0;\n monthSelect.value = '0';\n loadBeritaPage(1);\n });\n\n monthSelect.addEventListener('change', () => {\n abFilterMonth = parseInt(monthSelect.value, 10);\n loadBeritaPage(1);\n });\n\n document.getElementById('abFilterReset').addEventListener('click', () => {\n abFilterYear = 0;\n abFilterMonth = 0;\n yearSelect.value = '0';\n updateMonthOptions();\n monthSelect.value = '0';\n loadBeritaPage(1);\n });\n }\n\n \/\/ Bulan yang ditampilkan hanya yang punya berita, dan cuma untuk tahun yang dipilih\n \/\/ (kalau \"Semua Tahun\" dipilih, gabungkan semua bulan yang pernah ada).\n function updateMonthOptions() {\n const monthSelect = document.getElementById('abFilterMonth');\n const relevant = abFilterYear > 0\n ? abArsipData.filter(a => a.year === abFilterYear)\n : abArsipData;\n\n const months = [...new Set(relevant.map(a => a.month))].sort((a, b) => a - b);\n monthSelect.innerHTML = '<option value=\"0\">Semua Bulan<\/option>' +\n months.map(m => `<option value=\"${m}\">${NAMA_BULAN[m]}<\/option>`).join('');\n }\n\n async function loadBeritaPage(page) {\n const grid = document.getElementById('abGrid');\n const subtitle = document.getElementById('abSubtitle');\n\n grid.innerHTML = '<div class=\"ab-loading\">Memuat berita...<\/div>';\n\n try {\n const formData = new FormData();\n formData.append('action', 'get_berita_ti_page');\n formData.append('paged', page);\n formData.append('per_page', PER_PAGE);\n if (abFilterYear > 0) formData.append('year', abFilterYear);\n if (abFilterMonth > 0) formData.append('month', abFilterMonth);\n\n \/\/ \u26a0\ufe0f CEK BARIS INI: sesuaikan path dengan struktur URL situsmu.\n \/\/ Kalau situsmu di root (namasitus.com), pakai: '\/wp-admin\/admin-ajax.php' (sudah default di bawah)\n \/\/ Kalau situsmu di subfolder (namasitus.com\/nama-folder\/), pakai: '\/nama-folder\/wp-admin\/admin-ajax.php'\n const res = await fetch('\/ti\/wp-admin\/admin-ajax.php', { method: 'POST', body: formData });\n const data = await res.json();\n\n abCurrentPage = data.paged || page;\n abMaxPages = data.max_pages || 1;\n abTotal = data.total || 0;\n\n subtitle.textContent = abTotal > 0\n ? `Menampilkan halaman ${abCurrentPage} dari ${abMaxPages} (${abTotal} berita)`\n : 'Belum ada berita.';\n\n renderGrid(data.posts || []);\n renderPagination();\n\n window.scrollTo({ top: document.querySelector('.ab-wrapper').offsetTop - 20, behavior: 'smooth' });\n\n } catch (e) {\n grid.innerHTML = '<div class=\"ab-empty\">Gagal memuat berita.<\/div>';\n console.error(e);\n }\n }\n\n function renderGrid(posts) {\n const grid = document.getElementById('abGrid');\n\n if (!posts.length) {\n grid.innerHTML = '<div class=\"ab-empty\">Tidak ada berita ditemukan.<\/div>';\n return;\n }\n\n grid.innerHTML = posts.map(b => `\n <a class=\"ab-card\" href=\"${b.link}\">\n <div class=\"ab-card-img-wrap\">\n ${ b.gambar\n ? `<img decoding=\"async\" class=\"ab-card-img\" src=\"${getFullImageUrl(b.gambar)}\" alt=\"${b.title}\" loading=\"lazy\" onerror=\"this.parentElement.innerHTML='<div class=\\\\'ab-card-img-placeholder\\\\'>\ud83d\udcf0<\/div>'\">`\n : `<div class=\"ab-card-img-placeholder\">\ud83d\udcf0<\/div>`\n }\n <span class=\"ab-card-kategori\">${b.kategori}<\/span>\n <\/div>\n <div class=\"ab-card-body\">\n <div class=\"ab-card-title\">${b.title}<\/div>\n ${ b.excerpt ? `<div class=\"ab-card-excerpt\">${b.excerpt}<\/div>` : '' }\n <div class=\"ab-card-date\">\ud83d\udcc5 ${formatTanggal(b.date)}<\/div>\n <\/div>\n <\/a>\n `).join('');\n }\n\n function renderPagination() {\n const pag = document.getElementById('abPagination');\n\n if (abMaxPages <= 1) {\n pag.innerHTML = '';\n return;\n }\n\n const pages = getPageList(abCurrentPage, abMaxPages);\n let html = '';\n\n html += `<button class=\"ab-page-btn\" ${abCurrentPage === 1 ? 'disabled' : ''} data-page=\"${abCurrentPage - 1}\">‹<\/button>`;\n\n pages.forEach(p => {\n if (p === '...') {\n html += `<span class=\"ab-page-btn ab-page-dots\">...<\/span>`;\n } else {\n html += `<button class=\"ab-page-btn ${p === abCurrentPage ? 'active' : ''}\" data-page=\"${p}\">${p}<\/button>`;\n }\n });\n\n html += `<button class=\"ab-page-btn\" ${abCurrentPage === abMaxPages ? 'disabled' : ''} data-page=\"${abCurrentPage + 1}\">›<\/button>`;\n\n pag.innerHTML = html;\n\n pag.querySelectorAll('.ab-page-btn[data-page]').forEach(btn => {\n btn.addEventListener('click', () => {\n const page = parseInt(btn.getAttribute('data-page'), 10);\n if (page >= 1 && page <= abMaxPages && page !== abCurrentPage) {\n loadBeritaPage(page);\n }\n });\n });\n }\n\n \/\/ Menghasilkan daftar nomor halaman dengan elipsis, misal: 1 ... 4 5 6 ... 20\n function getPageList(current, max) {\n const delta = 2;\n const range = [];\n const rangeWithDots = [];\n let last;\n\n for (let i = 1; i <= max; i++) {\n if (i === 1 || i === max || (i >= current - delta && i <= current + delta)) {\n range.push(i);\n }\n }\n\n range.forEach(i => {\n if (last) {\n if (i - last === 2) {\n rangeWithDots.push(last + 1);\n } else if (i - last > 2) {\n rangeWithDots.push('...');\n }\n }\n rangeWithDots.push(i);\n last = i;\n });\n\n return rangeWithDots;\n }\n\n loadArsipList();\n loadBeritaPage(1);\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Top Bar – Follow Us & Search Follow Us : Header Program Studi TI PROGRAM STUDI TEKNOLOGI INFORMASI \u2630 Profil […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1570","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Berita - Program Studi Teknologi Informasi<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Berita - Program Studi Teknologi Informasi\" \/>\n<meta property=\"og:description\" content=\"Top Bar – Follow Us & Search Follow Us : Header Program Studi TI PROGRAM STUDI TEKNOLOGI INFORMASI \u2630 Profil […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/\" \/>\n<meta property=\"og:site_name\" content=\"Program Studi Teknologi Informasi\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-23T07:34:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/\",\"name\":\"Berita - Program Studi Teknologi Informasi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_UIN_Salatiga.png\",\"datePublished\":\"2026-07-23T07:03:31+00:00\",\"dateModified\":\"2026-07-23T07:34:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/#primaryimage\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_UIN_Salatiga.png\",\"contentUrl\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_UIN_Salatiga.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/berita\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Berita\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#website\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\",\"name\":\"Program Studi Teknologi Informasi\",\"description\":\"UNIVERSITAS ISLAM NEGERI SALATIGA\",\"publisher\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#organization\",\"name\":\"Program Studi Teknologi Informasi\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/05\\\/Logo_UIN_Salatiga.svg\",\"contentUrl\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/05\\\/Logo_UIN_Salatiga.svg\",\"width\":80,\"height\":80,\"caption\":\"Program Studi Teknologi Informasi\"},\"image\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Berita - Program Studi Teknologi Informasi","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/","og_locale":"en_US","og_type":"article","og_title":"Berita - Program Studi Teknologi Informasi","og_description":"Top Bar – Follow Us & Search Follow Us : Header Program Studi TI PROGRAM STUDI TEKNOLOGI INFORMASI \u2630 Profil […]","og_url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/","og_site_name":"Program Studi Teknologi Informasi","article_modified_time":"2026-07-23T07:34:21+00:00","og_image":[{"url":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/","name":"Berita - Program Studi Teknologi Informasi","isPartOf":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#website"},"primaryImageOfPage":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/#primaryimage"},"image":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/#primaryimage"},"thumbnailUrl":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png","datePublished":"2026-07-23T07:03:31+00:00","dateModified":"2026-07-23T07:34:21+00:00","breadcrumb":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/#primaryimage","url":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png","contentUrl":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png"},{"@type":"BreadcrumbList","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/berita\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/"},{"@type":"ListItem","position":2,"name":"Berita"}]},{"@type":"WebSite","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#website","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/","name":"Program Studi Teknologi Informasi","description":"UNIVERSITAS ISLAM NEGERI SALATIGA","publisher":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#organization","name":"Program Studi Teknologi Informasi","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#\/schema\/logo\/image\/","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/Logo_UIN_Salatiga.svg","contentUrl":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/Logo_UIN_Salatiga.svg","width":80,"height":80,"caption":"Program Studi Teknologi Informasi"},"image":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages\/1570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/comments?post=1570"}],"version-history":[{"count":22,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages\/1570\/revisions"}],"predecessor-version":[{"id":1595,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages\/1570\/revisions\/1595"}],"wp:attachment":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/media?parent=1570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}