How to Install the Google Translate Widget in Blogger and Wordpress

How to Install the Google Translate Widget in Blogger and Wordpress
Welcome to InfinityBlogger, So today we are going to learn how to install a Google translator widget on your website. You can use this Google translator widget on both platforms, WordPress, and Blogger.

About Google translator widget

I think the Google translator widget is a must-have widget, every blog must have this widget. Because, there are many blogs, which write in Hindi, or some other languages.. ex. Indonesian, Malayalam, etc.
So, Users from all over the world, can't read their posts, because it's not their native language. So, they return from our website, and there we increase our bounce rate. And the user is not coming back on your website again... Because, he or she knows that he can't interact with your website because of its language, And. Your website is no use to him or her. And that's not a good thing. So, that's why we should use the Google translator widget on our websites. So Users can easily interact with our blog, without any problem...

To install the Google translator widget on your website, you just need to follow 5 simple steps.
Let's get started!

Follow the steps :

Step 1: Go to Blogger.com
Step 2: Then go to Layout Section
Step 3: Click on "Add a Gadget" in the sidebar-widget
Step 4: Copy and Paste all the code given below into it.

<style>
#123 {
  font-family: Lato, sans-serif;
  max-width: auto;
  margin: auto;
}

#translator-123 {
  display: block;
  width: 100%;
  max-width: 300px;
  background-color: #fff;
  color: #444;
  overflow: hidden;
  position: relative;
  height: 40px;
  line-height: 40px;
  border: 1px solid #e0e0e0;
}

#translator-123 select {
  border: none;
  background: transparent;
  font-family: Verdana, Arial, Sans-Serif;
  font-size: 12px;
  width: 100%;
  color: #444;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  cursor: text;
  padding: 5px 10px;
}

#translator-123 a,
#translator-123 a:hover {
  display: block;
  background-color: #4791d2;
  border: none;
  color: #fff;
  text-decoration: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  width: 14%;
  transition: all 0.3s ease;
  margin: 0;
}

#translator-123 a:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left-color: #fff;
  position: absolute;
  top: 50%;
  left: 45%;
  margin-top: -5px;
}

#translator-123 select:focus,
#translator-123 a:focus,
#translator-123 select:active,
#translator-123 a:active {
  border: none;
  outline: none;
  cursor: pointer;
}

option {
  background: #444;
  color: #e0e0e0;
}

#translator-123 a:hover,
#translator-123 a:active {
  opacity: 0.9;
}
</style>

<!doctype html>
<div id="123">
  <div id="translator-123">
    <select id="translate-language">
      <option value="en" selected />English
      <option value="id" />Indonesian
      <option value="af" />Afrikaans
      <option value="sq" />Albanian
      <option value="ar" />Arabic
      <option value="hy" />Armenian
      <option value="az" />Azerbaijani
      <option value="eu" />Basque
      <option value="be" />Belarusian
      <option value="bn" />Bengali
      <option value="bg" />Bulgarian
      <option value="ca" />Catalan
      <option value="zh-CN" />Chinese
      <option value="hr" />Croatian
      <option value="cs" />Czech
      <option value="da" />Danish
      <option value="nl" />Dutch
      <option value="en" />English
      <option value="eo" />Esperanto
      <option value="et" />Estonian
      <option value="tl" />Filipino
      <option value="fi" />Finnish
      <option value="fr" />French
      <option value="gl" />Galician
      <option value="ka" />Georgian
      <option value="de" />German
      <option value="el" />Greek
      <option value="gu" />Gujarati
      <option value="ht" />Haitian Creole
      <option value="iw" />Hebrew
      <option value="hi" />Hindi
      <option value="hu" />Hungarian
      <option value="is" />Icelandic
      <option value="id" />Indonesian
      <option value="ga" />Irish
      <option value="it" />Italian
      <option value="ja" />Japanese
      <option value="kn" />Kannada
      <option value="ko" />Korean
      <option value="la" />Latin
      <option value="lv" />Latvian
      <option value="lt" />Lithuanian
      <option value="mk" />Macedonian
      <option value="ms" />Malay
      <option value="mt" />Maltese
      <option value="no" />Norwegian
      <option value="fa" />Persian
      <option value="pl" />Polish
      <option value="pt" />Portuguese
      <option value="ro" />Romanian
      <option value="ru" />Russian
      <option value="sr" />Serbian
      <option value="sk" />Slovak
      <option value="sl" />Slovenian
      <option value="es" />Spanish
      <option value="sw" />Swahili
      <option value="sv" />Swedish
      <option value="ta" />Tamil
      <option value="te" />Telugu
      <option value="th" />Thai
      <option value="tr" />Turkish
      <option value="uk" />Ukrainian
      <option value="ur" />Urdu
      <option value="vi" />Vietnamese
      <option value="cy" />Welsh
      <option value="yi" />Yiddish
    </select><a id="translate-me" href="#" title="Translate"></a>
  </div>
</div></!doctype>

<script>
(function () {
  var mylang = "id", // Your website language
    anchor = document.getElementById("translate-me");
  anchor.onclick = function () {
    window.open(
      "https://translate.google.com/translate?u=" +
        encodeURIComponent(location.href) +
        "&langpair=" +
        mylang +
        "%7C" +
        document.getElementById("translate-language").value +
        "&hl=en"
    );
    return false;
  };
})();
</script>
Step 5: Save the widget.

It's Done!
Now Go To Your Blog And Check Its Working Or Not!
If You Face Any Issue, You Can Contact Us!