21/11/2014

Personalizar o Gadget Tradutor do Google ( tema fofo)

Oie...estive dando uma olhada no blog da Roberta do Reino Kawaii (os devidos créditos são de lá) e encontrei uma forma de personalizar o gadget de tradução do Google, então vou dividir o meu com vocês. A fonte que usei é a Delius, que você pode adicionar em seu modelo.
Vai ficar assim:





Para isso, acesse Layout - Adicionar Gadget - escolha o Google Tradutor e deixe marcada a opção de estilo Vertical; isso porque para cada estilo a gente pode aplicar uma personalização, sendo que vamos usar um CSS para o gadget vertical. 

Agora acesse Modelo - Editar HTML - cole o código antes de </b:skin>:

.Translate .goog-te-gadget {/*texto com creditos ao google*/
margin: 4px 70px;/*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: #C0F6F6;/*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;
} 
-----------------

Visualize, faça suas alterações e salve. As explicações do que alterar estão no código, infelizmente não consegui mudar a cor da seta para combinar, quem sabe um dia descubro como, mas quem souber e quiser compartilhar, fique a vontade. Espero que gostem :3
Bejus >.<

Nenhum comentário:

Postar um comentário