Cara Memasang Translate Gambar Bendera di Blog

Sebenarnya cara memasang translate gambar bendera di blog pernah dibahas di blognya maskolis, tetapi saya belum valid CSS3, jadinya saya akan bagikan versi translate yang bergambar yang Valid CSS3.

Google translate memudahkan pengunjung yang bukan dari negara asal kita menerjemahkan tulisan-tulisan yang kita publish di blog, bisa juga translate gambar bendera di blog ini membuat blog kita tambah #keren.

Translate gambar bendera ini juga tidak kebanyakan code css, dengan tidak kebanyakan kode css, maka translate gambar bendera ini tidak akan terlalu berpengaruh terhadap loading blog anda.

Contoh penggunaan translate gambar bendera di blog seperti gambar berikut.

Keren bukan ?? hehehe. Kalau anda tertarik menerapkan translate gambar bendera seperti gambar diatas, anda bisa memasangnya dengan langkah sebagai berikut.

Cara Memasang Translate Gambar Bendera di Blog

Taruh code css dibawah ini sebelum kode ]></b:skin>

.mestiqui_translate img{opacity:1.0;;border:0;margin-right:10px}
.mestiqui_translate:hover img{opacity:0.30;border:0}
.mestiqui_translatextra:hover img{opacity:0.30;border:0}

Setelah anda simpan code css diatas, anda tinggal menuju Tata Letak > Tambahkan Gadget, lalu anda masukan kode berikut ini.

<a class="mestiqui_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en'); return false;"><img alt="English" height="32" src="http://3.bp.blogspot.com/-Ycv9oood74k/Und4ufO-KlI/AAAAAAAABjM/y6I5QWJoRHk/s1600/english.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="mestiqui_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;"><img alt="French" height="32" src="http://4.bp.blogspot.com/-dOzC_yApR7E/Und4viHrUZI/AAAAAAAABjo/lkToY2JGTZM/s1600/french.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="mestiqui_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cde&amp;hl=en'); return false;"><img alt="German" height="32" src=http://1.bp.blogspot.com/-JDygcXPlQL4/Und4vcBv4rI/AAAAAAAABjY/nICYffgMUtI/s1600/german.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="mestiqui_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ces&amp;hl=en'); return false;"><img alt="Spain" height="32" src="http://4.bp.blogspot.com/-QGtd9-zY18g/Und4w3RpfbI/AAAAAAAABj4/uVSUV9OShmQ/s1600/spain.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="mestiqui_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cru&amp;hl=en'); return false;"><img alt="Russian" height="32" src="http://4.bp.blogspot.com/-ItXKbqAUmwc/Und4wUGNynI/AAAAAAAABjw/Fmoc-3g0O38/s1600/russian.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="mestiqui_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cja&amp;hl=en'); return false;"><img alt="Japanese" height="32" src="http://3.bp.blogspot.com/-nQt-KZy6wCQ/Und5-dBOatI/AAAAAAAABkE/YTLRsdtM6zw/s1600/japanese.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="mestiqui_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Car&amp;hl=en'); return false;"><img alt="Arabic" height="32" src="http://4.bp.blogspot.com/-zYGQpXUnrIY/Und4umb-fGI/AAAAAAAABjI/x0ZS_TUDnuw/s1600/arabic.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="mestiqui_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en'); return false;"><img alt="Chinese Simplified" height="32" src="http://4.bp.blogspot.com/-Z4ZOVjaZUdE/Und5-wrYusI/AAAAAAAABkI/d-ZYd0Gsp-A/s1600/chinese.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

Lalu simpan Gadget.

Dengan cara mudah seperti diatas, anda telah berhasil memasang translate gambar bendera di blog, dan hanya itu saja pembahasan Cara Memasang Translate Gambar Bendera di Blog, semoga bermanfaat.

Tweet