{"id":27913,"date":"2025-09-25T23:36:24","date_gmt":"2025-09-25T16:36:24","guid":{"rendered":"https:\/\/bdp.ipb.ac.id\/?page_id=27913"},"modified":"2026-06-17T09:19:29","modified_gmt":"2026-06-17T02:19:29","slug":"supporting-staf","status":"publish","type":"page","link":"https:\/\/bdp.ipb.ac.id\/?page_id=27913","title":{"rendered":"Supporting Staf"},"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>Team Tab System<\/title>\n    <style>\n        * { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }\n        body { background: #ffffff; padding: 50px 20px; }\n        .container { max-width: 1200px; margin: 0 auto; text-align: center; }\n\n        \/* Navigasi Menu *\/\n        .tab-menu { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; }\n\n        .tab-menu label {\n            padding: 12px 25px;\n            background: #fff;\n            border: 2px solid #c0c4c7;\n            color: #000072;\n            cursor: pointer;\n            font-weight: bold;\n            border-radius: 5px;\n            transition: 0.3s;\n        }\n\n        \/* Sembunyikan Radio Button Asli *\/\n        input[type=\"radio\"] { display: none; }\n\n        \/* Styling saat Tab terpilih *\/\n        #tab1:checked ~ .tab-menu label[for=\"tab1\"],\n        #tab2:checked ~ .tab-menu label[for=\"tab2\"],\n        #tab3:checked ~ .tab-menu label[for=\"tab3\"],\n        #tab4:checked ~ .tab-menu label[for=\"tab4\"] {\n            background: #1b3b51c2;\n            color: #fff;\n        }\n\n        \/* Sembunyikan semua section secara default *\/\n        .content-section { display: none; animation: fadeIn 0.5s; }\n\n        \/* Tampilkan section yang sesuai dengan radio yang dipilih *\/\n        #tab1:checked ~ #sect-admin,\n        #tab2:checked ~ #sect-laboran,\n        #tab3:checked ~ #sect-teknisi,\n        #tab4:checked ~ #sect-pramu {\n            display: block;\n        }\n\n        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n\n        \/* GRID SYSTEM *\/\n        .grid {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 20px;\n            margin-top: 20px;\n        }\n\n        .card {\n            background: #fff;\n            border: 0.5px solid #ddd;\n            padding: 0;\n            text-align: center;\n            box-shadow: 0 2px 2px rgba(0,0,0,0.1);\n            border-radius: 10px;\n                  transition: transform 0.3s ease, box-shadow 0.3s ease;\n\n            }\n\n        .card:hover {\n            transform: translateY(-8px);\n            box-shadow: 0 12px 24px rgba(0,0,0,0.15);\n            }\n        .card img { width: 100%; height: 330px; object-fit: cover; display: block; }\n        .card-info { padding: 15px; }\n\n        \/* MODAL \/ POPUP *\/\n        .modal {\n            position: fixed;\n            top: 0; left: 0; width: 100%; height: 100%;\n            background: rgba(0,0,0,0.8);\n            display: none;\n            justify-content: center;\n            align-items: center;\n            z-index: 100;\n        }\n        .modal:target { display: flex; }\n        .modal-content { background: #fff; padding: 30px; display: flex; gap: 30px; max-width: 700px; position: relative; text-align: left; }\n        .close { position: absolute; top: 10px; right: 15px; text-decoration: none; font-size: 25px; color: #000; }\n\n        \/*@media (max-width: 600px) {\n        .grid { grid-template-columns: repeat(2, 1fr); }\n        }*\/\n        @media (max-width: 650px) {\n        .grid {\n                grid-template-columns: 1fr; \/* HANYA TAMPIL 1 IMAGE (1 KOLOM) *\/\n            }\n                    .card img { width: 100%; height: 500px; object-fit: cover; display: block; }\n\n\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n    <h1>STAF KEPENDIDIKAN<\/h1>\n    <p style=\"margin-bottom: 30px;\">Klik kategori di bawah untuk melihat anggota tim<\/p>\n\n\n    <!-- Radio Controllers -->\n    <input type=\"radio\" name=\"tabs\" id=\"tab1\" checked>\n    <input type=\"radio\" name=\"tabs\" id=\"tab2\">\n    <input type=\"radio\" name=\"tabs\" id=\"tab3\">\n    <input type=\"radio\" name=\"tabs\" id=\"tab4\">\n\n    <!-- Menu Tombol -->\n    <div class=\"tab-menu\">\n        <label for=\"tab1\">Administrasi<\/label>\n        <label for=\"tab2\">Laboran<\/label>\n        <label for=\"tab3\">Teknisi<\/label>\n        <label for=\"tab4\">Pramu<\/label>\n    <\/div>\n    <hr style=\"border: none; border-top: 1px solid #c0bfbc; width: 100%; shadow: 4px\" \/>\n\n    <!-- Section Administrasi -->\n    <div class=\"content-section\" id=\"sect-admin\">\n        <div class=\"grid\">\n            <div class=\"card\">\n                <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/06\/foto-aris-solikhah-2.jpeg\" alt=\"Admin\">\n                <div class=\"card-info\">\n                    <h4>Aris Solikhah, S.T.P., M.M..<\/h4>\n                    <a href=\"#pop1\" style=\"font-size: 12px;\">Detail<\/a>\n                <\/div>\n            <\/div>\n\n\n            <div class=\"card\">\n                <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Yuli-Rohmalia-S.M.-3-scaled.jpg\" alt=\"Admin\">\n                <div class=\"card-info\">\n                    <h4>Yuli Rohmalia, M.M<\/h4>\n                    <a href=\"#pop1\" style=\"font-size: 12px;\">Detail<\/a>\n                <\/div>\n            <\/div>\n                    <div class=\"card\">\n                        <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Ahmad-Farid-Firdaus-A.Md-3-scaled.jpg\" alt=\"Admin\">\n                        <div class=\"card-info\">\n                            <h4>Ahmad Farid Firdaus, A.Md.<\/h4>\n                            <a href=\"#pop1\" style=\"font-size: 12px;\">Detail<\/a>\n                        <\/div>\n                    <\/div>\n                            <div class=\"card\">\n                                <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Moch.-Saefudin-Abdillah-3-scaled.jpg\" alt=\"Admin\">\n                                <div class=\"card-info\">\n                                    <h4>Moch. Abdillah<\/h4>\n                                    <a href=\"#pop1\" style=\"font-size: 12px;\">Detail<\/a>\n                                <\/div>\n                            <\/div>\n                                    <div class=\"card\">\n                                        <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Iswadi-2-scaled.jpg\" alt=\"Admin\">\n                                        <div class=\"card-info\">\n                                            <h4>Iswadi<\/h4>\n                                            <a href=\"#pop1\" style=\"font-size: 12px;\">Detail<\/a>\n                                        <\/div>\n                                    <\/div>\n                                            <div class=\"card\">\n                                                <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Eggi-Gumelar-3-scaled.jpg\" alt=\"Admin\">\n                                                <div class=\"card-info\">\n                                                    <h4>Eggi Gumelar<\/h4>\n                                                    <a href=\"#pop1\" style=\"font-size: 12px;\">Detail<\/a>\n                                                <\/div>\n                                            <\/div>\n                                                <div class=\"card\">\n                                                    <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Shinta-Erma-Ferra-A-3-scaled.jpg\" alt=\"Admin\">\n                                                    <div class=\"card-info\">\n                                                        <h4>Shinta Erma Ferra,A.Md.<\/h4>\n                                                        <a href=\"#pop1\" style=\"font-size: 12px;\">Detail<\/a>\n                                                    <\/div>\n                                                <\/div>\n                                                <div class=\"card\">\n                                                    <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Marjanta-3-scaled.jpg\" alt=\"Admin\">\n                                                    <div class=\"card-info\">\n                                                        <h4>Marjanta<\/h4>\n                                                        <a href=\"#pop1\" style=\"font-size: 12px;\">Detail<\/a>\n                                                    <\/div>\n                                                <\/div>\n            <!-- Tambahkan card lain di sini -->\n        <\/div>\n    <\/div>\n\n    <!-- Section Teknisi -->\n    <div class=\"content-section\" id=\"sect-teknisi\">\n        <div class=\"grid\">\n            <div class=\"card\">\n                <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Muhamad-Rupi-2-scaled.jpg\" alt=\"Teknisi\">\n                <div class=\"card-info\">\n                    <h4>Muhamad Rupi <\/h4>\n                    <a href=\"#pop2\" style=\"font-size: 12px;\">Detail<\/a>\n                <\/div>\n            <\/div>\n                     <div class=\"card\">\n                        <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Arman-Sanusi-3-scaled.jpg\" alt=\"Teknisi\">\n                        <div class=\"card-info\">\n                            <h4>Arman Sanusi <\/h4>\n                            <a href=\"#pop2\" style=\"font-size: 12px;\">Detail<\/a>\n                        <\/div>\n                    <\/div>\n                             <div class=\"card\">\n                                <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Dedi-Supriadi-3-scaled.jpg\" alt=\"Teknisi\">\n                                <div class=\"card-info\">\n                                    <h4>Dedi Supriadi <\/h4>\n                                    <a href=\"#pop2\" style=\"font-size: 12px;\">Detail<\/a>\n                                <\/div>\n                            <\/div>\n                                    <div class=\"card\">\n                                        <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Devi-Yusman-3-scaled.jpg\" alt=\"Teknisi\">\n                                        <div class=\"card-info\">\n                                            <h4>Devi Yusman <\/h4>\n                                            <a href=\"#pop2\" style=\"font-size: 12px;\">Detail<\/a>\n                                        <\/div>\n                                    <\/div>\n                                        <div class=\"card\">\n                                            <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Madyusi-3-scaled.jpg\" alt=\"Teknisi\">\n                                            <div class=\"card-info\">\n                                                <h4>Madyusi <\/h4>\n                                                <a href=\"#pop2\" style=\"font-size: 12px;\">Detail<\/a>\n                                            <\/div>\n                                        <\/div>\n                                            <div class=\"card\">\n                                                <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Sunandar-3-scaled.jpg\" alt=\"Teknisi\">\n                                                <div class=\"card-info\">\n                                                    <h4>Sunandar <\/h4>\n                                                    <a href=\"#pop2\" style=\"font-size: 12px;\">Detail<\/a>\n                                                <\/div>\n                                            <\/div>\n                                                    <div class=\"card\">\n                                                        <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Yusrizal-3-scaled.jpg\" alt=\"Teknisi\">\n                                                        <div class=\"card-info\">\n                                                            <h4>Yusrizal <\/h4>\n                                                            <a href=\"#pop2\" style=\"font-size: 12px;\">Detail<\/a>\n                                                        <\/div>\n                                                    <\/div>\n                                                    <div class=\"card\">\n                                                        <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Mochamad-Adnan-3-scaled.jpg\" alt=\"Teknisi\">\n                                                        <div class=\"card-info\">\n                                                            <h4>Mochamad Adnan <\/h4>\n                                                            <a href=\"#pop2\" style=\"font-size: 12px;\">Detail<\/a>\n                                                        <\/div>\n                                                    <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Section Laboran -->\n    <div class=\"content-section\" id=\"sect-laboran\">\n        <div class=\"grid\">\n        <div class=\"card\">\n                                                        <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Wasjan-3-scaled.jpg\" alt=\"Laboran\">\n                                                        <div class=\"card-info\">\n                                                            <h4>Wasjan<\/h4>\n                                                            <a href=\"#pop3\" style=\"font-size: 12px;\">Detail<\/a>\n                                                        <\/div>\n                                                    <\/div>\n            <div class=\"card\">\n                <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Henda-3-scaled.jpg\" alt=\"Laboran\">\n                <div class=\"card-info\">\n                    <h4>Henda<\/h4>\n                    <a href=\"#pop3\" style=\"font-size: 12px;\">Detail<\/a>\n                <\/div>\n            <\/div>\n\n            <div class=\"card\">\n                <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Lina-Mulyani-2-scaled.jpg\" alt=\"Laboran\">\n                <div class=\"card-info\">\n                    <h4>Lina Mulyani<\/h4>\n                    <a href=\"#pop3\" style=\"font-size: 12px;\">Detail<\/a>\n                <\/div>\n                <\/div>\n                        <div class=\"card\">\n                            <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Adna-Sumadikarta-S.Si_.-M.Ling-3-converted-scaled.jpg\" alt=\"Laboran\">\n                            <div class=\"card-info\">\n                             <h4>Adna Sumadikarta, S.Si., M.Ling<\/h4>\n                                <a href=\"#pop3\" style=\"font-size: 12px;\">Detail<\/a>\n                            <\/div>\n                        <\/div>\n\n                                <div class=\"card\">\n                                    <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/akbar-f2-Copy.png\" alt=\"Laboran\">\n                                    <div class=\"card-info\">\n                                    <h4>Akbar Firdaus<\/h4>\n                                        <a href=\"#pop3\" style=\"font-size: 12px;\">Detail<\/a>\n                                    <\/div>\n                                <\/div>\n\n                                    <div class=\"card\">\n                                        <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Retno-Meilasari-N.-S-3-scaled.jpg\" alt=\"Laboran\">\n                                        <div class=\"card-info\">\n                                        <h4>Retno Meilasari N., S.Si.<\/h4>\n                                            <a href=\"#pop3\" style=\"font-size: 12px;\">Detail<\/a>\n                                        <\/div>\n                                    <\/div>\n                                                <div class=\"card\">\n                                                    <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Nisa-Salsabila-Fardah-S.Si-3-scaled.jpg\" alt=\"Laboran\">\n                                                    <div class=\"card-info\">\n                                                        <h4>Nisa Salsabila Fardah-S.Si<\/h4>\n                                                        <a href=\"#pop3\" style=\"font-size: 12px;\">Detail<\/a>\n                                                    <\/div>\n                                                <\/div>\n                                                    <div class=\"card\">\n                                                        <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Yanuar-Raharja-S-3-scaled.jpg\" alt=\"Laboran\">\n                                                        <div class=\"card-info\">\n                                                            <h4>Yanuar Raharja, S.Si<\/h4>\n                                                            <a href=\"#pop3\" style=\"font-size: 12px;\">Detail<\/a>\n                                                        <\/div>\n                                                    <\/div>\n                                                    <div class=\"card\">\n                                                        <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Vidia-Septiana-3-scaled.jpg\" alt=\"Laboran\">\n                                                        <div class=\"card-info\">\n                                                            <h4>Vidia Septiana<\/h4>\n                                                            <a href=\"#pop3\" style=\"font-size: 12px;\">Detail<\/a>\n                                                        <\/div>\n                                                    <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Section Pramu -->\n    <div class=\"content-section\" id=\"sect-pramu\">\n        <div class=\"grid\">\n            <div class=\"card\">\n                <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Sariah-3-scaled.jpg\" alt=\"Pramu\">\n                <div class=\"card-info\">\n                    <h4>Sariah<\/h4>\n                    <a href=\"#pop4\" style=\"font-size: 12px;\">Detail<\/a>\n                <\/div>\n            <\/div>\n\n                    <div class=\"card\">\n                            <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Herlinah-3-scaled.jpg\" alt=\"Pramu\">\n                            <div class=\"card-info\">\n                                <h4>Herlinah<\/h4>\n                                <a href=\"#pop4\" style=\"font-size: 12px;\">Detail<\/a>\n                            <\/div>\n                    <\/div>\n                        <div class=\"card\">\n                            <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Dedi-Surahman-3-scaled.jpg\" alt=\"Pramu\">\n                            <div class=\"card-info\">\n                                <h4>Dedi Surahman<\/h4>\n                                <a href=\"#pop4\" style=\"font-size: 12px;\">Detail<\/a>\n                            <\/div>\n                        <\/div>\n                            <div class=\"card\">\n                                <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/Rendi-2.jpeg\" alt=\"Pramu\">\n                                <div class=\"card-info\">\n                                    <h4>Rendy Pratama Putra <\/h4>\n                                    <a href=\"#pop4\" style=\"font-size: 12px;\">Detail<\/a>\n                                <\/div>\n                            <\/div>\n\n\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<!-- AREA MODAL -->\n<div id=\"pop1\" class=\"modal\">\n    <div class=\"modal-content\">\n        <a href=\"#\" class=\"close\">&times;<\/a>\n        <img decoding=\"async\" src=\"https:\/\/bdp.ipb.ac.id\/wp-content\/uploads\/2026\/05\/aris-solikhah.jpeg\" width=80px height=100px; alt=\"Foto\">\n        <div>\n            <h3>Under Maintanance<\/h3>\n            <p>Biodata lengkap ada di sini&#8230;<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Tambahkan modal pop2, pop3, dst sesuai kebutuhan -->\n\n<div id=\"pop2\" class=\"modal\">\n    <div class=\"modal-content\">\n        <a href=\"#\" class=\"close\">&times;<\/a>\n        <img decoding=\"async\" src=\"X\" width=80px height=100px; alt=\"Foto\">\n        <div>\n            <h3>Under Maintanance<\/h3>\n            <p>Biodata lengkap ada di sini&#8230;<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Team Tab System STAF KEPENDIDIKAN Klik kategori di bawah untuk melihat anggota tim Administrasi Laboran Teknisi Pramu Aris Solikhah, S.T.P., M.M.. Detail Yuli Rohmalia, M.M Detail Ahmad Farid Firdaus, A.Md. Detail Moch. Abdillah Detail Iswadi Detail Eggi Gumelar Detail Shinta Erma Ferra,A.Md. Detail Marjanta Detail Muhamad Rupi Detail Arman Sanusi Detail Dedi Supriadi Detail Devi [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-27913","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bdp.ipb.ac.id\/index.php?rest_route=\/wp\/v2\/pages\/27913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bdp.ipb.ac.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bdp.ipb.ac.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bdp.ipb.ac.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bdp.ipb.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=27913"}],"version-history":[{"count":41,"href":"https:\/\/bdp.ipb.ac.id\/index.php?rest_route=\/wp\/v2\/pages\/27913\/revisions"}],"predecessor-version":[{"id":29660,"href":"https:\/\/bdp.ipb.ac.id\/index.php?rest_route=\/wp\/v2\/pages\/27913\/revisions\/29660"}],"wp:attachment":[{"href":"https:\/\/bdp.ipb.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=27913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}