Cara Menambah Widget Google

Assalaamualaikum......
Kali ini saya akan share Cara Menambah Widget Google Transalate 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

Semoga bermanfaat
Wassalaamualaikum....