Estilizando um tradutor para blogs
Autor: Ramon Davi | Publicado: 2008-11-07T16:42:00-03:00

Voltei!IntroduçãoConquistar 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: NenhumSubcategoria: Melhorias, TraduçãoCompatibilidade: IE 7, 8; FirefoxNível de dificuldade: FácilResultado final: Aqui, na nossa página do Blog!Tutorial1. Iremos começar criando a folha de estilo, então para isso copie o código abaixo:&lt;style type='text/css'&gt;&lt;!--#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;}--&gt;&lt;/style&gt;E cole-o dentro das tags &lt;head&gt; e &lt;/head&gt; do seu site.2. Agora regressamos ao corpo do nosso tradutor, então copie logo abaixo:&lt;div id="tradutor"&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=de&amp;wl_url=seusite" title="Deutsch"&gt;&lt;img alt="Deutsch" style="padding-right: 2px;" src="http://lh6.ggpht.com/rds.baiano/SN1IPfR7o0I/AAAAAAAABlA/jTpwjb6-Ers/img_idiomas_alemao%5B4%5D.jpg"/&gt;&lt;/a&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=ar&amp;wl_url=seusite" title="العربية"&gt;&lt;img style="padding-right: 2px;" alt="العربية" src="http://lh5.ggpht.com/rds.baiano/SN1IQqg1YFI/AAAAAAAABlI/A3bTaqeEU_U/img_idiomas_arabe_thumb%5B1%5D.jpg"/&gt;&lt;/a&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=zh_cn&amp;wl_url=seusite" title="中国"&gt;&lt;img style="padding-right: 2px;" alt="中国" src="http://lh4.ggpht.com/rds.baiano/SN1IRM56qEI/AAAAAAAABlM/AjPSpBZlSCY/img_idiomas_chines%5B4%5D.jpg"/&gt;&lt;/a&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=es&amp;wl_url=seusite" title="Español"&gt;&lt;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"/&gt;&lt;/a&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=fr&amp;wl_url=seusite" title="Français"&gt;&lt;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"/&gt;&lt;/a&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=el&amp;wl_url=seusite" title="Ελληνικά"&lt;&gt;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"/&gt;&lt;/a&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=nl&amp;wl_url=seusite" title="Dutch"&gt;&lt;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"/&gt;&lt;/a&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=en&amp;wl_url=seusite" title="English"&gt;&lt;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"/&gt;&lt;/a&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=it&amp;wl_url=seusite" title="Italiano"&gt;&lt;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"/&gt;&lt;/a&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=ja&amp;wl_url=seusite" title="日本語"&gt;&lt;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"/&gt;&lt;/a&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=ru&amp;wl_url=seusite" title="Российская"&lt;&gt;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"/&gt;&lt;/a&gt;&lt;a href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&amp;wl_trglang=sv&amp;wl_url=seusite" title="Svenska"&gt;&lt;img alt="Svenska" src="http://lh6.ggpht.com/rds.baiano/SN1Ibu2qFWI/AAAAAAAABms/EgAmZq_47rk/img_idiomas_sueco_thumb%5B1%5D.jpg"/&gt;&lt;/a&gt;&lt;/div&gt;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...<!--Deixar o estrofe abaixo no final do post sem autera-lo-->Original de: Tuto de TudoSe caso você viu este post em outro blog, site, etc sem seus devidos créditos. Denuncie-o clicando aqui.