Membuat English Translator Untuk Blog

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

Baca juga: Cara Membuat Translator Bendera Di Blog 

Translator ini tidak membebani blog alasannya yakni menyerupai yang dikatakan oleh mas Taufik Nurrohman bahwa translator menyerupai ini tidak akan bereaksi dikala pertama kunjungan blog, namun akan bekerja dikala 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 menciptakan Google Translator ringan di blog sebelumnya lebih komplite, sedangkan yang ini aku hanya mengambil satu bahasa saja yaitu bahasa Inggris. Secara bahasa Inggris yakni bahasa internasional.

Sehingga dengan ini akan lebih gampang kalau kita satukan pada sajian header contohnya alasannya yakni ini hanya berupa link dengan penambahan instruksi css :before untuk tanda panahnya. Jika ada yang belum mengetahuinya dan tertarik untuk mencoba pada blognya, silahkan copy instruksi kode di bawah ini.

Tambahkan instruksi di bawah ini pada instruksi CSS untuk link di sajian 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;} 

Kaprikornus kalau disatukan dengan instruksi CSS sajian akan tampak menyerupai pola 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 instruksi di bawah ini pada instruksi html sajian 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 menyerupai pola 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 alasannya yakni translator ini sudah valid HTML5. Untuk pola demonya silahkan lihat pada sajian header blog ini. Selamat mencoba...

Sumber https://www.kompiajaib.com/

Share this post