Переводчик для сайта - блога

Установить стильный переводчик для сайта - блога.

День добрый друзья. Понедельник день нелегкий по-этому сегодня я расскажу вам о том, как можно легко и просто установить на свой сайт - блог, виджет переводчик от гугла. Вообще это можно сделать через раздел Дизайн - добавить гаджет и в появившемся списке выбрать виджет Переводчик. Тогда на вашем веб-ресурсе появится обычный переводчик. Если же вы хотите более стильный, виджет переводчика, тогда вам нужно все через тот же раздел Дизайн - Добавить гаджет, в списке выбираем HTML\Javascript и в появившемся окошке вставляете следующий код:

HTML<center>
<style type="text/css">
#translator-wrapper {
  display:block;
  width:90%;
  max-width:300px;  
  border:none;  
  background-color:#333;
  color:#fff;
  overflow:hidden;
  position:relative;
  height:40px;
  line-height:40px;
  border-radius:4px;
}

#translator-wrapper:hover {color:#fff;}

#translator-wrapper select:hover {color:#fff;}
#translator-wrapper select {
  border:none;
  background:transparent;
  font-family:'Verdana',Arial,Sans-Serif;
  font-size:15px;
  width:100%;
  color:#fff;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:0px 10px;
}
#translator-wrapper a {
  display:block;
  background-color:#ff3d00;
  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 = "ru"; // Язык вашего сайта
                var anchor = document.getElementById('translate-me');
                anchor.onclick = function () {
                    var selectedLang = document.getElementById('translate-language').value;
                    window.open('https://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + selectedLang + '&hl=' + selectedLang);
                    return false;
                };
            })();
        </script>
</center>

Сохраняете виджет и проверяете, что вышло в итоге.

В общем оказалось, что наш переводчик не совсем идеален, переводит не все элементы сайта, но текст в постах переводит в полном объеме. По-этому я решил добавить еще один переводчик. Я взял стандартный переводчик гугла (google) и немного подкрутил его внешний вид. Теперь проблем с переводом сайта не возникнет, но в некоторых шаблонах из-за конфликта кодов, в постах при нажатии на картинки они могут не открыться и это касается только браузера Google Chrome в остальных порядок. Эта проблема может возникнуть даже, если вы добавите обычный переводчик через раздел Дизайн - Добавить гаджет. Виноват в этом один из кодов Javascript вашего шаблона. Чтобы картинки вновь открывались в браузере Google Chrome нужно перейти в раздел Настройки - Сообщения и комментарии - напротив надписи:  Показывать изображения в Lightbox? - вместо Да выбираем Нет. 

Посмотреть, как выглядит новый вариант кнопки переводчика можно на тестовом сайте. Находится она вверху, с правой стороны. Установить сие чудо можно в любом месте вашего сайта или блога. Для этого переходим в раздел Шаблон - Изменить HTML ищем код 
]]></b:skin> перед ним устанавливаем код:

CSS .goog-te-gadget-simple .VIpgJd-ZVi9od-xl07Ob-lTBxed span { text-decoration: none; color: #fff!important; margin-left: 5px; } .goog-te-gadget-simple { background-color: #333 !important; border-left: 0px solid #d5d5d5 !important; border-top: 0px solid #9b9b9b !important; border-bottom: 0px solid #e8e8e8 !important; border-right: 0px solid #d5d5d5 !important; font-size: 15pt!important; display: inline-block; padding-top: 1px; padding-bottom: 2px; cursor: pointer; zoom: 1; margin-top: 10px !important; border-radius: 4px; margin-right: -13px !important; padding: 10px!important; } .goog-te-gadget img { vertical-align: middle; border: none; display: none !important; } .goog-te-gadget-simple .goog-te-menu-value span { text-decoration: none; margin-right: 5px !important; color:#fff !important; } .goog-te-gadget-simple:hover { background: #ff3d00 !important; transition:all 0.8s; } 

Сохраняем шаблон, переходим в раздел Дизайн - Добавить гаджет - HTML\Javascript - в окошке вставляем следующий код:

JS<div id='google_translate_element'/><script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({pageLanguage: 'ru', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
        }
    </script><script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' type='text/javascript'/></script></div>

Сохраняете виджет и теперь можете переводит кучу текстов своего сайта или блога.

Mark Korvin января 30, 2024 2 Коммент.

Поделиться в социальных сетях:

Facebook X Vkontakte

Рекомендуем