Libya web إضافة ترجمة Googel بشكل جديد

في تدوينا جديدة نقدم لكم مترجم جوجل بشكل جديد واحترافي، فاائدة الاضافة ترجمة فورية للمدونتك بطريقة سهلة وبسيطة
وسوف تقوم بترجمة صفحة مدونتك الى اي لغة تختارها تابع الشرح .

معاينة

See the Pen LGzWjx by aseel (@aseel90) on CodePen.

طريقة التركيب:-

تخطيط وقم بإضافة اداة جيدة HTML/JavaScript وألصق الكود التالي بها




 <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:12px;

  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 10px;

}

#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="selected">English</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="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><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>

إضافة ترجمة Googel بشكل جديد

معاينة

طريقة التركيب:-

اذا واجهتك اي مشكلة باب التعليقات مفتوح .

شارك المقال