From 2cd1e136f7e4477b90e7b02e0cd231e2aa8fac8e Mon Sep 17 00:00:00 2001
From: prakharsingh-74 <prakharsingh7014@gmail.com>
Date: Sat, 23 Mar 2024 00:40:51 +0530
Subject: [PATCH] implementing google translator in the blogs page

---
 Blogs/Blog.html        | 11 ++++++++++-
 Blogs/newBlogStyle.css | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
diff --git a/Blogs/Blog.html b/Blogs/Blog.html
index a56b6e05..6ddced87 100644
--- 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
index c02acced..ac23dba6 100644
--- 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 */
+}
\ No newline at end of file
