Infografik JP<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n <style>\n \n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n font-family: 'Poppins', sans-serif;\n background-color: #f9f9f9;\n color: #4e4e4e;\n padding: 20px 15px;\n line-height: 1.6;\n }\n .container { max-width: 1600px; margin: 0 auto; width: 100%; }\n\n\n .jp-search-wrapper {\n margin-bottom: 40px;\n text-align: center;\n position: relative;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .jp-custom-search-field {\n width: 100%;\n padding: 15px 15px; \n font-size: 12px;\n font-family: 'Poppins', sans-serif;\n color: #333;\n background-color: #ffffff;\n border: 1px solid #e0e0e0 !important; \n border-radius: 10px; \n outline: none;\n transition: all 0.3s ease;\n box-shadow: 0 4px 6px rgba(0,0,0,0.02);\n }\n\n .jp-custom-search-field:focus {\n border-color: #35387a !important;\n box-shadow: 0 6px 12px rgba(53, 56, 122, 0.1);\n background-color: #fff;\n }\n\n\n .year-section { margin-bottom: 50px; }\n .year-label { font-size: 1.5rem; font-weight: 300; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid #e0e0e0; }\n .image-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 20px; }\n .image-card { background: white; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: 0.3s; }\n .image-wrapper { width: 100%; padding-top: 100%; position: relative; background-color: #f0f0f0; }\n .image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }\n .image-content { padding: 12px; }\n .image-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 6px; color: #35387a; }\n .image-description { font-size: 1.2rem; color: #4e4e4e; }\n .load-more-section { text-align: center; margin: 30px 0; }\n\n\n .load-more-btn { background-color: #35387a; color: white; border: none; padding: 12px 36px; border-radius: 4px; cursor: pointer; }\n .load-more-btn:disabled { background-color: #969696; cursor: default; }\n .no-results { text-align: center; padding: 40px; display: none; color: #969696; }\n\n @media (max-width: 899px) {\n .image-grid { grid-template-columns: repeat(2, 1fr); }\n }\n @media (max-width: 479px) {\n .image-grid { grid-template-columns: repeat(1, 1fr); }\n }\n <\/style>\n<\/head>\n<Body><h1><a href="/">糖心原创</a></h1><script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(bp, s); })(); </script>\n <div class=\"container\">\n <div class=\"jp-search-wrapper\">\n <input \n type=\"text\" \n class=\"jp-custom-search-field\" \n id=\"jp_search_input_2024\" \n placeholder=\"Cari Infografik Berkaitan...\"\n >\n <\/div>\n\n <div id=\"showcase\"><\/div>\n <div class=\"no-results\" id=\"noResults\">Tiada Maklumat Ditemui.<\/div>\n\n <div class=\"load-more-section\">\n <button class=\"load-more-btn\" id=\"loadMoreBtn\">Lagi<\/button>\n <\/div>\n <\/div>\n\n <script>\n const imageData = {\n \n 2023: [\n { title: 'Insurans Luar Negara', description: 'Kemudahan Perlindungan Insurans Perjalanan Ke Luar Negara. <a href=\"https:\/\/www.ukm.my\/pendaftar\/pekeliling\/pekeliling-jabatan-pendaftar-bil-3-2023\/\">Maklumat Lanjut<\/a>', image: 'https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2023\/01\/Infografik.png' },\n\n { title: 'MyPPSM 1', description: 'Pemakluman Ceraian-Ceraian Baharu Di Bawah MyPPSM. <a href=\"https:\/\/www.ukm.my\/pendaftar\/pekeliling\/pekeliling-jabatan-pendaftar-bil-4-2023\/\">Maklumat Lanjut<\/a>', image: 'https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2023\/03\/INFOGR1.png' },\n\n { title: 'MyPPSM 2', description: 'Pemakluman Ceraian-Ceraian Baharu Di Bawah MyPPSM. <a href=\"https:\/\/www.ukm.my\/pendaftar\/pekeliling\/pekeliling-jabatan-pendaftar-bil-4-2023\/\">Maklumat Lanjut<\/a>', image: 'https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2023\/03\/INFOGR2.png' },\n\n { title: 'MyPPSM 3', description: 'Pemakluman Ceraian-Ceraian Baharu Di Bawah MyPPSM. <a href=\"https:\/\/www.ukm.my\/pendaftar\/pekeliling\/pekeliling-jabatan-pendaftar-bil-4-2023\/\">Maklumat Lanjut<\/a>', image: 'https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2023\/03\/INFOGR3.png' },\n\n { title: 'KRITERIA ANUGERAH PERKHIDMATAN', description: 'KRITERIA ANUGERAH PERKHIDMATAN 20, 30 DAN 40 TAHUN. <a href=\"https:\/\/www.ukm.my\/pendaftar\/pekeliling\/pekeliling-jabatan-pendaftar-bil-7-2023\/\">Maklumat Lanjut<\/a>', image: 'https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2023\/05\/Final_kriteria_2023-04.png' },\n\n { title: 'KRITERIA ANUGERAH PERKHIDMATAN', description: 'KRITERIA ANUGERAH PERKHIDMATAN 20, 30 DAN 40 TAHUN. <a href=\"https:\/\/www.ukm.my\/pendaftar\/pekeliling\/pekeliling-jabatan-pendaftar-bil-7-2023\/\">Maklumat Lanjut<\/a>', image: 'https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2023\/05\/Final_kriteria_2023-03.png' },\n\n { title: 'Pengumpulan Gantian Cuti Rehat (GCR)', description: 'Pengumpulan Gantian Cuti Rehat (GCR) Untuk Award Wang Tunai Tahun 2023. <a href=\"https:\/\/www.ukm.my\/pendaftar\/pekeliling\/pekeliling-jabatan-pendaftar-bil-23-2023\/\">Maklumat Lanjut<\/a>', image: 'https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2024\/06\/Infografik-Bil.23-2023.png' },\n\n { title: 'Pemberian Award Wang Tunai', description: 'Pemakluman Penambahbaikan Pemberian Award Wang Tunai Gantian Cuti Rehat (GCR). <a href=\"https:\/\/www.ukm.my\/pendaftar\/pekeliling\/pekeliling-jabatan-pendaftar-bil-22-2023\/\">Maklumat Lanjut<\/a>', image: 'https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2024\/06\/Infografik-2-GCR-Bil.22-2023.jpg' },\n\n { title: 'SISTEM PENGURUSAN AMALAN NILAI (SPAN 2.0)', description: 'PELAKSANAAN SISTEM PENGURUSAN AMALAN NILAI (SPAN 2.0) PERKHIDMATAN AWAM. <a href=\"https:\/\/www.ukm.my\/pendaftar\/pekeliling\/pekeliling-jabatan-pendaftar-bil-11-2023\/\">Maklumat Lanjut<\/a>', image: 'https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2023\/08\/Infografik-Pekeliling-Bil.11-2023-scaled.jpg' },\n ],\n\n 2024: [\n { title: 'Waktu Bekerja Berperingkat (WBB)', description: 'Waktu Bekerja Berperingkat (WBB) Sepanjang Bulan Ramadan Bagi Tahun 2024. <a href=\"https:\/\/www.ukm.my\/pendaftar\/pekeliling\/pekeliling-jabatan-pendaftar-bil-2-2024\/\">Maklumat Lanjut<\/a>', image: 'https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2024\/02\/Infografik-Pekeliling-Bil.2-2024.png' },\n ],\n };\n\n let currentlyDisplayed = 16; \n let allImages = [];\n let filteredImages = [];\n\n function init() {\n allImages = [];\n Object.keys(imageData).sort((a, b) => b - a).forEach(year => {\n imageData[year].forEach(img => {\n allImages.push({ ...img, year });\n });\n });\n filteredImages = [...allImages];\n renderImages();\n setupEventListeners();\n }\n\n function renderImages() {\n const showcase = document.getElementById('showcase');\n const noResults = document.getElementById('noResults');\n const loadMoreBtn = document.getElementById('loadMoreBtn');\n showcase.innerHTML = '';\n\n if (filteredImages.length === 0) {\n noResults.style.display = 'block';\n loadMoreBtn.style.display = 'none';\n return;\n }\n\n noResults.style.display = 'none';\n loadMoreBtn.style.display = 'block';\n\n const imagesByYear = {};\n filteredImages.forEach(img => {\n if (!imagesByYear[img.year]) imagesByYear[img.year] = [];\n imagesByYear[img.year].push(img);\n });\n\n const years = Object.keys(imagesByYear).sort((a, b) => b - a);\n let displayCount = 0;\n\n years.forEach(year => {\n const yearSection = document.createElement('div');\n yearSection.className = 'year-section';\n const yearLabel = document.createElement('div');\n yearLabel.className = 'year-label';\n yearLabel.textContent = year;\n yearSection.appendChild(yearLabel);\n\n const grid = document.createElement('div');\n grid.className = 'image-grid';\n\n imagesByYear[year].forEach(img => {\n if (displayCount < currentlyDisplayed) {\n grid.appendChild(createImageCard(img));\n displayCount++;\n }\n });\n\n if(grid.children.length > 0) {\n yearSection.appendChild(grid);\n showcase.appendChild(yearSection);\n }\n });\n\n if (displayCount >= filteredImages.length) {\n loadMoreBtn.disabled = true;\n loadMoreBtn.textContent = 'Semua Infografik Telah Dipaparkan';\n } else {\n loadMoreBtn.disabled = false;\n loadMoreBtn.textContent = 'Lagi';\n }\n }\n\n function createImageCard(imageInfo) {\n const card = document.createElement('div');\n card.className = 'image-card';\n card.innerHTML = `\n <div class=\"image-wrapper\"><img decoding=\"async\" src=\"${imageInfo.image}\" alt=\"${imageInfo.title}\" loading=\"lazy\"><\/div>\n <div class=\"image-content\">\n <div class=\"image-title\">${imageInfo.title}<\/div>\n <div class=\"image-description\">${imageInfo.description}<\/div>\n <\/div>\n `;\n return card;\n }\n\n function setupEventListeners() {\n\n const searchInput = document.getElementById('jp_search_input_2024');\n const loadMoreBtn = document.getElementById('loadMoreBtn');\n\n let searchTimeout;\n searchInput.addEventListener('input', (e) => {\n clearTimeout(searchTimeout);\n searchTimeout = setTimeout(() => {\n const query = e.target.value.toLowerCase().trim();\n filteredImages = query === '' ? [...allImages] : allImages.filter(img => \n img.title.toLowerCase().includes(query) || img.description.toLowerCase().includes(query)\n );\n currentlyDisplayed = 16;\n renderImages();\n }, 300);\n });\n\n loadMoreBtn.addEventListener('click', () => {\n currentlyDisplayed += 16;\n renderImages();\n });\n }\n\n document.addEventListener('DOMContentLoaded', init);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Infografik Jabatan Pendaftar Infografik JP Tiada Maklumat Ditemui. Lagi<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","footnotes":""},"class_list":["post-19453","page","type-page","status-publish","hentry","entry"],"aioseo_notices":[],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"pendaftar_v2","author_link":"https:\/\/www.ukm.my\/pendaftar\/author\/pendaftar_v2\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Infografik Jabatan Pendaftar Infografik JP Tiada Maklumat Ditemui. Lagi","_links":{"self":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/19453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/comments?post=19453"}],"version-history":[{"count":184,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/19453\/revisions"}],"predecessor-version":[{"id":31423,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/19453\/revisions\/31423"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/media?parent=19453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}