Membuat English Translator Untuk Blog

Sebenarnya ini adalah penyederhanaan dari translator bendera yang sebelumnya sudah saya share yang hanya saya ambil untuk English translatornya dan mengganti gambar bendera dengan kata.

Baca juga: Cara Membuat Translator Bendera Di Blog 

Translator ini tidak membebani blog karena seperti yang dikatakan oleh mas Taufik Nurrohman bahwa translator seperti ini tidak akan bereaksi ketika pertama kunjungan blog, namun akan bekerja ketika ada perintah (ketika di klik). Cara kerja translator ini juga sama dengan Google Translator ringan pada postingan yang lalu.

Baca juga: Membuat Google Translator Ringan Di Blog

Hanya bedanya pada cara membuat Google Translator ringan di blog sebelumnya lebih komplite, sedangkan yang ini saya hanya mengambil satu bahasa saja yaitu bahasa Inggris. Secara bahasa Inggris adalah bahasa internasional.

Sehingga dengan ini akan lebih mudah jika kita satukan pada menu header misalnya karena ini hanya berupa link dengan penambahan kode css :before untuk tanda panahnya. Jika ada yang belum mengetahuinya dan tertarik untuk mencoba pada blognya, silahkan copy kode kode di bawah ini.

Tambahkan kode di bawah ini pada kode CSS untuk link di menu header.

.google-translator:before{content:"";display:block;width:0;height:0;border-style:solid;border-color:transparent transparent transparent #333;float:right;border-width:5px 0 5px 8px;margin:3px 0 0 5px;}

Jadi jika disatukan dengan kode CSS menu akan tampak seperti contoh di bawah ini.

#menu a.google-translator:before{content:"";display:block;width:0;height:0;border-style:solid;border-color:transparent transparent transparent #333;float:right;border-width:5px 0 5px 8px;margin:3px 0 0 5px;}

Dan untuk mengaplikasikan pada menunya, silahkan tambahkan kode di bawah ini pada kode html menu yang telah ada.

<a class='google-translator' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a>

Sehingga pada html menunya akan tampak seperti contoh di bawah ini.

<div id='top-menu'>

<div id='menubar'>

<ul id='menu'>

<li><a href='/' target='_blank' title='Menu1'>Menu1</a></li>

<li><a href='/' target='_blank' title='Menu2'>Menu2</a></li>

<li><a class='trigger' href='/' title='More Menu3'>More Menu3</a>

<ul>

<li><a href='/' target='_blank' title='Sub1 More Menu3'>Sub1 More Menu3</a></li>

<li><a href='/' target='_blank' title='Sub2 More Menu3'>Sub2 More Menu3</a></li>

</ul></li>

<li><a class='google-translator' href='#' 
onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;);
 return false;' rel='nofollow' target='_blank' 
title='English'>Translate</a></li>

</ul>

</div>

</div>

Nah jangan khawatir untuk validasi HTML5 karena translator ini sudah valid HTML5. Untuk contoh demonya silahkan lihat pada menu header blog ini. Selamat mencoba...