Добавляем переводчик Google на Blogger: Перевод блога blogspot с помощью Google Translator

Как перевести блог с помощью переводчика Google в Blogger?

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

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

1. Способ: Через встроенный гаджет (простой способ добавления).

   В Blogger есть готовый виджет «Перевод». Зайдите в «Дизайн» → «Добавить гаджет» и выберите этот вариант.

   

   После добавления гаджет появится в блоге автоматически.Часто его добавляют в боковую панель (sidebar), чтобы он был на всех страницах. Но можно разместить и в шапке блога.

2. Способ: Вручную через HTML-код (способ более сложный, так как требует определенных знаний).

   Можно добавить переводчик непосредственно в шаблон, HTML-код страницы или на боковую панель. Предлагаю три варианта (в виде кнопки, пункт меню блога и стильный виджет от cybup.blogspot.)

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

1. Как добавить переводчик в виде кнопки с логотипом 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>
    

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

💡 Примечание:Принцип работы кнопки перевода

×

2. Как добавить пункт «Транслейт» в меню 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 href="#" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id|en&hl=en'); return false;" target="_blank" title="English">Транслейт</a>
    </li>
  </ul>
</nav>

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

Посмотреть, как это выглядит на практике, можно в верхнем меню моего блога, нажав «Транслейт». В других темах Blogger меню может выглядеть иначе или находиться в другом месте.

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

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

💡 В фрагменте кода hl=en&u= вместо en можно вставить перевод страницы на другие языки, например Французский:fr(Français / French), Немецкий:de (Deutsch / German),Испанский:es (Español / Spanish).

3. Как добавить стильный виджет Google переводчика от cybup.blogspot.

Примечание! 👉 Чтобы добавить на свой блог стильный виджет Google переводчика от cybup.blogspot. перейдите по ссылке.

×