Translator bentuk icon negara

Melanjutkan postingan sebelumnya tentang translate website atau blog, dimana sebelumnya terdapat menu pilihan (dropdown menu) ketika kita memilih bahasa. Nah, kali ini saya kan memperlihatkan code yang akan membuat translate website kita menjadi lebih menarik, yaitu dengan menampilkan gambar bendera masing masing Negara.

Code di bawah ini sangat bisa Anda edit, tenang saja saya akan membuka sedikit rahasia supaya Anda jadi pinter juga. Perhatikan code di bawah ini :

<style>

.translate img {

filter:alpha(opacity=100);

-moz-opacity: 1.0; opacity: 1.0; border:0; padding-left:0px;

}

.translate:hover img {

filter:alpha(opacity=50);

-moz-opacity: 0.50; opacity: 0.50; border:0;

}

</style>

<div style="text-align:center">

<a class="translate" href="#" target="_self" 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="24" src="http://www.printableworldflags.com/icon-flags/24/United%20Kingdom.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<!-- Paste kode disini -->

</div>

Kelihatanya memang rumit sekali, tapi Anda tidak perlu pusing-pusing. Perhatikan tulisan yang saya beri warna merah dan hijau. Nah, disitulah inti dari kode ini. Pada tulisan yang berwarna merah, yang pertama “en” adalah kode bahasa, berikut saya tuliskan beberapa kodenya :

en = inggris es = spanyol fr = perancis de = jerman it = itali nl = belanda

ru = rusia pt = brazil ja = jepang ko = korea ar = arab czh-cn = china

th = Thailand

dll, anda bisa mencarinya sendiri dengan melihat alamat url di browser setelah mengKlik icon bendera di blog ini. Dalam kode tersebut anda tinggal mengganti kode “en” menjadi salah 1 dari kode yang sudah saya tuliskan. Dan jangan lupa mengubah warna merah yang lain sesuai bahasanya.

Tulisan hijau adalah kode dimana gambar bendera berada. Anda bisa menemukan bendera yang anda inginkan disini (http://www.printableworldflags.com/flag-icon) dan kemudian tinggal klik kanan pada bendera yang anda inginkan, kemudian pilih “copy image link / salin tautan gambar” lalu paste di tulisan hijau. Inget!!sesuai benderanya yha... Kan gak lucu kalau kita klik bendera amerika malah ter-translate menjadi bahasa Arab,hehehe.

Anda tinggal memperbanyak kode tersebut dengan kopi mulai dari <a class….. sampai ….</a> dan paste pada tempat yang telah disediakan (<!-- Paste kode disini -->), dan jangan lupa ganti bahasa dan benderanya yha. Lalu kopi kode Anda kedalam blogspot /wp dengan menambah gadget/widget berupa html/javascript untuk blogspot. Bagi pengguna wordpress, yang menginduk ke wordpress.com di sarankan engupgrade menjadi PRO, karena kalau yang gratisan tidak tersedia layanan untuk kode CSS dan Javascript.

Jika Anda ingin mencoba tidak ke blog dahulu juga bisa, Tinggal coPas kode ke notepad lalu save dengan ekstensi .html lalu buka file dengan Mozilla/browser.Ok, sekian dulu dari saya. Selamat mencoba!!

NB: tampilan bendera akan horizontal, jika anda ingin membuat menjadi beberapa baris, tambahkan kode <br> setelah kode </a> untuk membuatnya turun tanpa spasi , atau kode <p> jika ingin ada spasi antar bendera atas dengan bawah

Posted in: Blogging, internet