Google Translate widget for bloggers can help you get more traffic from other countries that use different languages. Blogger posts can now be easily translated to any language depending on the language conversion that you would like to translate into using the widget provided below. Use the widget to translate to your visitor’s preferred language from your posts.
Now to serve different countries with translated variations of blogger posts, people can reach out to their visitors more easily. Learn how to add a Translate widget to Blogger with one simple step-by-step implementation code to integrate it into your Blogger website. Also, the widget has a responsive look for your website leaving your website looking stunning for your post-translated visitors.
Add Google Translate Widget to blogger
1. log in to your blogger
2. Select a layout from left side options
3. Click on Add Gadget from the sidebar section
4. Click on HTML/Javascript
5. Copy and paste the below code into the code box provided.
<style type=”text/css”>
#translator-wrapper {
display:block;
width:90%;
max-width:300px;
border:none;
background-color:#fff;
color:#444;
overflow:hidden;
position:relative;
height:40px;
line-height:40px;
border:1px solid #e0e0e0;
}
#translator-wrapper 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-wrapper a,
#translator-wrapper a:hover {
display:block;
background-color:#4791d2;
border:none;
color:#fff;
margin:0 0;
text-decoration:none;
position:absolute;
top:0;
right:0;
bottom:0;
cursor:pointer;
width:14%;
transition:all 0.3s ease;
}
#translator-wrapper a:before {
content:””;
display:block;
width:0;
height:0;
border:6px solid transparent;
border-left-color:white;
position:absolute;
top:50%;
left:45%;
margin-top:-5px;
}
#translator-wrapper a:hover {opacity:0.9;}
#translator-wrapper a:active {opacity:0.9;}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
border:none;
outline:none;
cursor:pointer;
}
option {
background:#444;
color:#e0e0e0;
}
</style>
<div id=”translator-wrapper”><select id=”translate-language”><option value=”en” selected=”selected”>English</option><option value=”id”>Indonesian</option><option value=”af”>Afrikaans</option><option value=”sq”>Albanian</option><option value=”ar”>Arabic</option><option value=”hy”>Armenian</option><option value=”az”>Azerbaijani</option><option value=”eu”>Basque</option><option value=”en”>English</option><option value=”eo”>Esperanto</option><option value=”et”>Estonian</option><option value=”tl”>Filipino</option><option value=”fi”>Finnish</option><option value=”fr”>French</option><option value=”gl”>Galician</option><option value=”ka”>Georgian</option><option value=”de”>German</option><option value=”el”>Greek</option><option value=”gu”>Gujarati</option><option value=”ht”>Haitian Creole</option><option value=”iw”>Hebrew</option><option value=”hi”>Hindi</option><option value=”hu”>Hungarian</option><option value=”is”>Icelandic</option><option value=”id”>Indonesian</option><option value=”ga”>Irish</option><option value=”it”>Italian</option><option value=”ja”>Japanese</option><option value=”kn”>Kannada</option><option value=”ko”>Korean</option><option value=”la”>Latin</option><option value=”lv”>Latvian</option><option value=”lt”>Lithuanian</option><option value=”mk”>Macedonian</option><option value=”ms”>Malay</option><option value=”mt”>Maltese</option><option value=”no”>Norwegian</option><option value=”fa”>Persian</option><option value=”pl”>Polish</option><option value=”pt”>Portuguese</option><option value=”es”>Spanish</option><option value=”sw”>Swahili</option><option value=”sv”>Swedish</option><option value=”ta”>Tamil</option><option value=”te”>Telugu</option><option value=”th”>Thai</option><option value=”tr”>Turkish</option><option value=”uk”>Ukrainian</option><option value=”ur”>Urdu</option><option value=”vi”>Vietnamese</option><option value=”cy”>Welsh</option><option value=”yi”>Yiddish</option></select><a id=”translate-me” href=”#” title=”Translate”></a></div>
<script type=”text/javascript”>(function(){var mylang=“id”,anchor=document.getElementById(‘translate-me’);anchor.onclick=function(){window.open(‘http:return!1}})();</script>
6. Save your Google Translate widget in layout and refresh your website for final results.
Google Translate can be an invaluable tool for individuals using Blogger to expand their audience by transcending language barriers. When a creator writes content, they may use the shortcode hf to mark sections for translation. Google Translate seamlessly integrates with the platform, allowing posts to be instantly translated into numerous languages.
This capability ensures that the content reaches a wider, global audience, making a blogger’s insights, stories, and information accessible to non-English speakers. Not only does this foster greater connectivity and understanding between cultures, but it also enhances traffic to the Blogger website, potentially increasing engagement and opportunities for monetization.
