{"id":2432,"date":"2025-09-19T13:48:36","date_gmt":"2025-09-19T13:48:36","guid":{"rendered":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/?page_id=2432"},"modified":"2025-09-19T13:48:36","modified_gmt":"2025-09-19T13:48:36","slug":"vpseri-numerasi","status":"publish","type":"page","link":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpseri-numerasi\/","title":{"rendered":"vpseri-numerasi"},"content":{"rendered":"\n<!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>Video Pembelajaran &#8211; Jenjang SD<\/title>\n    <style>\n        \/* [--- BAGIAN CSS MENU NAVIGASI ---] *\/\n        body { margin: 0; font-family: Arial, sans-serif; background:#f9f9f9; color:#222; }\n        .custom-nav { background: #0a4a82; position: sticky; top: 0; z-index: 1000; }\n        .menu { list-style: none; margin: 0; padding: 0; display: flex; }\n        .menu > li { position: relative; }\n        .menu > li > a { display: block; padding: 14px 20px; color: #fff; text-decoration: none; font-weight: 500; }\n        .menu > li > a:hover { background: #0e5aa0; }\n        .submenu { list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; background: #0e5aa0; display: none; min-width: 220px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }\n        .submenu li a { display: block; padding: 12px 16px; color: #fff; text-decoration: none; white-space: nowrap; }\n        .submenu li a:hover { background: #1372cf; }\n        .menu > li:hover .submenu { display: block; }\n        .hamburger { display: none; cursor: pointer; font-size: 22px; color: #fff; padding: 14px 20px; background: #0a4a82; border: none; }\n\n        @media (max-width: 900px) {\n            .menu { flex-direction: column; display: none; }\n            .menu.active { display: flex; }\n            .menu > li { width: 100%; }\n            .submenu { position: static; display: none; background: #1372cf; }\n            .menu > li.open > .submenu { display: block; }\n            .hamburger { display: block; }\n            .menu > li > a { padding: 12px 16px; }\n        }\n\n        \/* [--- BAGIAN CSS KONTEN HALAMAN ---] *\/\n        .content-header {\n            background: #c62828;\n            color: white;\n            padding: 15px 25px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            position: relative;\n            min-height: 100px;\n        }\n        .logo-title-group {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n        .logo-title-group h1 {\n            margin: 0 0 10px 0;\n            font-size: 36px;\n            color: #ffffff;\n        }\n        .logo-title-group img {\n            height: 70px;\n        }\n        .content-header input {\n            padding: 8px 12px;\n            border: none;\n            border-radius: 4px;\n            width: 200px;\n            background-color: #ffffff !important;\n            color: #333333 !important;\n            position: absolute;\n            right: 25px;\n            top: 50%;\n            transform: translateY(-50%);\n        }\n        .content-header input:focus {\n            outline: 2px solid #0e5aa0;\n        }\n\n        .section {padding:30px 20px;}\n        .section h2 {color:#1a237e; margin-bottom:20px; font-size: 2em;}\n\n        .intro-section { display: flex; align-items: center; gap: 30px; margin-bottom: 30px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }\n        .intro-logo { text-align: center; flex-shrink: 0; }\n        .intro-logo img { width: 250px; }\n        .intro-logo h3 { margin-top: 10px; font-size: 16px; color: #333; }\n        .intro-description p { margin: 0 0 15px 0; line-height: 1.6; color: #444; }\n        .intro-description p:last-child { margin-bottom: 0; }\n\n        .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }\n        .grid-2 {display:grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap:20px;}\n        .video-card { background:white; padding:15px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; }\n        .video-card h3 { font-size:16px; margin-top:0; margin-bottom: 10px; flex-grow: 1; }\n        \n        .video-placeholder { position: relative; cursor: pointer; border-radius: 6px; overflow: hidden; }\n        .video-placeholder img { width: 100%; display: block; transition: transform 0.2s ease; }\n        .video-placeholder:hover img { transform: scale(1.05); }\n        .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 42px; background-color: rgba(255, 0, 0, 0.8); border-radius: 10px; display: flex; align-items: center; justify-content: center; }\n        .play-button::after { content: ''; display: block; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent white; }\n\n        .resource-links { background:white; padding:15px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: center; }\n        .resource-links a { display:block; margin-bottom:10px; text-decoration:none; background:#1976d2; color:white; padding:10px; text-align:center; border-radius:6px; font-weight: bold; }\n        .resource-links a:last-child {margin-bottom: 0;}\n        .resource-links a:hover {background:#0d47a1;}\n\n        .desc {font-size:14px; color:#444; margin-top:15px; line-height: 1.5;}\n\n        .modal {display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.85); align-items:center; justify-content:center;}\n        .modal-content {position:relative; width:80%; max-width:900px;}\n        .modal-content iframe {width:100%; aspect-ratio: 16 \/ 9; border:none; border-radius:8px;}\n        .close {position:absolute; top:-15px; right:-15px; font-size:30px; color:white; background-color:#333; border-radius:50%; width:35px; height:35px; display:flex; align-items:center; justify-content:center; line-height:0; cursor:pointer;}\n\n        @media (max-width: 992px) {\n            .grid-container { grid-template-columns: repeat(2, 1fr); }\n            .intro-section { flex-direction: column; }\n        }\n        @media (max-width: 768px) {\n            .content-header { flex-direction: column; gap: 15px; position: static; }\n            .content-header input { position: static; transform: none; width: 100%; box-sizing: border-box; }\n            .grid-container { grid-template-columns: 1fr; }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <nav class=\"custom-nav\">\n        <button class=\"hamburger\" aria-label=\"Menu\">&#9776;<\/button>\n        <ul class=\"menu\">\n            <li>\n                <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vppaud\/\">Jenjang PAUD<\/a>\n                <ul class=\"submenu\">\n                    <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpayo-bernyanyi\/\">Ayo Bernyanyi<\/a><\/li>\n                    <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpmentari\/\">Mentari<\/a><\/li>\n                <\/ul>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpsd\/\">Jenjang SD<\/a>\n                <ul class=\"submenu\">\n                    <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpseni-musik\/\">Seni Musik<\/a><\/li>\n                    <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpseri-literasi\/\">Seri Literasi<\/a><\/li>\n                    <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpseri-numerasi\/\">Seri Numerasi<\/a><\/li>\n                <\/ul>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpsma\/\">Jenjang SMA<\/a>\n                <ul class=\"submenu\">\n                    <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpmapel-bahasa-inggris\/\">Mapel Bahasa Inggris<\/a><\/li>\n                    <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpmapel-bahasa-indonesia\/\">Mapel Bahasa Indonesia<\/a><\/li>\n                <\/ul>\n            <\/li>\n        <\/ul>\n    <\/nav>\n\n    <header class=\"content-header\">\n        <div class=\"logo-title-group\">\n            <h1>Jenjang SD<\/h1>\n            <img decoding=\"async\" src=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-content\/uploads\/sites\/5\/2024\/08\/SMART-removebg-preview.png\" alt=\"SMART\">\n        <\/div>\n        <input type=\"text\" id=\"searchInput\" placeholder=\"Cari video...\">\n    <\/header>\n\n    <main id=\"video-sections\">\n        <div class=\"section\">\n            <h2>Seri Numerasi<\/h2>\n            <div class=\"grid-2\">\n                <div class=\"video-card\">\n                    <h3>Operasi Hitung Persentase dalam Berbelanja Hemat<\/h3>\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/6UvWY2l6Mzg\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/6UvWY2l6Mzg\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <p class=\"desc\">Video ini diharapkan dapat meningkatkan pemahaman guru SD dalam menganalisis hubungan pecahan desimal dan persen dalam kehidupan sehari-hari.<\/p>\n                <\/div>\n                <div class=\"video-card\">\n                    <h3>Pembelajaran Numerasi Domain Aljabar<\/h3>\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/iU4Bcz3uDX0\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/iU4Bcz3uDX0\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <p class=\"desc\">Video ini diharapkan dapat memberikan wawasan dan pemahaman kepada guru SD terkait praktik baik pembelajaran numerasi pada domain aljabar.<\/p>\n                <\/div>\n                <div class=\"video-card\">\n                    <h3>Olah Data Jadi Mujur<\/h3>\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/CFSm0fQ0ZTA\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/CFSm0fQ0ZTA\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <p class=\"desc\">Video ini diharapkan dapat memberikan gambaran praktik baik pembelajaran bagi guru SD terkait numerasi domain data dan ketidakpastian.<\/p>\n                <\/div>\n                <div class=\"video-card\">\n                    <h3>Rumah Impianku dengan Seni Geometri<\/h3>\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/0-wdGuEYi-o\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/0-wdGuEYi-o\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <p class=\"desc\">Video ini diharapkan dapat memberikan gambaran praktik baik pembelajaran bagi guru SD terkait numerasi domain geometri bangun ruang dan visualisasi spasial.<\/p>\n                <\/div>\n                <div class=\"video-card\">\n                    <h3>Ayo Ekplorasi Numerasi<\/h3>\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/XgYAqx__aYk\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/XgYAqx__aYk\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <p class=\"desc\">Video ini diharapkan dapat menjadi pemicu untuk memberikan wawasan dan pemahaman kepada guru SD terkait pemahaman tentang numerasi.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/main>\n    \n    <div class=\"modal\" id=\"videoModal\">\n      <div class=\"modal-content\">\n        <span class=\"close\" id=\"closeModalButton\">&times;<\/span>\n        <iframe id=\"modalVideo\" src=\"about:blank\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe>\n      <\/div>\n    <\/div>\n\n    <script src=\"https:\/\/code.responsivevoice.org\/responsivevoice.js?key=xIDG6JzF\"><\/script>\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const hamburger = document.querySelector('.hamburger');\n            const menu = document.querySelector('.menu');\n            hamburger.addEventListener('click', () => { menu.classList.toggle('active'); });\n            document.querySelectorAll('.menu > li > a').forEach(link => {\n                link.addEventListener('click', e => {\n                    if (window.innerWidth <= 900) {\n                        const parentLi = link.parentElement;\n                        if (parentLi.querySelector('.submenu')) { e.preventDefault(); parentLi.classList.toggle('open'); }\n                    }\n                });\n            });\n\n            const searchInput = document.getElementById('searchInput');\n            const modal = document.getElementById(\"videoModal\");\n            const modalVideo = document.getElementById(\"modalVideo\");\n            const closeModalBtn = document.getElementById(\"closeModalButton\");\n\n            \/\/ MODIFIKASI: Skrip pencarian diperbarui untuk menyembunyikan judul bagian\n            searchInput.addEventListener('input', function() {\n                const query = this.value.toLowerCase();\n\n                \/\/ Iterasi setiap bagian utama (.section) di dalam <main>\n                document.querySelectorAll('#video-sections > .section').forEach(section => {\n                    let matchesInSection = 0;\n\n                    \/\/ Filter item di dalam bagian ini (baik .grid-container atau .video-card)\n                    section.querySelectorAll('.grid-container, .grid-2 .video-card').forEach(item => {\n                        const textContent = (item.innerText || item.textContent).toLowerCase();\n                        const matches = textContent.includes(query);\n                        \n                        if (matches) {\n                            item.style.display = item.classList.contains('grid-container') ? 'grid' : 'flex';\n                            matchesInSection++;\n                        } else {\n                            item.style.display = 'none';\n                        }\n                    });\n\n                    \/\/ Sembunyikan atau tampilkan seluruh bagian berdasarkan hasil filter\n                    if (matchesInSection > 0) {\n                        section.style.display = 'block';\n                    } else {\n                        section.style.display = 'none';\n                    }\n                });\n            });\n            \n            document.querySelectorAll(\".video-placeholder\").forEach(placeholder => {\n                placeholder.addEventListener(\"click\", function(){\n                    const videoSrc = this.getAttribute(\"data-src\");\n                    modal.style.display = \"flex\";\n                    modalVideo.src = videoSrc + \"?autoplay=1\";\n                });\n            });\n\n            function closeModal(){\n                modal.style.display = \"none\";\n                modalVideo.src = \"about:blank\";\n            }\n            \n            closeModalBtn.addEventListener(\"click\", closeModal);\n            modal.addEventListener(\"click\", function(event) { if (event.target === modal) { closeModal(); } });\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Video Pembelajaran &#8211; Jenjang SD &#9776; Jenjang PAUD Ayo Bernyanyi Mentari Jenjang SD Seni Musik Seri Literasi Seri Numerasi Jenjang SMA Mapel Bahasa Inggris Mapel Bahasa Indonesia Jenjang SD Seri Numerasi Operasi Hitung Persentase dalam Berbelanja Hemat Video ini diharapkan dapat meningkatkan pemahaman guru SD dalam menganalisis hubungan pecahan desimal dan persen dalam kehidupan sehari-hari. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_joinchat":[],"footnotes":""},"class_list":["post-2432","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/comments?post=2432"}],"version-history":[{"count":1,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2432\/revisions"}],"predecessor-version":[{"id":2433,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2432\/revisions\/2433"}],"wp:attachment":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/media?parent=2432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}