Как установить Google Переводчик на свой блог? : Как добавить функцию перевода на Blogger через Google?

Как встроить Google Переводчик в Blogger?

Хотите, чтобы посетители могли читать ваш блог на разных языках? гаджет Google Translate легко встраивается в Blogger и переводит контент вашего блога.

💡 Как добавить переводчик Google в блог на Blogger, используя разные стили:

Показать статью

Как добавить стандартный гаджет "Перевод" в Blogger

Добавляем в блог стандартный виджет "Перевод" (Google Translate):

• ➡️ Дизайн
• ➡️ Найдите нужную область макета (например, боковая панель, верхняя часть или нижний колонтитул)
• ➡️ Нажмите «Добавить гаджет»
• ➡️ Выберите из выпадающего списка гаджет "Перевод" (стандартный виджет Google Translate)

Как добавить переводчик в виде кнопки с логотипом Google

Кнопка перевода с иконкой, которая открывает текущую страницу в Google Translate.

• Дизайн
• Найдите нужную область макета (например, боковая панель, верхняя часть или нижний колонтитул)
• Нажмите «Добавить гаджет»
• Выберите из выпадающего списка гаджет "HTML/JavaScript"
• В открывшемся окне введите:
  • Название: например, «Перевести страницу» или «Translate»
  • Содержание: вставьте следующий код:

<a href="#" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl=en'); return false;" target="_blank" rel="nofollow" style="display:inline-block; padding:8px 12px; background:#f5f5f5; border:1px solid #ccc; border-radius:4px; text-decoration:none;">
  <img src="https://www.gstatic.com/images/branding/product/1x/translate_24dp.png" alt="Перевести" style="vertical-align:middle; margin-right:5px;">
  Перевести на English
</a>
    

• Сохраните — нажмите «Сохранить».

💡 Примечание: можно изменить язык перевода, заменив en на fr (французский)

Как добавить пункт «Транслейт» в меню Blogger через редактирование HTML-шаблона

• Тема
• Настроить
• Затем выберите Изменить HTML
• В коде шаблона найдите блок с меню — обычно тег <nav>, <ul> или <div> с классом вроде nav
• Добавьте в список новый пункт с кодом для Google Translate:

  <nav>
    <ul class="nav">
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О блоге</a></li>
      <!--Добавьте новый пункт для переводчика-->
      <li>
        <a expr:href='"https://translate.google.com/translate?hl=en&u=" + data:blog.canonicalUrl'
           target="_blank"
           rel="nofollow noopener"
           title="Перевести страницу на английский">Транслейт</a>
      </li>
    </ul>
  </nav>
          

• Сохраните изменения после редактирования.

💡 Что делает эта ссылка? При клике открывается новое окно с Google Translate, где текущая страница автоматически переводится на английский.

💡 Красным цветом в коде выделен новый пункт со ссылкой на скрипт переводчика

💡 В фрагменте кода hl=en&u= вместо en можно вставить перевод страницы на другой язык, например fr.

Совет 👉 Если хотите добавить на свой блог стильный виджет Google переводчика от сайта Сybup, то перейдите по ссылке: Скачать код Stylish Google Translator