Установить стильный переводчик для сайта - блога.
День добрый друзья. Понедельник день нелегкий по-этому сегодня я расскажу вам о том, как можно легко и просто установить на свой сайт - блог, виджет переводчик от гугла. Вообще это можно сделать через раздел Дизайн - добавить гаджет и в появившемся списке выбрать виджет Переводчик. Тогда на вашем веб-ресурсе появится обычный переводчик. Если же вы хотите более стильный, виджет переводчика, тогда вам нужно все через тот же раздел Дизайн - Добавить гаджет, в списке выбираем HTML\Javascript и в появившемся окошке вставляете следующий код:<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:12px;
width:100%;
color:#fff;
-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 {
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", // 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>
</center>
Сохраняете виджет и проверяете, что вышло в итоге.
В общем оказалось, что наш переводчик не совсем идеален, переводит не все элементы сайта, но текст в постах переводит в полном объеме. По-этому я решил добавить еще один переводчик. Я взял стандартный переводчик гугла (google) и немного подкрутил его внешний вид. Теперь проблем с переводом сайта не возникнет, но в некоторых шаблонах из-за конфликта кодов, в постах при нажатии на картинки они могут не открыться и это касается только браузера Google Chrome в остальных порядок. Эта проблема может возникнуть даже, если вы добавите обычный переводчик через раздел Дизайн - Добавить гаджет. Виноват в этом один из кодов Javascript вашего шаблона. Чтобы картинки вновь открывались в браузере Google Chrome нужно перейти в раздел Настройки - Сообщения и комментарии - напротив надписи: Показывать изображения в Lightbox? - вместо Да выбираем Нет.
Посмотреть, как выглядит новый вариант кнопки переводчика можно на тестовом сайте. Находится она вверху, с правой стороны. Установить сие чудо можно в любом месте вашего сайта или блога. Для этого переходим в раздел Шаблон - Изменить HTML ищем код
]]></b:skin> перед ним устанавливаем код:
.goog-te-gadget-simple .goog-te-menu-value span {
text-decoration: none;
color: #fff;
}
.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: 10pt;
display: inline-block;
padding-top: 1px;
padding-bottom: 2px;
cursor: pointer;
zoom: 1;
margin-top: 10px !important;
border-radius: 4px;
margin-right: -13px !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 - в окошке вставляем следующий код:
<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'/>Сохраняете виджет и теперь можете переводит кучу текстов своего сайта или блога.