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

дизайн на Преводач от 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>

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

Вариант 2

Код 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>

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

Вариант 3


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

BGtop

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