Hey galerinha linda! Trazendo mais um tutorial para vocês, e desta vez é para personalizar aquele Gadget do Google Tradutor. E novamente, este tutorial veio do blog Reino Kawaii. Credite ela! Estou reblogando da minha forma. Clique em Leia mais para ver o tutorial.
Ele irá ficar assim, ou da cor que você quiser: Primeiramente, você deverá colocar o Gadget do Google tradutor do seu blog. Vá em Layout>Adicionar Gadget e siga as instruções a seguir:
Coloque o título que quiser, mas deixe o Estilo em vertical! Feito isso vá em Modelo>Editar HTML e procure pelo seguinte código:
]]>
E cole o seguinte código antes desta que você localizou:
/*****Personalizar tradutor*****/ .Translate .goog-te-gadget {/*texto com creditos ao google*/ margin: 4px 40px;/*posicionar*/ font-family: ‘Delius Swash Caps’, cursive;/*tipo de fonte*/ font-size: 12px;/*tamanho da fonte*/ color: #09BCCC;/*cor do texto*/ white-space: nowrap; } .Translate .goog-te-gadget a:link.goog-logo-link {/*personaliza o link*/ font-size: 12px;/*tamanho do texto*/ font-weight: bold;/*negrito*/ color: #D46D6D;/*cor do texto*/ text-decoration: none; } .goog-te-gadget .goog-te-combo { margin: 4px 10px;/*posiciona a caixinha de selecione o idioma*/ } .goog-te-gadget .goog-te-combo {/*personaliza o texto selecione o idioma*/ color: #fff;/*cor do texto*/ font-family: ‘Delius Swash Caps’, cursive;/*tipo da fonte*/ font-size: 14px;/*tamanho do texto*/ text-align: center;/*alinhamento*/ background: #FFAEB9;/*cor do plano de fundo*/ border-radius: 10%;/*borda arredondada*/ border: none;/*sem borda*/ text-shadow: 1px 2px 3px #a1a1a1;/*sombra do texto*/ padding: 1px; }
/****fim do tradutor****/
Se o seu tradutor ficar muito para a direita ou esquerda altere o seguinte valor que es´ta destacado: margin: 4px 40px. Para as cores você poderá verificar os códigos neste site. O código está explicativo, altere os valores que julgar necessário. Alterado tudo, salve e visualize. Pronto! Seu Tradutor do Google está personalizado! Deixem comentários!