اضافة ترجمة جوجل translate في مدونات بلوجر

في هذا التدوينة نقدم لكم اضافة رائعة ويبحث عنها الكثير وهي ترجمة google في مدونات بلوجر.

ووظيفة هذا الاداة انها تقوم بترجمة صفحتك لأكثر من 100 لغة ،وسوف تساعدك على بقاء الزوار من دول متعددة على البقاء في مدونتك.

الشرح:

أذهب إلى التخطيط وقم بإضافة اداة جيدة 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>