Membuat Google Translate dengan Pin

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Membuat Google Translate dengan Pin. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

demo

Google Translate dengan Pin
Google Translate dengan Pin saat Hover

1. Masuk ke Blogger anda
2. Klik Rancangan, kemudian Edit HTML
3. Pada Edit HTML, centang Expand Template Widget
   Expand Template Widget
4. Kemudian copy kode dibawah ini

.translate img {
filter:alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
padding-left:10px;
cursor: pointer;
margin-right:8px;
width:24px;
}
.translate:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
border:0;
}

5. Selanjutnya paste di atas kode

</b:skin>

6. Klik Simpan
7. Setelah di saimpan, masuk ke Elemen Laman
8. Klik Tambah Gadget
9. Pilih HTML/Javascript
10. Copy kode di bawah ini, dan paste-kan pada kotat kontent

<a class="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" title="English" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_uk-flag.png"/></a>

<a class="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" title="French" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_france-flag.png"/></a>

<a class="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" title="German" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_german-flag.png"/></a>

<a class="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" title="Spain" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_spain-flag.png"/></a>

<a class="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" title="Italian" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_italy-flag.png"/></a>

<a class="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" title="Dutch" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_dutch-flag.png"/></a>

<a class="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" title="Russian" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_russian-flag.png"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" title="Brazilian" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_brazil-flag.png"/></a>

<a class="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" title="Japanese" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_japan-flag.png"/></a>

<a class="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" title="Korean" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_korean-flag.png"/></a>

<a class="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" title="Arabic" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_arab-flag.png"/></a>

<a class="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" title="Chinese Simplified" src="http://i766.photobucket.com/albums/xx310/Ikhfar/th_china-flag.png"/></a>

11. Simpan

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait