Дизайн гаджета 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 :