Google Translate Widget with Flags For Blogger

The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language.
This widget also auto-detect your blog language and then translate it to the readers chosen language.

It supports 12 different languages:
English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Korean, Arabic And Chinese.
google translate for blogger, blogger gadgets, blogger tricks

How To Add The Google Translate Widget To Blogger

Step 1. Go to your Blogger Dashboard >> Layout and click on "Add A Gadget" link



Step 2. From the pop-up window, scroll down and choose HTML/JavaScript


 Step 3. Paste the code below in the empty box:

<script type="text/javascript">
function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}
</script>

<style>

 .google_translate img {
margin: 10px 20px 0px 20px;
    height: 24px;
    width: 24px;
        }
        .google_translate:hover img {
filter:alpha(opacity=0.30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }

.more {
    display: none;
a.showLink, a.hideLink {
    text-decoration: none;
    color: #0880C4;
    padding-left: 18px;
    background: transparent('down.gif') no-repeat left; }

a.hideLink {
    background: transparent url('up.gif') no-repeat left;
color: #0880C4;}

a.showLink:hover, a.hideLink:hover {
color: #0880C4;
 }

 </style>

 <div>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhvXRUYSMbkIm38bVrqdO_jljPtHCDWsoRtSNqBorH0igxWMwgBT-x4v5e6fC_6EAV4741IRR0aV8hCDfpqqVH4dWFMp6EdlLbw4AZMy75rzN0AfYvhtwyNHM87OeYIV8KbuP0JnR2R-lJ/s1600/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijyL4iBt4Ek2g05rGOrUeoiuJsoZ-Dp3GD7MzavBcMxiKjomtT1erK2SljcNpH6V4ogF4W4tz6Hler1-dTHs5L4U-Hld4Pin1ATwymPM12OZPvhgqGamBk4lU3B1CD5WBMP8eYUGaWuiVo/s1600/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5LBdK063E_gb2hi8CONIAoBHThy2j09xJIEDQBvIxLSdO9n0ZHasXJ4tyYF_aTi-cvDSUXsjSETFZ-gB9sQEuF7Bug_q13tDPn6YN5mOyRiGbsx1smVoldrZwHFI3hiEbmTyvthizDDL-/s1600/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn0mWKksEYDsJiBWqLLufT8oTx6LZExoaflC8ecCdxc-RP9jSyaozkTYGl3UAPVWjNpqKlvFZDl_k_zhc8PLbhCZFdA1BxmWbZH2tg32ZDBOFK45eeEiP5HDAQaA6KPqauYxutzapX609R/s1600/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">More</a>
<div id="example" class="more">
 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhMXuHmIbethd3nEx0b_lsxGPcBeL-Md6Je6be2tBvXk7v_FCKSj31nqIvA5-z1rCM3MCZRo5E0GKtboGlAbd8vFfIHwAYwYidebz2q56jl_8B32CLsW_SwoHiGvIy6TMcrx_lkx2TaN7/s1600/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikhX3tW3Cary3Z5owJTFIe9tbJ_q6OFvhM8WyED7GcSiSlhfzY-aoDK4e-FiQ3f43XFl8m6lnHE1zsm6BMdsUyZWHhmEDZJTOBFcEkehZQLr129hS3RV9GehR8NO4AxTgUO2qUZdOgst3l/s1600/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
      <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHjVcbplQP6pT5-LSmT3zS9CN9AtyQJvcgwHPaWX8im2cA0IuwTr7kUpHIeLXz17tfQgYZZpaK5g1SJWlg5lpIqGrOc3M9Fcrfwp6rQzLX41T9BegsR5vqE2q58ZG1X-pMmNeltbK69t7z/s1600/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xQpvhFveNuf7I49LAxCXPS0lFY_yfaaSSNu2NIidmXT0zJluFkyFPrZqwYUewwoqk8f3Ktpborjj-MSCw6lhYWF0cOpVon618GRShZyBxBxP8Gx_t9FytbCgkUBit8zG-9k4JciaxGXL/s1600/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<br />
 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCGMl1ZrDG_JwH2ydXJYLoUqqcZQegFeiZKpJMktCxTS10MfBKLuGdrmjPMvU4a-aVT3chFnU4DAP75bGu93bte1uxhGJWnr3kmHLE5NOWsW2auOI6wLk4u_1VY2z7CfiXdJ6umowMREk3/s1600/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7rpw9Cefa5Msp20jHgkcHYSJixXZ7NQIMYTir6LDKoMHo51m7j2hI465yQw8dYCvpJD7O7-9YDxpioHMon3qYUXyTQr48EZHljWTLvlVF4LiDmuf3TiroJlpiyavrpU9T-8J6HnDdkzQw/s1600/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwALGyMBigA_E-y0eeOLD8c09VxALsaDn4XP9tOCA4mtpMthRaepL5QT5xhgH5vwnYmfCQIhU-Pvuepxl0TgbsIGax6Ix_d8Ra4FJG089PfH0e-bMGhkQhjqmHf9Xm6GuHQ1duDOpfWPYG/s1600/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW1SL-XJ1bdZ5rA4rpk02gmsLgRz-lFhyphenhyphenPgP3IJ8m2AjEAEKT49NtjIE66vg7wFWS__AGptc7BFHfADrYMIysTCqZuMG8Gc2W0MVEGdqh_ky-A9lIZCfJLQD4atLV-207edA682kNV85mG/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
    <p><a href="#" id="example-hide" class="hideLink"
    onclick="showHide('example');return false;">Hide</p>
</div>
     </div>

Step 4. Now click on Save

google translate, blogger widgets, gadgets for blogspot
And you're done! Enjoy (:

Comments

Post a Comment

Popular posts from this blog

How to change Blogger "Post A Comment" Message

Image
While the main secret of getting comments is to have good friends and creating good content, sometimes it is difficult getting more comments when we have a brand new blog that is not visited very often. A pretty good technique is to put images to encourage visitors to comment. This tutorial will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, below are some images that you can use but you can also add your own image, that depends on your tastes. So, let's proceed with the steps... How to replace Post a Comment with an image In order to replace "Post A Comment" message in Blogger / Blogspot, follow the steps below: Step 1. Log into your Blogger account and select your blog. Step 2. Go to "Template" and press the "Edit HTML" button Accessing Blogger template editor Step 3. Click anywhere on the code area, then press the CTRL + F keys and search for this code (if you can't find the ...
Read more

Teensy and PWM

Image
Teensy and PWM Teensy 3.1/3.2 boards have 12 pins support PWM  PWM Resolution Teensy 3.1/3.2 Boards based on 32 bit M4 arm cortex board , and the resolution of these boards higher than normal arduino boards (Like Mega and Uno) . the Teensy PWM resolution can be up to 16 bit and you can set the PWM resolution using this function    analogWriteResolution(value); value: Resolution value (2 - 16 ) PWM Frequency in default , the PWM frequency for teensy 3.1/3.2 is 488 Hz and  you can change it using this function: analogWriteFrequency(pin, freq); pin : PWM pin freq : Frequency in Hz Simple Code simple code here to enable PWM on teensy pins 4 and 5 , and change the frequency for pin# 4 Code :  download it from here /* * PWM teensy 3.1/3.2 simple code * more information * https://mb-raw.blogspot.com/2018/02/teensy-and-pwm.html * written by : Mohannad Rawashdeh */ const int PWMpin1 = 4 ; //FTM1 timer const int PWMpin2 = 5 ; //FTM0 timer void setup ( ) { pinMod...
Read more

20 Best Sites with High Quality Free Stock Photos

Image
In today's online business world, tons of people have a need for quality free stock photos for their blogs, company websites, and everything in between. Unfortunately, there are still a lot of businesses who are settling for the corny stock photo of yesteryear, either because they don't know their options or think they are too hard to find. That's where the good news comes in: good stock photos don't have to be expensive or hidden deep in the crevices of the internet. In our digital age, there's plenty of solid material out there - if you know where to look. Read for more good news? We have your back, and have taken the hassle out of finding these stellar stock images. We're confident that this collection of resources will help you find exactly what you're looking for, whether it's adorable animals, minimalist interior design, and anything in between. 20 of the Best Sites to Download Royalty Free Stock Photos 1. Negative Space One of the best things abou...
Read more