Изменить дизайн гаджета кнопки Переводчик Google



Всем здравствуйте. Давно я не писала постов в блог, обновляю ранние сообщения с 2013 года по 2017 год. Столько всего изменилось, много информации пришлось удалить. И еще предстоит очень много работы.

Сегодня хочу предложить Вам измененный вариант дизайна гаджета Переводчик.  

Используя стили CSS, оформляем фон гаджета Переводчик

На рисунке показаны различные примеры оформления фона кнопки и открывающей вкладки. Посмотреть сходите по ссылкам: демо 1; демо 2; демо 3

Дизайн блогов у всех разный, поэтому у Вас появится возможность настроить гаджет перевода соответственно фону блога. Делаем все по пунктам:

1. Дизайн Добавить гаджет. Находим гаджет Переводчик.

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

2. Скопируйте код ниже:

<style>
#google_translate_element a {
display: none;} *// убрать надпись внизу кнопки "Google Transplate";
div.goog-te-gadget {
color: transparent !important;}*// Убрать надпись внизу кнопки "Технологии";
.goog-te-gadget .goog-te-combo {
margin: 0px 0 !important;
padding: 6px 5px; *// Положение текста на кнопке;
background: #0e5198;  *// фон кнопки и вкладки;
border: 2px solid #03b4cc; *// размер, форма и цвет границы рамки вокруг кнопки;
color: #fff; *// цвет текста;
font-size:16px; *// размер шрифта
font-style:italic; *// стиль шрифта, наклонный;
border-radius: 5px; *// закругление углов кнопки;
cursor: pointer;
outline: none;}
</style>


3. Идем дизайн добавить гаджет, вставляем код CSS, при необходимости настраиваем, сохраняем внизу, в footer блога. Протестировала по разным шаблонам, все работает.

Стиль кнопки "Только раскрывающее меню"

оформление и установка кнопки перевода раскрывающее меню.

Код CSS

<style>
div.goog-te-gadget-simple{background-color:#aab351; *// фон кнопки;
border:5px ridge #006400;*// размер, форма и цвет границы рамки;
font-size: 18px;*// размер шрифта;
font-style:italic;} *//стиль шрифта;
</style>

В отличие кнопки по вертикали, эта кнопочка капризная, работает корректно не во всех шаблонах. Фон меню без изменений, светлый.

Все вопросы по установке и оформлению гаджета Переводчик задавайте в комментариях или используйте контактную форму. Пишите отзывы, делитесь с друзьями. Всем всего доброго.

Посмотрите статьи:

Text.ru - 100.00%

Рекомендуемый контент:




Автор статьи ✎ Olga Protasova Выпуск ✹ 9/18/2019 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь Генератором HTML кода


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *