Дизайн гаджета Translate для Blogger

Доброго времени суток, друзья. Платформа BLOGGER предоставила нам гаджет Translate (переводчик), что очень удобно для перевода содержания блога на другие языки. Но, выглядит он достаточно скромно.



гаджет переводчик

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

У нас будет красиво оформленная кнопка, при нажатии на которую откроются все языки Гугл предлагаемые для перевода содержания.


Демонстрация 

Делать не нужно абсолютно ничего, просто скопируйте предложенный ниже код и установите его в гаджет HTML/LavaScript на желаемое место в вашем блоге.

<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: &#39;ru&#39;, layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, &#39;google_translate_element&#39;);
}
</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>


замените background-color:#336633;цвет кнопки
и цвет background-color:#666666; фона стрелки


Никаких сторонних ссылок нет, это тот же самый гаджет Переводчик от Гугл , но в другой красе, скажем так.

Возможно вас заинтересуют ещё варианты переводчика для блога.

Всех с праздником Победы!!!  Всем добра и мира!!!

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

10 комментариев:

  1. Виктория, спасибо! если вставить этот код, то уже установленный гаджет надо убрать?

    ОтветитьУдалить
  2. А код - это то, что выделено зеленым цветом, или вся строка?

    ОтветитьУдалить
    Ответы
    1. Семён пока этот код, что - то работает не корректно и не везде. Подумаю.

      Удалить
  3. Я, наверное, что-то не то сделала. Вставила гаджет в тестовый блог, но он не появился.

    ОтветитьУдалить
    Ответы
    1. Ирина, очень интересно. У меня он тоже почему - то работает только на трёх тестовых. пока не пойму. Может с родным переводчиком что не так. Попробую позже.

      Удалить
  4. Спасибо, Вика! Буду ждать инструкций. Просто интересно, хотя и сложно.

    ОтветитьУдалить
  5. Семён ,можно поставить Вам пока родной блоггеровский гаджет переводчик. Схема та же - админпанель, раздел дизайн, добавить гаджет. Из предложенного списка выбираете переводчик и просто нажимаете добавить. Всё.

    ОтветитьУдалить
  6. ЗАчем давать заведомо нерабочий контент?

    ОтветитьУдалить
    Ответы
    1. Alex, я в комментариях выше писала, что не на всех блогах он работает. Вы на тестовом у меня видели?
      Дополнила статью и добавила ещё один.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск