Sebenarnya
tutorial mengenai cara membuat Translate dengan gambar pada blog sudah
banyak bertebaran di internet tapi tidak ada salahnya jika mempermudah para
pembaca semua. Menurut penelusuran yang Saya lakukan ternyata masi banyak kode
script yang tidak berjalan secara sempurna di sebagian website yang menjelaskan
mengenai tutorial ini. Tapi saudara-saudara tidak perlu khawatir mengenai
script yang akan saya berikan karena telah teruji di website yang saya pake ini.
Oh iya, perlu diketahui bahwa Translate dengan Gambar Bendera ini lebih rapi. Penasaran, langsung ja yuk KTP. nich penampakannya.
1. Seperti biasa bukalah Akun Blog anda kawan.
2. Masuklah ke Rancangan / Design Blog anda.
3. Pilihlah Add Widget / Tambah Gadget pada rancangan.
4. Pilih lagi Add HTML/JavaScript
5. Copy Script berikut di bawah ini.
<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" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;" title="English" rel="nofollow" target="_blank" href="#">
<img width="24" height="32" style="cursor: pointer;margin-right:10px" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800" alt="English" />
</a>
<a class="google_translate" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;" title="French" rel="nofollow" target="_blank" href="#">
<img width="24" height="32" style="cursor: pointer;margin-right:10px" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" alt="French" />
</a>
<a class="google_translate" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;" title="German" rel="nofollow" target="_blank" href="#">
<img width="24" height="32" style="cursor: pointer;margin-right:10px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMvWc2ME6iv4YtBnrL6kYyXiXTN0MxP-z1UF9O8aqSRMBZIXk-IFQJq7ZAz4wwbWz44jn2J0AOhZv4Zw1ou_YwTG0z7EGgt4Zbj_Zw9fsf4KEsAl5bYD6eNCVpw9ubVxxkVwsJcjcQT1DK/?imgmax=800" alt="German" />
</a>
<a class="google_translate" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;" title="Spain" rel="nofollow" target="_blank" href="#">
<img width="24" height="32" style="cursor: pointer;margin-right:10px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP5ApWNm29-2Tqqpl0JSTIwcgVxUI_oZ4ncZ3L4lYY_SKiFs-fiAnr0UjL7c77EPuIw55XbDRiXFMX1954TZ0aukICBqNwo3MFIem6DU74WKi9FzLWH8Qocafa76JRgogZnoFJqhMH6lRW/?imgmax=800" alt="Spain" />
</a>
<a class="google_translate" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;" title="Russian" rel="nofollow" target="_blank" href="#">
<img width="24" height="32" style="cursor: pointer;margin-right:10px" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" alt="Russian" />
</a>
<a class="google_translate" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;" title="Japanese" rel="nofollow" target="_blank" href="#">
<img width="24" height="32" style="cursor: pointer;margin-right:10px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhst474fbhRfJM3UYWauQFlaQbwnY-NuX4b2_MQhSuMFmQ3SJullteurfqFo0kA1pNMH31nILya4t-L-HxhoHocgbBIjRffbYaO8WPeDdbNqqgOzt10SMNqO0lEnNe_JEeb3tOmbbcPhvSn/?imgmax=800" alt="Japanese" />
</a>
<a class="google_translate" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;" title="Arabic" rel="nofollow" target="_blank" href="#">
<img width="24" height="32" style="cursor: pointer;margin-right:10px" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" alt="Arabic" />
</a>
<a class="google_translate" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;" title="Chinese Simplified" rel="nofollow" target="_blank" href="#">
<img width="24" height="32" style="cursor: pointer;margin-right:10px" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" alt="Chinese Simplified" />
</a>
</div>
6. Kemudian Save Templatenya...
Selamat sekarang anda sudah mempunyai tampilan Translate dengan gambar pada blog dengan hiasan bendera yang terlihat rapi dan lebih menawan. ThankZzzz..
