Tombol Mengambang Interaktif<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n body {\r\n margin: 0;\r\n font-family: Arial, sans-serif;\r\n padding-bottom: 70px; \/* Memberikan ruang agar tombol tidak menutupi konten *\/\r\n background-color: #f0f2f5;\r\n }\r\n\r\n .floating-nav {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n background-color: #ffffff;\r\n box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);\r\n display: flex;\r\n justify-content: space-around;\r\n padding: 10px 0;\r\n z-index: 1000;\r\n }\r\n\r\n .floating-nav-item {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n color: #555;\r\n text-decoration: none;\r\n font-size: 12px;\r\n padding: 5px;\r\n flex: 1; \/* Agar item membagi ruang secara merata *\/\r\n transition: color 0.3s ease; \/* Transisi warna saat hover\/active *\/\r\n min-width: 60px; \/* Memberikan lebar minimum agar tidak terlalu sempit jika banyak item *\/\r\n }\r\n\r\n .floating-nav-item i {\r\n font-size: 20px;\r\n margin-bottom: 5px;\r\n color: #777;\r\n transition: color 0.3s ease; \/* Transisi warna ikon *\/\r\n }\r\n\r\n .floating-nav-item span {\r\n font-weight: bold;\r\n text-align: center; \/* Memastikan teks di tengah *\/\r\n line-height: 1.2; \/* Mengurangi spasi antar baris jika teks panjang *\/\r\n }\r\n\r\n .floating-nav-item:hover {\r\n color: #0056b3; \/* Warna saat dihover *\/\r\n }\r\n\r\n .floating-nav-item:hover i {\r\n color: #0056b3;\r\n }\r\n\r\n .floating-nav-item.active {\r\n color: #007bff; \/* Warna untuk item yang sedang aktif *\/\r\n }\r\n\r\n .floating-nav-item.active i {\r\n color: #007bff;\r\n }\r\n\r\n \/* Styling untuk konten dummy agar terlihat ada scroll *\/\r\n .content {\r\n height: 1200px; \/* Tinggi konten dummy *\/\r\n padding: 20px;\r\n text-align: center;\r\n color: #333;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n\r\n <nav class=\"floating-nav\">\r\n \r\n <a href=\"https:\/\/tegis.my.id\/\" class=\"floating-nav-item\" data-page=\"home\">\r\n <i class=\"fas fa-home\"><\/i>\r\n <span>Home<\/span>\r\n <\/a>\r\n \r\n <a href=\"https:\/\/tegis.my.id\/index.php\/paket-umroh\/\" class=\"floating-nav-item\" data-page=\"paket\">\r\n <i class=\"fas fa-box\"><\/i>\r\n <span>Paket<\/span>\r\n <\/a>\r\n \r\n <a href=\"https:\/\/tegis.my.id\/index.php\/jadwal\/\" class=\"floating-nav-item\" data-page=\"jadwal\">\r\n <i class=\"fas fa-calendar-alt\"><\/i>\r\n <span>Jadwal<\/span>\r\n <\/a>\r\n \r\n <a href=\"https:\/\/tegis.my.id\/index.php\/pembayaran-2\/\" class=\"floating-nav-item\" data-page=\"bayar\">\r\n <i class=\"fas fa-credit-card\"><\/i>\r\n <span>Bayar<\/span>\r\n <\/a>\r\n \r\n <a href=\"https:\/\/tegis.my.id\/index.php\/persyaratan\/\" class=\"floating-nav-item\" data-page=\"cara-daftar\">\r\n <i class=\"fas fa-user-plus\"><\/i> \r\n <span>Cara Daftar<\/span>\r\n <\/a>\r\n \r\n <a href=\"https:\/\/tegis.my.id\/index.php\/kontak\/\" class=\"floating-nav-item\" data-page=\"kontak\">\r\n <i class=\"fas fa-address-book\"><\/i>\r\n <span>Kontak<\/span>\r\n <\/a>\r\n <\/nav>\r\n\r\n <script>\r\n \/\/ Mendapatkan semua item navigasi\r\n const navItems = document.querySelectorAll('.floating-nav-item');\r\n\r\n \/\/ Fungsi untuk menghapus kelas 'active' dari semua item\r\n function removeActiveClass() {\r\n navItems.forEach(item => {\r\n item.classList.remove('active');\r\n });\r\n }\r\n\r\n \/\/ Fungsi untuk mengatur tombol aktif berdasarkan URL saat ini\r\n function setActiveButtonBasedOnUrl() {\r\n \/\/ Dapatkan path dari URL halaman saat ini\r\n \/\/ Menggunakan new URL() untuk mendapatkan pathname yang bersih dari query string atau hash\r\n const currentPathname = new URL(window.location.href).pathname;\r\n\r\n \/\/ Hapus kelas 'active' dari semua item terlebih dahulu\r\n removeActiveClass();\r\n\r\n \/\/ Iterasi melalui setiap item navigasi\r\n navItems.forEach(item => {\r\n \/\/ Dapatkan path dari atribut href item navigasi\r\n const itemPathname = new URL(item.href).pathname;\r\n\r\n \/\/ Logika perbandingan yang lebih tepat:\r\n \/\/ 1. Jika pathname item sama persis dengan pathname halaman saat ini\r\n \/\/ 2. Atau, jika item adalah \"Home\" DAN pathname halaman saat ini adalah root (\"\/\" atau \"\/index.php\/\")\r\n if (itemPathname === currentPathname ||\r\n (item.dataset.page === 'home' && (currentPathname === '\/' || currentPathname === '\/index.php\/'))) {\r\n item.classList.add('active');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Panggil fungsi ini saat DOM selesai dimuat untuk mengatur status awal\r\n document.addEventListener('DOMContentLoaded', setActiveButtonBasedOnUrl);\r\n\r\n \/\/ Menambahkan event listener ke setiap item navigasi untuk perubahan warna saat diklik\r\n \/\/ Ini tetap diperlukan jika Anda ingin efek visual langsung saat mengklik\r\n \/\/ sebelum halaman baru dimuat sepenuhnya (jika ada navigasi SPA atau AJAX)\r\n navItems.forEach(item => {\r\n item.addEventListener('click', function(event) {\r\n \/\/ Tidak perlu event.preventDefault() jika Anda ingin navigasi normal\r\n \/\/ Jika ingin SPA, Anda akan mencegah default dan memuat konten secara dinamis\r\n \r\n \/\/ Hapus kelas 'active' dari semua item\r\n removeActiveClass();\r\n\r\n \/\/ Tambahkan kelas 'active' ke item yang diklik\r\n this.classList.add('active');\r\n\r\n \/\/ Catatan: Saat halaman baru dimuat, fungsi setActiveButtonBasedOnUrl\r\n \/\/ akan dipanggil lagi untuk memastikan status aktif yang benar.\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\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>Pembayaran \u00a0Mandiri\u00a0 \u00a0:130.0010561085\u00a0 \u00a0 an: Siska Purwanti Confirmasi Pembayaran Tombol Mengambang Interaktif Home Paket Jadwal Bayar Cara Daftar Kontak<\/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-143","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/pages\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":43,"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/pages\/143\/revisions"}],"predecessor-version":[{"id":664,"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/pages\/143\/revisions\/664"}],"wp:attachment":[{"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/media?parent=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}