{"id":483,"date":"2024-11-10T17:49:49","date_gmt":"2024-11-10T17:49:49","guid":{"rendered":"https:\/\/bg.pendampingusaha.com\/animasi\/?page_id=483"},"modified":"2024-11-10T18:29:49","modified_gmt":"2024-11-10T18:29:49","slug":"belajar-iqro","status":"publish","type":"page","link":"https:\/\/bg.pendampingusaha.com\/animasi\/belajar-iqro\/","title":{"rendered":"Belajar iQRO"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n Belajar Mengaji - Iqro Digital<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Arial', sans-serif;\r\n }\r\n\r\n body {\r\n background: linear-gradient(135deg, #FFF6E5, #FFECD9);\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n .header {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n background: #FF96AD;\r\n padding: 20px;\r\n border-radius: 15px;\r\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\r\n }\r\n\r\n .header h1 {\r\n color: #fff;\r\n font-size: 2.5em;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .taawudz-section {\r\n background: #FFC3D4;\r\n padding: 20px;\r\n border-radius: 15px;\r\n margin-bottom: 30px;\r\n text-align: center;\r\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\r\n }\r\n\r\n .arabic-text {\r\n font-size: 24px;\r\n margin: 15px 0;\r\n color: #444;\r\n }\r\n\r\n .play-button {\r\n background: #FF96AD;\r\n border: none;\r\n padding: 15px 30px;\r\n border-radius: 10px;\r\n color: white;\r\n font-size: 16px;\r\n cursor: pointer;\r\n margin: 10px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .play-button:hover {\r\n background: #FF7F9C;\r\n transform: scale(1.05);\r\n }\r\n\r\n .play-button:active {\r\n transform: scale(0.95);\r\n }\r\n\r\n .audio-controls {\r\n margin: 20px 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .huruf-container {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n gap: 20px;\r\n margin-top: 30px;\r\n }\r\n\r\n .huruf-btn {\r\n background: #FF96AD;\r\n border: none;\r\n padding: 20px;\r\n border-radius: 15px;\r\n font-size: 1.5em;\r\n color: white;\r\n cursor: pointer;\r\n transition: transform 0.3s ease, background 0.3s ease;\r\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\r\n }\r\n\r\n .huruf-btn:hover {\r\n transform: scale(1.05);\r\n background: #FF7F9C;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 10px;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2em;\r\n }\r\n\r\n .arabic-text {\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .header h1 {\r\n font-size: 1.5em;\r\n }\r\n\r\n .arabic-text {\r\n font-size: 18px;\r\n }\r\n\r\n .play-button {\r\n padding: 12px 24px;\r\n font-size: 14px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <header class=\"header\">\r\n <h1>Belajar Mengaji Digital<\/h1>\r\n <p style=\"color: white;\">Mari Belajar Membaca Al-Qur'an<\/p>\r\n <\/header>\r\n\r\n <div class=\"taawudz-section\">\r\n <h2 style=\"color: #444; margin-bottom: 15px;\">Ta'awudz & Basmalah<\/h2>\r\n \r\n <div class=\"arabic-text\">\r\n \u0623\u064e\u0639\u064f\u0648\u0630\u064f \u0628\u0650\u0627\u0644\u0644\u064e\u0651\u0647\u0650 \u0645\u0650\u0646\u064e \u0627\u0644\u0634\u064e\u0651\u064a\u0652\u0637\u064e\u0627\u0646\u0650 \u0627\u0644\u0631\u064e\u0651\u062c\u0650\u064a\u0645\u0650\r\n <\/div>\r\n <div class=\"audio-controls\">\r\n <button class=\"play-button\" onclick=\"playTaawudz()\">\r\n Putar Ta'awudz\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"arabic-text\">\r\n \u0628\u0650\u0633\u0652\u0645\u0650 \u0627\u0644\u0644\u064e\u0651\u0647\u0650 \u0627\u0644\u0631\u064e\u0651\u062d\u0652\u0645\u064e\u0646\u0650 \u0627\u0644\u0631\u064e\u0651\u062d\u0650\u064a\u0645\u0650\r\n <\/div>\r\n <div class=\"audio-controls\">\r\n <button class=\"play-button\" onclick=\"playBasmalah()\">\r\n Putar Basmalah\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"huruf-container\">\r\n <button class=\"huruf-btn\" onclick=\"playHuruf('alif')\">\u0627<\/button>\r\n <button class=\"huruf-btn\" onclick=\"playHuruf('ba')\">\u0628<\/button>\r\n <button class=\"huruf-btn\" onclick=\"playHuruf('ta')\">\u062a<\/button>\r\n <button class=\"huruf-btn\" onclick=\"playHuruf('tsa')\">\u062b<\/button>\r\n <button class=\"huruf-btn\" onclick=\"playHuruf('jim')\">\u062c<\/button>\r\n <button class=\"huruf-btn\" onclick=\"playHuruf('ha')\">\u062d<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Membuat objek audio untuk masing-masing bacaan\r\n const taawudzAudio = new Audio('https:\/\/bg.pendampingusaha.com\/animasi\/wp-content\/uploads\/2024\/11\/Taawudz-Basmalah.mp3');\r\n const basmalahAudio = new Audio('https:\/\/bg.pendampingusaha.com\/animasi\/wp-content\/uploads\/2024\/11\/Taawudz-Basmalah.mp3');\r\n\r\n \/\/ Objek untuk menyimpan status pemutaran\r\n let isPlaying = {\r\n taawudz: false,\r\n basmalah: false\r\n };\r\n\r\n function playTaawudz() {\r\n if (!isPlaying.taawudz) {\r\n \/\/ Hentikan basmalah jika sedang diputar\r\n if (isPlaying.basmalah) {\r\n basmalahAudio.pause();\r\n basmalahAudio.currentTime = 0;\r\n isPlaying.basmalah = false;\r\n }\r\n\r\n taawudzAudio.play();\r\n isPlaying.taawudz = true;\r\n\r\n taawudzAudio.onended = function() {\r\n isPlaying.taawudz = false;\r\n };\r\n } else {\r\n taawudzAudio.pause();\r\n taawudzAudio.currentTime = 0;\r\n isPlaying.taawudz = false;\r\n }\r\n }\r\n\r\n function playBasmalah() {\r\n if (!isPlaying.basmalah) {\r\n \/\/ Hentikan taawudz jika sedang diputar\r\n if (isPlaying.taawudz) {\r\n taawudzAudio.pause();\r\n taawudzAudio.currentTime = 0;\r\n isPlaying.taawudz = false;\r\n }\r\n\r\n basmalahAudio.play();\r\n isPlaying.basmalah = true;\r\n\r\n basmalahAudio.onended = function() {\r\n isPlaying.basmalah = false;\r\n };\r\n } else {\r\n basmalahAudio.pause();\r\n basmalahAudio.currentTime = 0;\r\n isPlaying.basmalah = false;\r\n }\r\n }\r\n\r\n \/\/ Fungsi untuk memutar audio huruf hijaiyah\r\n const hurufAudios = {\r\n 'alif': 'URL_AUDIO_ALIF',\r\n 'ba': 'URL_AUDIO_BA',\r\n 'ta': 'URL_AUDIO_TA',\r\n 'tsa': 'URL_AUDIO_TSA',\r\n 'jim': 'URL_AUDIO_JIM',\r\n 'ha': 'URL_AUDIO_HA'\r\n };\r\n\r\n function playHuruf(huruf) {\r\n const audio = new Audio(hurufAudios[huruf]);\r\n audio.play();\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34378fb elementor-align-center elementor-widget elementor-widget-button\" data-id=\"34378fb\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.airasoft.belajariqro\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Download APK<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Belajar Mengaji – Iqro Digital Belajar Mengaji Digital Mari Belajar Membaca Al-Qur’an Ta’awudz & Basmalah \u0623\u064e\u0639\u064f\u0648\u0630\u064f \u0628\u0650\u0627\u0644\u0644\u064e\u0651\u0647\u0650 \u0645\u0650\u0646\u064e \u0627\u0644\u0634\u064e\u0651\u064a\u0652\u0637\u064e\u0627\u0646\u0650 \u0627\u0644\u0631\u064e\u0651\u062c\u0650\u064a\u0645\u0650 Putar Ta’awudz \u0628\u0650\u0633\u0652\u0645\u0650 \u0627\u0644\u0644\u064e\u0651\u0647\u0650 \u0627\u0644\u0631\u064e\u0651\u062d\u0652\u0645\u064e\u0646\u0650 \u0627\u0644\u0631\u064e\u0651\u062d\u0650\u064a\u0645\u0650 Putar Basmalah \u0627 \u0628 \u062a \u062b \u062c \u062d Download APK<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/483"}],"collection":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/comments?post=483"}],"version-history":[{"count":16,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/483\/revisions"}],"predecessor-version":[{"id":506,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/483\/revisions\/506"}],"wp:attachment":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/media?parent=483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}