اظافة اداة الترجمة الى مدونة بلوجر

 

كيفية اظافة اداة الترجمة الى موقع او مدونة بلوجر

 

اليوم موضوعنا وهو عن الكود الخاص بإظهار قائمة منسدلة بعدة لغات تظهر 

على الشريط الأيسر للموقع يمكن للزائر بضغطة عن طريق الفأرة او في الهاتف ايضا ان يقوم بالضغط على اللغة ثم اختيار اللغة التي تساعده ضمن اللغات المتوفرة وعند قيامه بالضغط على اللغه المختاره فانه سيتوجه او ستنبثق له نافذة جديدة تحتوي على ترجمة جوجل لموقعك باللغة المختارة مع بقاء الصفحة الاصلية مفتوحة ويمكنه بعد ذلك في الصفحة الجديدة المنبثقة داخل المتصفح ان يقوم بتحديد اللغة التي يريدها مثلا الانجليزية الفرنسية وغيرها 

 وستتغير لغة الموقع طبقا للغة المختارة داخل النافذة الجديدة اما عن طريق اضافة هذه الاداة فهي سهله جدا ولا تحتاج لاي شرح كثير

 اللغات المتوفرة في هذه الأداة أو أداة ترجمة الموقع او مدونات  بلوجر هي كثيرة جدا وتشمل أهم اللغات المستعملة وهي:

English Indonesian Afrikaans Albanian Arabic Armenian Azerbaijani Basque Belarusian Bengali Bulgarian Catalan Chinese Croatian Czech Danish Dutch English Esperanto Estonian Filipino Finnish French Galician Georgian German Greek Gujarati  Haitian Creole  Hebrew Hindi Hungarian Icelandic Indonesian Irish Italian Japanese Kannada Korean Latin Latvian Lithuanian Macedonian Malay Maltese Norwegian Persian Polish Portuguese Romanian Russian Serbian SloTelugvak Slovenian Spanish Swahili Swedish Tamil u Thai Turkish Ukrainian Urdu Vietnamese Welsh Yiddish

كيفية إظافة أداة الترجمة الى موقع او مدونة  بلوجر وذلك باتباع الخطوات البسيطة التالية:

1- نقوم بالذهاب الى منصة بلوجر

2- ثم نقوم بإختيار أو الذهاب الى التنسيق او التخطيط كما يسمى سابقا 

3- ثم نختار المكان الذي سنضيف فيه الاداة ويفضل الشريط الجانبي

4- نضغط على اضافة أداة جديدة 

5- وعندما تظهر لنا قائمة بالادوات المتوفرة نختار اضافة اداة جافا سكريبت 

6- ثم نقوم بإضافه الكود الذي بالأسفل داخل المكان المخصص له ضمن الاداة

7- نضغط على حفظ الاداة

8- نقوم بحفظ التغيرات للقالب او التنسيق 

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