Cara Membuat widget google translate untuk blogger

Kali ini saya akan membahas Cara Membuat widget google translate untuk blogger.

1. Silahkan login ke blogger
2. Klik Tata Letak
3. Klik tab Elemen Halaman
4. Klik Tambah Gadget

5. Klik tanda plus (+) untuk HTML/Javascript

6. Copy paste kode berikut : 

<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</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=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="22" src="http://lh6.ggpht.com/_wC8_9aR_6uE/S-sB776niUI/AAAAAAAAC1U/53KmR8w--Po/English.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></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=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sB8GWAHJI/AAAAAAAAC1Y/81fOTrIntO4/French.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></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=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="22" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sCFFa5WmI/AAAAAAAAC1c/97SQ7axFB7o/German.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></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=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sCYzIZffI/AAAAAAAAC10/vIA6TrkepxQ/Spain.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="22" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sCFKZFwRI/AAAAAAAAC1g/KWQ1jFf8R7Y/Italian.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></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=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sB7-D9dsI/AAAAAAAAC1Q/-AKXc4EYB5k/Dutch.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></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=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="22" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sCY8sWqeI/AAAAAAAAC1w/zaeK8Jq_mrg/Russian.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></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=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sCFq_2QyI/AAAAAAAAC1s/eKNJL3NTdNc/Portuguese.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="22" src="http://lh6.ggpht.com/_wC8_9aR_6uE/S-sCFU6ZB2I/AAAAAAAAC1k/EKW0esnRZwM/Japanese.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></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=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sCFawv3ZI/AAAAAAAAC1o/5h0bMG8dAvs/Korean.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></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=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sB7kqyAHI/AAAAAAAAC1I/P-sumP3J2fA/Arabic.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></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=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="22" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sB7wEy9XI/AAAAAAAAC1M/uErl2x0JVGU/Chinese-Simplified.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>
</div>

Keterangan :

• kode warna merah : alamat URL image bendera sebagai icon ( bisa diganti dengan image yang lain sesuai kebutuhan )
• kode warna biru : tinggi dan lebar image icon bendera ( ubah sesuai kebutuhan )
• posisi widget ini akan menyesuaikan lebar kolom yang ada sehingga bisa menjadi 1 / 2 /3 baris

Selamat mencoba
semoga bermanfaat..!
Terima kasih..!