Merge pull request #1491 from prakharsingh-74/main

implementing google translator in the blogs page
akshitagupta15june · Mar 23, 2024 · 12d328d · 12d328d
2 parents ebab5f5 + 2cd1e13
commit 12d328d
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/Blogs/Blog.html b/Blogs/Blog.html
@@ -13,6 +13,9 @@
   </head>
 
   <body>
+    <!-- Google Translate Widget Container -->
+    <div id="google_translate_element"></div>
+
     <div class="blogWrapper h-screen overflow-hidden relative">
 
       <div class="md:pr-8 hover-effect">
@@ -287,7 +290,13 @@
       </div>
     </div>
 
-
+    <!-- Import Google Translate JavaScript -->
+    <script type="text/javascript">
+      function googleTranslateElementInit() {
+          new google.translate.TranslateElement({ pageLanguage: 'en', includedLanguages: 'en,es,fr,de,it,pt,ru,zh-CN,zh-TW,ja,ko,ar,hi,bn,ur,tr,nl,el,sv,pl,vi,th,id,ms,fil,fi,da,no,hu,cs,sk,ro,bg,hr,sr,sl,uk,he,fa,ta,te,kn,ml', layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, 'google_translate_element');
+      }
+  </script>
+  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     <script>
       function initiatePrint ()
       {

diff --git a/Blogs/newBlogStyle.css b/Blogs/newBlogStyle.css
@@ -103,3 +103,35 @@
     object-fit: contain;
   }
 }
+
+#google_translate_element {
+  position: fixed;
+  top: 60px; /* Adjust top distance as needed */
+  right: 50px; /* Adjust right distance as needed */
+  z-index: 9999; /* Ensure it's above other content */
+  background-color: #00ff44; /* Background color */
+  border-radius: 0 !important; /* Border radius */
+  border: 1px solid #ccc; /* Border */
+  padding: 10px; /* Padding */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Box shadow */
+}
+
+/* Styling for the translate button */
+#google_translate_element .goog-te-menu-value {
+  font-size: 16px; /* Adjust font size */
+  padding: 6px 12px; /* Adjust padding */
+  border: 1px solid #ccc; /* Border color */
+  border-radius: 4px; /* Border radius */
+  background-color: #ccc; /* Background color */
+}
+
+/* Styling for the language dropdown */
+#google_translate_element select.goog-te-combo {
+  appearance: none; /* Remove default appearance */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding: 6px 12px; /* Adjust padding */
+  border: 1px solid #ccc; /* Border color */
+  border-radius: 4px; /* Border radius */
+  background-color: #f8f8f8; /* Background color */
+}