fix: tampilan translate

newbie-consultant · Aug 5, 2024 · 91dace3 · 91dace3
1 parent 19d666d
commit 91dace3
Showing 1 changed file with 49 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -28,6 +28,7 @@
     <!-- custom Css-->
     <link href="assets/css/custom.min.css" rel="stylesheet" type="text/css" />
 
+    <script src="https://cdn.gtranslate.net/widgets/latest/dwf.js" defer></script>
 </head>
 
 <body data-bs-spy="scroll" data-bs-target="#navbar-example">
@@ -62,8 +63,23 @@
                             <a class="nav-link" href="#creators">Menu4</a>
                         </li>
                     </ul>
+                    <div class="dropdown gtranslate_wrapper">
+                        <button class="btn btn-secondary dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+                            <img id="selected-flag" src="" alt=""> <span id="selected-language">Language</span>
+                        </button>
+                        <ul class="dropdown-menu" aria-labelledby="languageDropdown">
+                            <li><a class="dropdown-item" href="#" onclick="changeLanguage('en', 'English'); return false;"><img src="https://cdn.gtranslate.net/flags/32/en.png" alt="English"> English</a></li>
+                            <li><a class="dropdown-item" href="#" onclick="changeLanguage('id', 'Indonesian'); return false;"><img src="https://cdn.gtranslate.net/flags/32/id.png" alt="Indonesian"> Indonesia</a></li>
+                            <li><a class="dropdown-item" href="#" onclick="changeLanguage('jw', 'Javanese'); return false;"><img src="https://cdn.gtranslate.net/flags/32/jw.png" alt="Javanese"> Javanese</a></li>
+                            <li><a class="dropdown-item" href="#" onclick="changeLanguage('ms', 'Malay'); return false;"><img src="https://cdn.gtranslate.net/flags/32/ms.png" alt="Malay"> Malay</a></li>
+                            <li><a class="dropdown-item" href="#" onclick="changeLanguage('fr', 'French'); return false;"><img src="https://cdn.gtranslate.net/flags/32/fr.png" alt="French"> French</a></li>
+                            <li><a class="dropdown-item" href="#" onclick="changeLanguage('de', 'German'); return false;"><img src="https://cdn.gtranslate.net/flags/32/de.png" alt="German"> German</a></li>
+                            <li><a class="dropdown-item" href="#" onclick="changeLanguage('it', 'Italian'); return false;"><img src="https://cdn.gtranslate.net/flags/32/it.png" alt="Italian"> Italian</a></li>
+                            <li><a class="dropdown-item" href="#" onclick="changeLanguage('es', 'Spanish'); return false;"><img src="https://cdn.gtranslate.net/flags/32/es.png" alt="Spanish"> Spanish</a></li>
+                            <li><a class="dropdown-item" href="#" onclick="changeLanguage('ja', 'Japanese'); return false;"><img src="https://cdn.gtranslate.net/flags/32/ja.png" alt="Japanese"> Japanese</a></li>
+                        </ul>
+                    </div>
                 </div>
-
             </div>
         </nav>
             <div class="bg-overlay bg-overlay-pattern"></div>
@@ -1765,7 +1781,6 @@ <h5 class="text-white mb-0">Support</h5>
             <i class="ri-arrow-up-line"></i>
         </button>
         <!--end back-to-top-->
-        <div class="gtranslate_wrapper"></div>
     </div>
     <!-- end layout wrapper -->
 
@@ -1785,8 +1800,38 @@ <h5 class="text-white mb-0">Support</h5>
     <script src="assets/js/pages/nft-landing.init.js"></script>
 
 
-<script>window.gtranslateSettings = {"default_language":"en","native_language_names":true,"detect_browser_language":true,"languages":["en","id","jw","ms","fr","de","it","es","ja"],"wrapper_selector":".gtranslate_wrapper","flag_size":16,"switcher_horizontal_position":"right","switcher_vertical_position":"top","switcher_text_color":"#f7f7f7","switcher_arrow_color":"#f2f2f2","switcher_border_color":"#161616","switcher_background_color":"#303030","switcher_background_shadow_color":"#474747","switcher_background_hover_color":"#3a3a3a","dropdown_text_color":"#eaeaea","dropdown_hover_color":"#748393","dropdown_background_color":"#474747"}</script>
-<script src="https://cdn.gtranslate.net/widgets/latest/dwf.js" defer></script>
+    <script>
+        window.gtranslateSettings = {
+            "default_language":"en",
+            "native_language_names":true,
+            "detect_browser_language":true,
+            "languages":["en","id","jw","ms","fr","de","it","es","ja"],
+            "wrapper_selector":".gtranslate_wrapper",
+            "flag_size":1,
+            "switcher_text_color":"transparent",
+            "switcher_arrow_color":"transparent",
+            "switcher_border_color":"transparent",
+            "switcher_background_color":"transparent",
+            "switcher_background_shadow_color":"transparent",
+            "switcher_background_hover_color":"transparent",
+            "dropdown_text_color":"transparent",
+            "dropdown_hover_color":"transparent",
+            "dropdown_background_color":"transparent"
+        };
+    </script>
+
+    <script>
+        function changeLanguage(langCode, langName) {
+            var flagUrl = 'https://cdn.gtranslate.net/flags/32/' + langCode + '.png';
+            document.getElementById('selected-flag').src = flagUrl;
+            document.getElementById('selected-flag').alt = langName;
+            document.getElementById('selected-language').innerText = langName;
+
+            // Memanggil fungsi GTranslate
+            doGTranslate('en|' + langCode);
+        }
+    </script>
+
 </body>
 
 </html>