Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Membuat English Translator Untuk Blog

Ini adalah penyederhanaan dari translator bendera yang hanya diambil untuk English translatornya saja dan mengganti gambar bendera dengan kata.

Baca juga:

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.


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.


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...

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar