Widget Google Translate NextWapBlog
Ilustrasi Translator tools images by Google Inc

Widget Google Translate NextWapBlog - Tutorial yang berbeda dari biasanya, kali ini akan membahas tentang widget terjemahan untuk blog NextWapBlog. Kita akan memanfaatkan sumber daya google yang notabene memiliki fitur yang instan dan gratis tentunya.

Baiklah, pertama kita buat dulu sintaks html tagnya menggunakan select tag dan option, lihat pada sintaks highlighter dibawah :



  <div id="translator-wrapper">
     <select id="translate-language">
  <option value="en" selected="selected">English</option>
  <option value="id">Bahasa Indonesia</option>
  <option value="af">Afrikaans</option>
  <option value="sq">Albanian</option>
  <option value="ar">Arabic</option>
  <option value="hy">Armenian</option>
  <option value="az">Azerbaijani</option>
  <option value="eu">Basque</option>
  <option value="be">Belarusian</option>
  <option value="bn">Bengali</option>
  <option value="bg">Bulgarian</option>
  <option value="ca">Catalan</option>
  <option value="zh-CN">Chinese</option>
  <option value="hr">Croatian</option>
  <option value="cs">Czech</option>
  <option value="da">Danish</option>
  <option value="nl">Dutch</option>
  <option value="en">English</option>
  <option value="eo">Esperanto</option>
  <option value="et">Estonian</option>
  <option value="tl">Filipino</option>
  <option value="fi">Finnish</option>
  <option value="fr">French</option>
  <option value="gl">Galician</option>
  <option value="ka">Georgian</option>
  <option value="de">German</option>
  <option value="el">Greek</option>
  <option value="gu">Gujarati</option>
  <option value="ht">Haitian Creole</option>
  <option value="iw">Hebrew</option>
  <option value="hi">Hindi</option>
  <option value="hu">Hungarian</option>
  <option value="is">Icelandic</option>
  <option value="id">Indonesian</option>
  <option value="ga">Irish</option>
  <option value="it">Italian</option>
  <option value="ja">Japanese</option>
  <option value="kn">Kannada</option>
  <option value="ko">Korean</option>
  <option value="la">Latin</option>
  <option value="lv">Latvian</option>
  <option value="lt">Lithuanian</option>
  <option value="mk">Macedonian</option>
  <option value="ms">Malay</option>
  <option value="mt">Maltese</option>
  <option value="no">Norwegian</option>
  <option value="fa">Persian</option>
  <option value="pl">Polish</option>
  <option value="pt">Portuguese</option>
  <option value="ro">Romanian</option>
  <option value="ru">Russian</option>
  <option value="sr">Serbian</option>
  <option value="sk">Slovak</option>
  <option value="sl">Slovenian</option>
  <option value="es">Spanish</option>
  <option value="sw">Swahili</option>
  <option value="sv">Swedish</option>
  <option value="ta">Tamil</option>
  <option value="te">Telugu</option>
  <option value="th">Thai</option>
  <option value="tr">Turkish</option>
  <option value="uk">Ukrainian</option>
  <option value="ur">Urdu</option>
  <option value="vi">Vietnamese</option>
  <option value="cy">Welsh</option>
  <option value="yi">Yiddish</option>
        </select>
    </div>
</div>




Sedikit informasi untuk anda sesuaikan atribut selected="selected" diatas dengan bahasa yang blog anda gunakan. Silahkan anda pasang pada navigasi blog anda. Jika sudah kita lanjutkan membuat CSS nya :


#translator-wrapper {
    display: block;
    background-color: #fff;
    color: #313131;
    overflow: hidden;
    position: relative;
    margin-top: 15px;
}

#translator-wrapper select {
    border: 1px solid #bdbdbd;
    background: transparent;
    width: 100%;
    color: #616161;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    cursor: text;
    padding: 5px 0;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

#translator-wrapper select option {
    background: #313131;
    color: #e0e0e0;
} 





Silahkan anda paste kan pada bagian bawah CSS editor itupun jika anda menggunakan template bawaan yang notabene memakai CSS Editorial NextWapBlog, kemudian simpan. Kita lanjut mengimplementasikan sintaks HTML yang tadi kita buat dengan jQuery agar dapat menterjemahkan halaman blog kita dengan baik saat kita memilih bahasa mana yang akan diterjemahkan.

JQuery


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" async></script>
<script type="text/javascript">
  $('#translate-language').change(function(){
          var mylang = "id";
          var langDetect = $('#translate-language').val();
          window.open('https://translate.google.co.id/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + langDetect + '&hl=en');
          return false;
  });
</script>


Silahkan ganti teks berwarna merah diatas sesuai kode iso bahasa blog yang anda gunakan misalkan "id" untuk Bahasa Indonesia "en-US" untuk Bahasa Inggris-Amerika "in" untuk India atau anda dapat melihat halaman Wikipedia untuk daftar kode ISO Bahasa ISO 3166-1. Anda dapat menempelkan sintaks jQuery diatas di header.html diantara tag head

Photo p
Profile of Eza dwi anandharikyEza Dwi Anandharizky

"Malapetaka yang paling besar tidak lain adalah perasaan yang tidak pernah puas. Kekeliruan yang paling besar tidak lain karena ingin mendapatkan sesuatu. Oleh karena itu, ia yang merasa puas dengan keadaan yang memuaskan akan selamanya menikmati kepuasan"

Eza Dwi Ananadharizky February 03, 2018