Search code examples
tumblrgoogle-translate

Google Translate Tool on Tumblr Blog


I have a tumblr blog. I want to put a Google Translate Tool & Button on my tumblr blog. How can I do? Unfortunately, I cant find it in tumblr help pages.


Solution

  • Go here: https://translate.google.com/manager/add

    Follow all of the instructions and you'll get two pieces of code, one that looks like this:

    <meta name="google-translate-customization" content="272b1f36bdc17cf1-0221013045ec1abb-gfd965ee1275b4499-14"></meta>
    

    You'll want to place the <meta> code before the closing </head> tag, this will be at the top of your theme.

    The other piece of code looks like this:

    <div id="google_translate_element"></div>
    <script type="text/javascript">
        function googleTranslateElementInit() {
          new google.translate.TranslateElement({pageLanguage: 'en', 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>
    

    For this piece of code you'll need to place it where you want the tool to appear on your theme, likely this will be near the top of your page, just after the opening <body> tag. Your blog will likely have some sort of 'wrapping' div, so you maybe want to place it inside of that.

    You'll need to fiddle around a little bit to position it how you like.

    To put both of these bits of code into your theme, you'll need to go to the 'Customize Theme' page and click on 'Edit HTML'.