Google translator widget
Welcome to Askledge.com, 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. 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…
How to install Google Translate Widget
To install the Google translator widget on your website, you just need to follow 5 simple steps. Let’s get started!
Steps :
- Go to Blogger.com
- Then go to Layout Section
- Click on “Add a Gadget” in the sidebar-widget
- 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>- 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!
Read More: