Притурки. Промени в дизайна на Преводач от Google

Здравейте, мои редовни читатели, гости и случайно попаднали на Блог за блогове. Добре сте ми дошли! Тези от вас, които ползват в блога си притурка Преводач от Google, сигурно понякога изпитват желание да променят дизайна ѝ. Днес искам да ви предложа няколко варианта на дизайн на притурката Преводач. Нищо, че не много отдавна ви предложих публикация с подобно съдържание.
Всеки блог има свой собствен облик, така че ще имате възможност да персонализирате приспособлението за превод според фона му.
Ще работим в следната последователност:
➤Добавяне на притурката в оформлението на блога;
Ако я имате инсталирана пропуснете тази стъпка, но ако още не сте, трябва да го направите. Намерете притурката Преводач сред предлаганите от Blogger. Изберете стил вертикален и я преместете на нужното ви място в оформлението на блога;

➤Изберете един от предлаганите кодове и го персонализирайте;

Код 1:

<style>

#google_translate_element a {

display: none;}

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: 8px 0px 40px 0px;

cursor: pointer;

outline: none;}

</style>

Притурката ще изглежда така:

Код 2:

<style>

#Translate1{

padding:12px;

background:#82B638;

border:4px ridge #82B638;

}

option {

background:#82B638;

color:#fff;

font-size:16px;

font-style:italic;

font-weight:bold;

}

</style>

Притурката ще изглежда така:

Код 3:

<style>

#google_translate_element {

color: transparent;}

#google_translate_element a {

display: none;}

select.google_translate_element {

color: black;}

div.goog-te-gadget {

color: transparent;}

div.goog-te-gadget {

color: transparent !important;}

.goog-te-gadget .goog-te-combo {

margin: 0px 0 !important;

padding: 6px 5px;

background: #7423fe;

border: 2px solid #7423fe;

color: #ffffff;

font-size:14px;

font-style:italic;

border-radius: 5px;

cursor: pointer;

outline: none;}

</style>

Притурката ще изглежда така:

➤Инсталирайте персонализирания код;
Отворете в Админ панела ➔ Оформление ➔ Добавяне на притурка ➔ Изберете HTML/JavaScript ➔ поставете готовия CSS код в тялото ѝ и я „настанете“ някъде в долния колонтитул на блога.
И трите варианта са тествани в различни шаблони, работят.
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!