{"id":2430,"date":"2025-09-19T13:47:34","date_gmt":"2025-09-19T13:47:34","guid":{"rendered":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/?page_id=2430"},"modified":"2025-09-19T13:47:34","modified_gmt":"2025-09-19T13:47:34","slug":"vpseri-literasi","status":"publish","type":"page","link":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpseri-literasi\/","title":{"rendered":"vpseri-literasi"},"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 Literasi<\/h2>\n            <div class=\"grid-2\">\n                <div class=\"video-card\">\n                    <h3>Teks Multimodal<\/h3>\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/LWrHEOpyE6I\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/LWrHEOpyE6I\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <p class=\"desc\">Video ini diharapkan dapat membantu meningkatkan pemahaman guru SD tentang konsep literasi baca tulis dan strategi untuk menguatkannya melalui penggunaan teks multimodal.<\/p>\n                <\/div>\n                <div class=\"video-card\">\n                    <h3>Literasi dengan Membaca Nyaring<\/h3>\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/fejtRPC-i-g\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/fejtRPC-i-g\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <p class=\"desc\">Video ini diharapkan dapat meningkatkan pemahaman guru SD tentang strategi pengajaran literasi melalui metode membaca nyaring, untuk meningkatkan keterampilan literasi peserta didik.<\/p>\n                <\/div>\n                <div class=\"video-card\">\n                    <h3>Pembelajaran Menulis Berbasis Genre<\/h3>\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/W7cuJLJYJTg\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/W7cuJLJYJTg\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <p class=\"desc\">Video ini diharapkan dapat menjadi pemicu untuk meningkatkan pemahaman guru SD tentang pendekatan menulis berbasis genre.<\/p>\n                <\/div>\n                <div class=\"video-card\">\n                    <h3>Unjuk Diri melalui Presentasi<\/h3>\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/EPtOWUzHT3U\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/EPtOWUzHT3U\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <p class=\"desc\">Video ini diharapkan dapat meningkatkan kemampuan literasi guru SD melalui strategi presentasi, serta membantu peserta didik mengembangkan kemampuan literasi mereka.<\/p>\n                <\/div>\n                <div class=\"video-card\">\n                    <h3>Keajaiban Bercerita<\/h3>\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/oHrlUyfpygs\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/oHrlUyfpygs\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <p class=\"desc\">Video ini diharapkan dapat meningkatkan keterampilan guru SD dalam mengajar literasi melalui teknik bercerita agar pembelajaran literasi lebih efektif dan menarik bagi peserta didik.<\/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 Literasi Teks Multimodal Video ini diharapkan dapat membantu meningkatkan pemahaman guru SD tentang konsep literasi baca tulis dan strategi untuk menguatkannya melalui penggunaan teks multimodal. [&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,"_themeisle_gutenberg_block_has_review":false,"_joinchat":[],"footnotes":""},"class_list":["post-2430","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2430","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=2430"}],"version-history":[{"count":1,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2430\/revisions"}],"predecessor-version":[{"id":2431,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2430\/revisions\/2431"}],"wp:attachment":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/media?parent=2430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}