Media informasi Entertainment, Tutorial Blogger, Blogger Template, Fakta Unik, Teknologi, And More

Search This Blog

Cara Memasang Translate dengan Gambar Bendera di Blog

Key Translate
Cara Memasang Translate dengan Gambar Bendera di Blog - Sebenarnya cara memasang translate gambar bendera di blog pernah dibahas di blognya maskolis, tetapi belum valid CSS3, jadinya saya akan membagikan versi translate yang bergambar dan Valid CSS3.

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

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.


Contoh translate bendera

Bagaimana sobat tertarik ?, langsung saja kita ke tahap cara memasang Translate dengan Gambar Bendera ini.

Cara Memasang Translate dengan Gambar Bendera di Blog

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

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

Setelah sobat memasang CSS diatas tadi pada template sobat, tinggal sobat pergi ke Tata Letak » Add Gadget » HTML/JavaScript » Lalu masukkan script dibawah ini

<a class="fajriandaviar_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="fajriandaviar_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="fajriandaviar_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="fajriandaviar_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="fajriandaviar_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="fajriandaviar_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="fajriandaviar_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="fajriandaviar_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.

Mudah bukan sobat, usai sudah artikel saya ini, maaf apabila ada salah kata, Wassalam.
Ditulis oleh: Pada :
Label : Tutorial Blogger, Widget

Post a Comment