Google translate widget

Photo by Christopher Gower on Unsplash

Google translate supports over 100 languages spoken & written worldwide. No wonder it is the most integral part and or tools for web developing for an online website. As a researcher and a content editor, you have to be more flexible on this particular thing as readers today prefers to ready an understandable language they are comfortable with.

However, as of April 2019, google no longer provides access to google translate website translator due to the introduction of native browser translation. If you are a developer and a blogger you might need this google translate feature on your website.

As you notice, especially on a static website hosted on blogger.com, added google translate gadget no longer contains google script to display the translation tools.

However, there are still alternative script or ways to display it. scripts can still be use as far as google is concern.

Here's how you do it.;

  1. Open your blogger account & click the layout menu on the left side.
  2. Navigate to add gadget link/button and add the google translate widget; note to add the widget to your desired website area. 
  3. After adding google translate widget, try to view your website on browser if it displays the widget correctly, else continue to step 4. 
  4. On your admin section, navigate to Theme menu and find the edit html link to edit your website html.  
  5. Long pres Ctrl + F on your keyboard and search translate keyword to look for the google translate widget html code. (See the similar figure below)


  6. Delete the existing xhtml script (see above screenshot) and replace it with the google translate widget script provided below; Please be careful, you might delete the code not related to google translate script.alert-error
  7. Click save and see the result. 
If you want to beautify the output appearance of your google translate like mine, I included the CSS style as well for your reference.

Google translate widget script

<b:widget id='Translate1' locked='false' title='Translate' type='Translate' version='2' visible='true'>
   <b:widget-settings>
   <b:widget-setting name='displayMode'>VERTICAL</b:widget-setting>
   </b:widget-settings>
   <b:includable id='main'>
   <b:include name='widget-title'/>
   <b:include name='content'/>
</b:includable>
   <b:includable id='content'>
      <div id='google_translate_element'/>
      <script>
      function googleTranslateElementInit() {
      new google.translate.TranslateElement({
      pageLanguage: &#39;<b:eval expr='data:blog.locale.language ?: &quot;auto&quot;'/>&#39;,
      autoDisplay: &#39;true&#39;,
      layout: google.translate.TranslateElement.InlineLayout.<data:layout/>
      }, &#39;google_translate_element&#39;);
   }
   </script>
   <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
</b:includable>
</b:widget>code-box


 CSS Code

.goog-te-gadget{
   white-space:unset !important;
   font-family: 'Poppins', sans-serif !important;
}
.goog-te-combo {
   width: 100%;
   height: 34px;
   color: #888;
   font-size: inherit;
   text-align: center;
   padding: 0 10px;
   margin: 0 0 10px !important;
   box-sizing: border-box;
   border: 1px solid #eaeaea;
   transition: ease .17s;
   font-family: 'Poppins', sans-serif !important;
}code-box


Screenshots


How to add google translate gadget on your blogger website?

How to add google translate gadget on your blogger website?

How to add google translate gadget on your blogger website?

How to add google translate gadget on your blogger website?

Thank you for taking time to read this published article, and please submit a comment down below if you sincerely like the content.

You can also follow me on social media(s) for more updates.

Post a Comment

Much appreciated for gently taking so much personal time to respectfully submit a published comment on BloggersPh. If you sincerely want to submit some ethical questions, I will be delighted to respond appropriately them here or via private email. Please do not submit a mean or disrespectful comment; they will be eradicated. Enjoy!

Previous Post Next Post