Barra de tradução no topo dos artigos no Blogger

Seu blog está disponível na web através da Internet, uma rede mundial de computadores, e isso é fato! Se essa rede é realmente mundial, você há de concordar comigo que qualquer pessoa do mundo pode acessar seu blog, pessoas que talvez não falem o seu idioma. Pensando nisso, se as visitas "internacionais" são importantes para você, e você quer mantê-las, você precisa pensar em uma maneira de fornecer o seu conteúdo para tais pessoais. Que tal seria adicionar uma barra de traduções no seu blog?

Seria bem interessante, não é? E é isso o que você aprenderá a fazer neste artigo. Caso queira saber como ficará a barra de traduções após a instalação, visite nosso blog de testes clicando nesse link.

ATENÇÃO: é sempre importante lembrar que para os tutoriais de customização, eu utilizo como base os templates disponíveis no Designer de modelo do Blogger, portanto, se você utiliza um template não-nativo, você poderá não encontrar alguns códigos que serão citados.

Instalando a barra de tradução em blogs do Blogger


1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML, marque a caixa Expandir modelos de widgets, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

<div class='post-header-line-1'>

3. Imediatamente abaixo deste código, adicione este outro código.

<b:if cond='data:blog.pageType == "item"'>
<div class='translate-bar'>
<!-- Português para Chinês -->
<a expr:href='&quot;http://www.google.com/translate?u=&quot; + data:post.url + &quot;&amp;langpair=pt%7Czh-TW&amp;hl=pt&amp;ie=UTF8&quot;' target='_blank' title='翻譯成中文!'><img align='absmiddle' alt='中文' border='0' oncontextmenu='return false' ondragstart='return false' src='http://2.bp.blogspot.com/-tT7p_7D3WE4/T4-PBIaJ66I/AAAAAAAAAYY/jhArFOCFYdU/s1600/china.png'/></a>&amp;nbsp;&amp;nbsp;
<!-- Fim do Português para Chinês -->
 
<!-- Português para Francês -->
<a expr:href='&quot;http://www.google.com/translate?u=&quot; + data:post.url + &quot;&amp;langpair=pt%7Cfr&amp;hl=pt&amp;ie=UTF8&quot;' target='_blank' title='Traduire en français!'><img align='absmiddle' alt='Français' border='0' oncontextmenu='return false' ondragstart='return false' src='http://4.bp.blogspot.com/-jSZrJvijpqQ/T4-PCVu63-I/AAAAAAAAAYw/A_R9JAXnslc/s1600/fran%C3%A7a.png'/></a>&amp;nbsp;&amp;nbsp;
<!-- Fim do Português para Francês -->
 
<!-- Português para Alemão -->
<a expr:href='&quot;http://www.google.com/translate?u=&quot; + data:post.url + &quot;&amp;langpair=pt%7Cde&amp;hl=pt&amp;en=UTF8&quot;' target='_blank' title='Übersetzen ins Deutsche!'><img align='absmiddle' alt='Deutsch' border='0' oncontextmenu='return false' ondragstart='return false' src='http://4.bp.blogspot.com/-51zKmYLXC2c/T4-PAzQ3yqI/AAAAAAAAAYQ/Z4OYkKcmJaA/s1600/alemanha.png'/></a>&amp;nbsp;&amp;nbsp;
<!-- Fim do Português para Alemão -->
 
<!-- Português para Itália -->
<a expr:href='&quot;http://www.google.com/translate?u=&quot; + data:post.url + &quot;&amp;langpair=pt%7Cit&amp;hl=pt&amp;en=UTF8&quot;' target='_blank' title='Traduci in italiano!'><img align='absmiddle' alt='Italiano' border='0' oncontextmenu='return false' ondragstart='return false' src='http://3.bp.blogspot.com/-0ASWu6VmqK0/T4-PCs9yOmI/AAAAAAAAAY4/WPUv3X1PExk/s1600/italia.png'/></a>&amp;nbsp;&amp;nbsp;
<!-- Fim do Português para Itália -->
 
<!-- Português para Japão -->
<a expr:href='&quot;http://www.google.com/translate?u=&quot; + data:post.url + &quot;&amp;langpair=pt%7Cja&amp;hl=pt&amp;en=UTF8&quot;' target='_blank' title='翻訳日本語に!'><img align='absmiddle' alt='日本' border='0' oncontextmenu='return false' ondragstart='return false' src='http://4.bp.blogspot.com/-68bivtCyQIo/T4-PDKhVkgI/AAAAAAAAAZA/otThB1zhXqQ/s1600/jap%C3%A3o.png'/></a>&amp;nbsp;&amp;nbsp;
<!-- Fim do Português para Japão -->
 
<!-- Português para Inglês -->
<a expr:href='&quot;http://www.google.com/translate?u=&quot; + data:post.url + &quot;&amp;langpair=pt%7Cen&amp;en=pt&amp;en=UTF8&quot;' target='_blank' title='Translate to English!'><img align='absmiddle' alt='English' border='0' oncontextmenu='return false' ondragstart='return false' src='http://2.bp.blogspot.com/-NXfGj6YF1mM/T4-PB8R7sHI/AAAAAAAAAYo/cyigggDupRM/s1600/estados-unidos.png'/></a>&amp;nbsp;&amp;nbsp;
<!-- Fim do Português para Inglês -->
 
<!-- Português para Russo -->
<a expr:href='&quot;http://www.google.com/translate?u=&quot; + data:post.url + &quot;&amp;langpair=pt%7Cru&amp;hl=pt&amp;ie=UTF8&quot;' target='_blank' title='Перевести на русский!'><img align='absmiddle' alt='Россию' border='0' oncontextmenu='return false' ondragstart='return false' src='http://2.bp.blogspot.com/-z6o3cGtAp6Y/T4-PDXiAorI/AAAAAAAAAZI/OpNtNSlkaZY/s1600/russia.png'/></a>&amp;nbsp;&amp;nbsp;
<!-- Fim do Português para Russo -->
 
<!-- Português para Espanhol-->
<a expr:href='&quot;http://www.google.com/translate?u=&quot; + data:post.url + &quot;&amp;langpair=pt%7Ces&amp;hl=pt&amp;ie=UTF8&quot;' target='_blank' title='Traducir al español!'><img align='absmiddle' alt='Español' border='0' oncontextmenu='return false' ondragstart='return false' src='http://3.bp.blogspot.com/-pusJpIhpbZE/T4-PBtioTJI/AAAAAAAAAYg/T_z3mRU2aPs/s1600/espanha.png'/></a>
<!-- Fim do Português para Espanhol -->
</div>
</b:if>


O código acima é responsável por adicionar as bandeiras à barra de tradução, os idiomas disponíveis na barra são: chinês, francês, alemão, italiano, japonês, inglês, russo e espanhol. Cada idioma é formado por 3 linhas de código, então, se você não quiser algum dos idiomas que foram citados, basta excluir as linhas referentes a ele. Por exemplo, se você não quiser o idioma francês, você deve excluir a seguinte parte:

<!-- Português para Francês -->
<a expr:href='&quot;http://www.google.com/translate?u=&quot; + data:post.url + &quot;&amp;langpair=pt%7Cfr&amp;hl=pt&amp;ie=UTF8&quot;' target='_blank' title='Traduire en français!'><img align='absmiddle' alt='Français' border='0' oncontextmenu='return false' ondragstart='return false' src='http://4.bp.blogspot.com/-jSZrJvijpqQ/T4-PCVu63-I/AAAAAAAAAYw/A_R9JAXnslc/s1600/fran%C3%A7a.png'/></a>&amp;nbsp;&amp;nbsp;
<!-- Fim do Português para Francês -->


INFORMAÇÃO: a barra de tradução aparecerá somente nas páginas internas dos artigos, portanto, o leitor terá de clicar no título do artigo para acessá-lo, e só então poderá ver a barra de tradução.

4. Pressione novamente Ctrl+F para abrir a janela Localizar, e procure o código abaixo.

]]></b:skin>

5. Imediatamente acima deste código, adicione este outro código.

/* ----- CSS da Barra de tradução ----- */
 
div.translate-bar {
background: #F9F9F9; /* cor de fundo da barra de tradução */
border: 1px solid #D9D9D9; /* borda ao redor da barra de tradução */
text-align: center;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 10px 0 0;
padding: 5px;
}
 
div.translate-bar img {
border: 1px solid #000000; /* Borda ao redor das imagens das bandeiras */
opacity: 1;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
 
div.translate-bar img:hover {
opacity: 0.2;
}


Caso você tenha algum tipo de conhecimento em CSS, você poderá alterar as propriedades do código como quiser, caso contrário, aconselho que altere somente o que possui comentários à frente. Os comentários são escritos da seguinte maneira: /* exemplo de comentário */. Para ver uma tabela com diversas cores que podem ser usadas, clique aqui.

6. Para finalizar, clique em Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Pronto, agora entre em um dos seus artigos para ver como ficou a sua barra de tradução, e aproveite para testar todos os botões para ver se está tudo funcionando corretamente. Aconselho que você salve as imagens das bandeiras no seu próprio servidor, para evitar que seu blog seja afetado caso as imagens sejam excluídas.

Clique com o botão direito do mouse na imagem e, escolha a opção "Salvar imagem como".
Alemão Chinês Espanhol Inglês
Francês Italiano Japonês Russo

NOTA: para substituir o link das imagens, você deve substituir as partes que foram destacadas em vermelho no código do passo 3.

Esse recurso utiliza o sistema do serviço Google Tradutor, que está em constante melhoria. Portanto, para que a tradução seja feita com a máxima fidelidade, é importante que você escreva seus artigos com a norma culta do seu idioma, evitando abreviações, gírias e etc. A gramática também é importante para uma melhor tradução.

Atualização — 19.04.2012 às 01h15
O artigo foi atualizado para refletir mudanças no painel de controle da plataforma Blogger, e para atualização do código CSS da barra de tradução, de forma a adicionar efeitos de transição suave.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 3 comentários neste artigo!

  1. Se ela ficar muito grande, como posso diminuir??

    ResponderExcluir
  2. Sybylla: para diminuir o tamanho da barra, você precisa adicionar o atributo width dentro do CSS, o código ficaria da seguinte maneira:
    div.translate-bar {
    width:500px;

    ou você pode especificar o valor em porcentagem também:
    div.translate-bar {
    width:90%;

    Mas eu visitei o seu blog, e se o que você está querendo fazer é com que a barra de tradução não fique sobre o balão azul da data, basta você mudar a margem:
    div.translate-bar {
    margin:3px 0px 0px 60px;

    Lembrando que já há uma margem dentro do CSS, basta editar os valores! Espero que isto te ajude! Qualquer dúvida entre em contato novamente.

    ResponderExcluir
  3. Consegui! Diminui o tamanho das bandeiras e tirei a moldura, pois estava cortando o título da postagem. Suas dicas ajudam muito, muito mesmo. Vlw, de coração. S2

    ResponderExcluir