Voltei!
Introdução
Conquistar ou não? Eis a questão.
Baseado no singelo pedido deste código de um dos meus parceiros, o Victor - novo administrador do meu ex-blog Mister Downs. Também percebi que ele tentou colocar o efeito em sua página, mas não teve sucesso.
Então trago hoje para vocês o que pode ser muito útil ao blog dos mesmos - se caso você tenha - é o translator, ou melhor, uma barra de idiomas para ser incrementado ao seu blog facilmente. Com isso podemos atravessar fronteiras e conquistar o mundo (Estou vendo muitos filmes de aventura)! Ou seja, não iremos mais nos limitar a ter um blog só lido e conhecido no Brasil, mas como nos EUA, Espanha, França e até ser conhecido pelos integrantes das Al-Qaeda no Afeganistão (Ui. Estou ficando esperto em Geografia). Ah, não podemos esquecer do Japão também... aff, só porque o "tadinho" fica longe...
Mas você deve está pensando:
- Aff, já estou cansado de ver essa solução... Já até sei que ele vai utilizar o WorldLingo!
Então se você pensou isso já temos um passo andado. Iremos utilizar sim o WordLingo, porém aqui o tutorial não tem como objetivo ensinar a você colocar um simples tradutor no seu blog, mas sim um tradutor com efeitos CSS, ou melhor, com efeito de opacidade nos botões de translação, como o daqui do blog.
Informações
Programa utilizado: Nenhum
Subcategoria: Melhorias, Tradução
Compatibilidade: IE 7, 8; Firefox
Nível de dificuldade: Fácil
Resultado final: Aqui, na nossa página do Blog!
Tutorial
1. Iremos começar criando a folha de estilo, então para isso copie o código abaixo:
<style type='text/css'>
<!--
#tradutor {
display: scroll;
z-index: 99;
}
#tradutor a {
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
border: 0;
}
#tradutor img {
border: 0;
}
#tradutor a:hover {
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
-->
</style>
E cole-o dentro das tags <head> e </head> do seu site.
2. Agora regressamos ao corpo do nosso tradutor, então copie logo abaixo:
<div id="tradutor">
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=de&wl_url=seusite" title="Deutsch"><img alt="Deutsch" style="padding-right: 2px;" src="http://lh6.ggpht.com/rds.baiano/SN1IPfR7o0I/AAAAAAAABlA/jTpwjb6-Ers/img_idiomas_alemao%5B4%5D.jpg"/></a>
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=ar&wl_url=seusite" title="العربية"><img style="padding-right: 2px;" alt="العربية" src="http://lh5.ggpht.com/rds.baiano/SN1IQqg1YFI/AAAAAAAABlI/A3bTaqeEU_U/img_idiomas_arabe_thumb%5B1%5D.jpg"/></a>
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=zh_cn&wl_url=seusite" title="
中国"><img style="padding-right: 2px;" alt="
中国" src="http://lh4.ggpht.com/rds.baiano/SN1IRM56qEI/AAAAAAAABlM/AjPSpBZlSCY/img_idiomas_chines%5B4%5D.jpg"/></a>
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=es&wl_url=seusite" title="Español"><img style="padding-right: 2px;" alt="Español" src="http://lh5.ggpht.com/rds.baiano/SN1ISIJbfPI/AAAAAAAABlU/DCx2GWLqOtQ/img_idiomas_espanhol_thumb%5B1%5D.jpg"/></a>
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=fr&wl_url=seusite" title="Français"><img style="padding-right: 2px;" alt="Français" src="http://lh3.ggpht.com/rds.baiano/SN1ITCW1frI/AAAAAAAABlc/t_nxbdjfMm8/img_idiomas_frances_thumb%5B1%5D.jpg"/></a>
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=el&wl_url=seusite" title="Ελληνικά"<>img style="padding-right: 2px; padding-top: 2px;" alt="Ελληνικά" src="http://lh6.ggpht.com/rds.baiano/SN1IUJsInLI/AAAAAAAABlk/f5as91ISl4A/img_idiomas_grego_thumb%5B1%5D.jpg"/></a>
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=nl&wl_url=seusite" title="Dutch"><img alt="Dutch" style="padding-right: 2px; padding-top: 2px;" src="http://lh4.ggpht.com/rds.baiano/SN1IVFi-FkI/AAAAAAAABls/Icw7r0QK_do/img_idiomas_holandes_thumb%5B1%5D.jpg"/></a>
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=en&wl_url=seusite" title="English"><img alt="English" style="padding-right: 2px; padding-top: 2px;" src="http://lh6.ggpht.com/rds.baiano/SN1IWV07jDI/AAAAAAAABmM/22JJJBAmlRI/img_idiomas_ingles_thumb%5B1%5D.jpg"/></a>
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=it&wl_url=seusite" title="Italiano"><img style="padding-right: 2px; padding-top: 2px;" alt="Italiano" src="http://lh3.ggpht.com/rds.baiano/SN1IXQO01uI/AAAAAAAABmU/LrEf9vCUyDE/img_idiomas_italiano_thumb%5B1%5D.jpg"/></a>
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=ja&wl_url=seusite" title="日本語"><img alt="日本語" style="padding-right: 2px; padding-top: 2px;" src="http://lh6.ggpht.com/rds.baiano/SN1IYnomReI/AAAAAAAABmc/NjwPN3J2sTw/img_idiomas_japones_thumb%5B1%5D.jpg"/></a>
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=ru&wl_url=seusite" title="Российская"<>img alt="Российская" style="padding-right: 2px; padding-top: 2px;" src="http://lh6.ggpht.com/rds.baiano/SN1IZtHu2mI/AAAAAAAABmk/cbNGB-aM1Tc/img_idiomas_russo_thumb%5B1%5D.jpg"/></a>
<a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=sv&wl_url=seusite" title="Svenska"><img alt="Svenska" src="http://lh6.ggpht.com/rds.baiano/SN1Ibu2qFWI/AAAAAAAABms/EgAmZq_47rk/img_idiomas_sueco_thumb%5B1%5D.jpg"/></a>
</div>
Hehe, código grande, heim?! Pois é, agora cole esse código imenso na body do seu site. Caso você esteja querendo colocá-lo no seu blog do Blogger basta ir à Layout > Adicionar um Gadget > HTML/JavaScript e finalize clicando em Salvar.
O resultado você vê aqui no Tuto de Tudo... é só você clicar no nosso botão "Topo"!
Obs: Todas as imagens do tradutor é de minha autoria, ficarei grato se você hospedá-la no seu hospedeiro pessoal, pois isso poderá provocar uma provável lentidão nas imagens aqui no blog.
Fui...
Original de: Tuto de Tudo
Se caso você viu este post em outro blog, site, etc sem seus devidos créditos. Denuncie-o clicando aqui.
