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 translatio>n. 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.
  6. Delete the existing one and replace it from the code provided below.
    • Please be careful, you might delete the code not related to google translate script.
  7. Click save and see the result.
  8. 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.



CSS code are as follows.

For widget-title class
.widget-title{
    position: relative;
    float: left;
    width: 100%;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-sizing: border-box;
    display: block;
    border-top: 3px solid #0038a8;
}
For goog-te-combo class
.goog-te-combo {
    width: 100%;
    height: 34px;
    color: #888;
    font-size: 14px;
    font-family: 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;
}


Please click screenshot as well for your reference.

Post a Comment

Previous Post Next Post