Adding Google Translate to your Blogspot

zombie Blog

 Adding Google Translate to your Blogspot (now known as Blogger) blog can be done by following these steps:

  1. Get Google Translate API Key (Optional but recommended):

    • Visit the Google Cloud Console.
    • Create a new project or select an existing one.
    • Enable the "Cloud Translation API" for your project.
    • Create API credentials (an API key). Make sure to restrict the API key for security.

  2. Add Translation Widget to Blogger:

    • Log in to your Blogger account.
    • Go to the dashboard of the blog you want to add Google Translate to.

  3. Access Theme Editor:

    • In the left menu, click on "Theme."
    • Click on "Edit HTML" to access the theme editor.

  4. Backup Your Template (Optional but recommended):

    • Before making any changes, it's a good idea to backup your template. You can do this by clicking on the "Download Theme" button.

  5. Insert Google Translate Code:

    • Find the <head> section in your template. You can do this by searching for <head> in the HTML code.

    • Add the following code just below the <head> tag:

  • html
    <script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
  }
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

      • This code initializes the Google Translate widget.

    2. Save the Template:

      • After adding the code, click on the "Save theme" button to save your changes.

    3. Place the Widget on Your Blog:

      • Now you need to add the actual widget to your blog. You can do this by adding an HTML/JavaScript gadget.

      • Go back to your blog's layout, click on "Layout" in the left menu.

      • Click on "Add a Gadget" where you want to place the translation widget (e.g., sidebar or footer).

      • Choose the "HTML/JavaScript" gadget.

      • In the content section, paste the following code:

        html
        <div id="google_translate_element"></div>

      • Save the gadget.

    4. Preview and Test:

      • View your blog to see the Google Translate widget in action. You should see the language dropdown.

    Remember, the appearance and behavior of the Google Translate widget may vary based on your blog's theme and layout. Adjustments to the CSS may be needed if you want to fine-tune its appearance.

    • 0 Comments