اضافة اداة الترجمة لموقعك google translator to website

ادا كنت تمتلك موقع الكتروني او مدونة على الانترنت فأنت تبحث عن زيارات لموقعك من جميع انحاء العالم. 

لاكن مايجب ان تعرفه او ان لغة الموقع تلعب دور مهم فمثلا اللغة العربية فأنت تضمن ان الزوار من العالم العربي سيفهمون  ماكتبته لأنهم يفهمون الغة العربية أصلا.

اما الزائر الاجنبي فيجب أن يكون دارس اللغة العربية أو يعمل ترجمة لموضوعك لكي يفهمه بلغته.

وهذا ماسنتعرف عليه اليوم  اضافة ستجعل زائر موقعك يترجم التدوينة الى اي لغة وبذالك تضمن زيارات اجنبية لموقعك وكلنا يعرف ارباح ادسنس من النقرات والزيارات الاجنبية فهي مرتفعة .

اضافة سكربت من غوغل google مكون من اكثر من 75 لغة عالمية لترجمة موقعك ابتداء من الانجليزية وحتي جميع لغات العالم English,French,Italy,Spanish…

ترجمة فورية من  جوجل هذه اضافة بسيطة تحتوي علي اكثر من 67 لغة عالمية مثل ترجمة للعربية-الهندية-الانجليزية-الالمانية...جميع لغات العالم بسكربت بسيط جدا.

الان سنشرح الطريقة وهي كالتالي 

أنسخ هذا الكود html

<style type="text/css">

#translator-wrapper {

  display:block;

  width:90%;

  max-width:300px; 

  border:none; 

  background-color:#fff;

  color:#444;

  overflow:hidden;

  position:relative;

  height:40px;

  line-height:40px;

  border:1px solid #e0e0e0;

}

#translator-wrapper select {

  border:none;

  background:transparent;

  font-family:'Verdana',Arial,Sans-Serif;

  font-size:15px;

  width:100%;

  color:#444;

  -webkit-box-sizing:border-box;

  -moz-box-sizing:border-box;

  box-sizing:border-box;

  -webkit-appearance:none;

  cursor:text;

  padding:5px 85px;

}

#translator-wrapper a,

#translator-wrapper a:hover {

  display:block;

  background-color:#4791d2;

  border:none;

  color:#fff;

  margin:0 0;

  text-decoration:none;

  position:absolute;

  top:0;

  right:0;

  bottom:0;

  cursor:pointer;

  width:14%;

  transition:all 0.3s ease; 

}

#translator-wrapper a:before {

  content:"";

  display:block;

  width:0;

  height:0;

  border:6px solid transparent;

  border-left-color:white;

  position:absolute;

  top:50%;

  left:45%;

  margin-top:-5px;

}

#translator-wrapper a:hover {opacity:0.9;}

#translator-wrapper a:active {opacity:0.9;}

#translator-wrapper select:focus,

#translator-wrapper a:focus,

#translator-wrapper select:active,

#translator-wrapper a:active {

  border:none;

  outline:none;

  cursor:pointer;

}

option {

  background:#444;

  color:#e0e0e0;

}

</style>

<div id="translator-wrapper">

    <select id="translate-language">

        <option value="en" selected />English

        <option value="id" />Indonesian

        <option value="af" />Afrikaans

        <option value="sq" />Albanian

        <option value="ar" />Arabic

        <option value="hy" />Armenian

        <option value="az" />Azerbaijani

        <option value="eu" />Basque

        <option value="be" />Belarusian

        <option value="bn" />Bengali

        <option value="bg" />Bulgarian

        <option value="ca" />Catalan

        <option value="zh-CN" />Chinese

        <option value="hr" />Croatian

        <option value="cs" />Czech

        <option value="da" />Danish

        <option value="nl" />Dutch

        <option value="en" />English

        <option value="eo" />Esperanto

        <option value="et" />Estonian

        <option value="tl" />Filipino

        <option value="fi" />Finnish

        <option value="fr" />French

        <option value="gl" />Galician

        <option value="ka" />Georgian

        <option value="de" />German

        <option value="el" />Greek

        <option value="gu" />Gujarati

        <option value="ht" />Haitian Creole

        <option value="iw" />Hebrew

        <option value="hi" />Hindi

        <option value="hu" />Hungarian

        <option value="is" />Icelandic

        <option value="id" />Indonesian

        <option value="ga" />Irish

        <option value="it" />Italian

        <option value="ja" />Japanese

        <option value="kn" />Kannada

        <option value="ko" />Korean

        <option value="la" />Latin

        <option value="lv" />Latvian

        <option value="lt" />Lithuanian

        <option value="mk" />Macedonian

        <option value="ms" />Malay

        <option value="mt" />Maltese

        <option value="no" />Norwegian

        <option value="fa" />Persian

        <option value="pl" />Polish

        <option value="pt" />Portuguese

        <option value="ro" />Romanian

        <option value="ru" />Russian

        <option value="sr" />Serbian

        <option value="sk" />Slovak

        <option value="sl" />Slovenian

        <option value="es" />Spanish

        <option value="sw" />Swahili

        <option value="sv" />Swedish

        <option value="ta" />Tamil

        <option value="te" />Telugu

        <option value="th" />Thai

        <option value="tr" />Turkish

        <option value="uk" />Ukrainian

        <option value="ur" />Urdu

        <option value="vi" />Vietnamese

        <option value="cy" />Welsh

        <option value="yi" />Yiddish

    </select><a id="translate-me" href="#" title="Translate"></a>

</div>

<script type="text/javascript">

(function() {

    var mylang = "ar", // Your website language

        anchor = document.getElementById('translate-me');

    anchor.onclick = function() {

        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');

        return false;

    };

})();

</script>

بعد ذالك إتبع الشرح كما في الصورة 

jl

hfنعمل إضافة أداة جافا سكريبت html

  الان سيظهر الشكل كالاتي بعد تشغيل الصفحة

ترجمة 2-      سهولة الاضغط علي زر اختر لغة وسوف يظهر الشاشة الكاملة لجميع اللغات الاتية

بقلم لغافي lr1info

مدون مهتم بمجال المعلوماتية من برمجة وتصميم على الفوطوشوب من المغرب مدينة كلميم من مواليد 1991