Доброго времени суток, друзья. Платформа BLOGGER предоставила нам гаджет Translate (переводчик), что очень удобно для перевода содержания блога на другие языки. Но, выглядит он достаточно скромно.
Сегодня покажу вам, как можно его немного стилизовать, чтобы был хоть чуть - чуть интереснее и "не как у всех".
У нас будет красиво оформленная кнопка, при нажатии на которую откроются все языки Гугл предлагаемые для перевода содержания.
Демонстрация 
Сегодня покажу вам, как можно его немного стилизовать, чтобы был хоть чуть - чуть интереснее и "не как у всех".
У нас будет красиво оформленная кнопка, при нажатии на которую откроются все языки Гугл предлагаемые для перевода содержания.
<style>
.goog-te-gadget-simple .goog-te-menu-value span {
text-decoration: none;
color: #fff;
}
.goog-te-gadget-simple {
background-color: #436EEE !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: #C1CDC1 !important;
transition:all 0.8s;
}</style>
<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>
.goog-te-gadget-simple .goog-te-menu-value span {
text-decoration: none;
color: #fff;
}
.goog-te-gadget-simple {
background-color: #436EEE !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: #C1CDC1 !important;
transition:all 0.8s;
}</style>
<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>
Цвет самой кнопки #436EEE поменяйте на соответствующий дизайну блога. Можно использовать эту таблицу.
Чтобы кнопка располагалась по центру нужно заключить весь код в теги
<center>здесь полностью предложенный код </center>
Дополнение к статье
В комментариях прочитала, что не везде этот код работает. Проблема возникает и с родным переводчиком и виноват в этом один из кодов Javascript в шаблоне определённого блога. Поэтому предлагаю ещё один вариант (для нетерпеливых). Установила на этом блоге пока для наглядности - посмотрите.
Код для него
<center>
<style type="text/css">
#translator-wrapper {
display:block;
width:90%;
max-width:300px;
border:none;
background-color:#336633;
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:#666666;
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>
<style type="text/css">
#translator-wrapper {
display:block;
width:90%;
max-width:300px;
border:none;
background-color:#336633;
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:#666666;
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>
замените background-color:#336633;цвет кнопки
и цвет background-color:#666666; фона стрелки
Никаких сторонних ссылок нет, это тот же самый гаджет Переводчик от Гугл , но в другой красе, скажем так.
Возможно вас заинтересуют ещё варианты переводчика для блога.
Всех с праздником Победы!!! Всем добра и мира!!!
хотите оформить подписку на новые шпаргалки
Виктория, спасибо! если вставить этот код, то уже установленный гаджет надо убрать?
ОтветитьУдалитьА код - это то, что выделено зеленым цветом, или вся строка?
ОтветитьУдалитьСемён пока этот код, что - то работает не корректно и не везде. Подумаю.
УдалитьЯ, наверное, что-то не то сделала. Вставила гаджет в тестовый блог, но он не появился.
ОтветитьУдалитьИрина, очень интересно. У меня он тоже почему - то работает только на трёх тестовых. пока не пойму. Может с родным переводчиком что не так. Попробую позже.
УдалитьСпасибо, Вика! Буду ждать инструкций. Просто интересно, хотя и сложно.
ОтветитьУдалитьСемён ,можно поставить Вам пока родной блоггеровский гаджет переводчик. Схема та же - админпанель, раздел дизайн, добавить гаджет. Из предложенного списка выбираете переводчик и просто нажимаете добавить. Всё.
ОтветитьУдалитькож не работает
ОтветитьУдалитьЗАчем давать заведомо нерабочий контент?
ОтветитьУдалитьAlex, я в комментариях выше писала, что не на всех блогах он работает. Вы на тестовом у меня видели?
УдалитьДополнила статью и добавила ещё один.
У МЕНЯ РАБОТАЕТ!!! СПАСИБО ВИКА!
ОтветитьУдалитьРаботает, ага. Спасибо тебе за размещение кнопки шпаргалок.
ОтветитьУдалитьСколько у вас полезностей есть на блоге :) Заменил, по второму коду, все нормально. Спасибо.
ОтветитьУдалитьOmarSK, да, с первым перебои бывают, но не на всех блогах.
ОтветитьУдалить