Blog, This is the Google Translate with icons that I am using on my blog.

The following code is the Google Translate code currently used on my blog

 

 

Google Translate

Google Blog provides a basic Google Translate by default.
But it is too simple and inconvenient to use.
I wanted a Google Translate where each country is represented by an icon, so you can click directly to translate.
So, I eventually found this code.
Then, I added some styles and modified it.
It may be difficult to use the code below directly.
You can copy it to Notepad and organize the paragraphs to use it.

 

<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","native_language_names":true,"detect_browser_lang
uage":true,"languages":["ko","en","ja","zh-CN","fr","it","es","de"],"wrapper_selector":".gtra
nslate_wrapper","alt_flags":{"en":"usa","pt":"brazil","fr":"quebec"}}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/fd.js" defer></script>
<style>
  /*Dropdown box settings*/ 
  .gtranslate_wrapper select {
    background-color: rgba(155, 155, 155, 0.1); /* Set the background of the dropdown box to 70% opacity */ 
    color: white !important; /* Set the text color of the dropdown box to white */ 
    border-color: rgba(155, 155, 155, 0.1); /* Set the border color of the dropdown box to 70% opacity */ 
    padding: 5px;
    font-size: 15px;
    border: none;
    border-radius: 30px; /* Make the corners rounded with the application of the R value to the dropdown box */ 
    transform: translate(30%, 10%); /* Positioning of the dropdown box */ 
  }
  /* Settings of the internal option items in the dropdown box */ 
  .gtranslate_wrapper select option {
    color: black !important; /*The text color of the internal option items in the dropdown box is black */ 
    background-color: white !important; /*Background color of the internal option items in the dropdown box is white */ 
  }
</style>
 
Copyright2021olympithecus