How to Create Bilingual Posts on Blogger

Tuesday, November 17, 2015



 Ler em Português       Read in English

Desde que iniciei o meu blog tive em mente que queria que ele fosse legível não só na minha lingua materna mas também em Inglês, permitindo assim que o conteúdo fosse acessível a pessoas de diferentes nacionalidades. Ter um blog bilingue permite que pessoas de todo o mundo possam beneficiar da informação que partilhamos e interagir connosco, enriquecendo a experiência de ser blogger. É também uma óptima forma de continuar a praticar uma língua estrangeira!  

Respondendo à questão que me é frequentemente colocada, sobre como faço os meus posts bilingues com esta funcionalidade de botões para alternar entre os dois idiomas, criei este vídeo tutorial, que certamente irá ajudar muitos de vocês que gostariam de ter um blog bilingue com esta particularidade. É o primeiro vídeo neste canal de youtube que criei para complementar o blog. Acompanhem-me por lá subscrevendo o canal!

Para criar os vossos posts bilingues desta forma irão necessitar do código HTML que criei para este efeito e que podem obter aqui.

Para valorizar ainda mais esta publicação, sugiro que se seguirem o tutorial o refiram num comentário, para que eu e outros bloggers possamos ver como resultou a vossa experiência!

Related Posts

100 Comments

  1. Adorei!
    Em breve irei começar a traduzir os meus posts para "chegar a todo o lado" e não me agradava a ideia de ter um post tão longo para ter a tradução.
    Assim torna tudo mais fácil ^^

    Beijinhoos****
    Cantinho da Suu

    ReplyDelete
    Replies
    1. Que bom que te vai ser útil, Su! Depois quero ver como ficou! : )
      Beijinhos

      Delete
  2. Adorei, vou ter de ver isto com mais atenção e ver se consigo fazer isso no meu blog também!
    Beijinhos Sofia <3 És um crânio :P

    ReplyDelete
  3. Obrigado :D
    Se nao fosses tu, o que seria de nos ^^

    Sophie.

    ReplyDelete
  4. Que óptimo vídeo para começar o canal, Sofia! Muito obrigado por partilhares este tutorial connosco. Já tinha reparado no widget nos teus posts e andava a pensar exactamente na possibilidade de traduzir os meus posts. Talvez o faça com o teu código. Quando fizer aviso!
    Beijinhos,
    Tânia

    ReplyDelete
    Replies
    1. Olá, Tânia!
      Muito obrigada pelo teu feedback!
      Avisa sim! ;)

      Beijinhos

      Delete
  5. Já me tinha questionado algumas vezes sobre isto.
    Achei o tutorial ótimo!
    Com a tradução, os posts ficam enormes e esteticamente também não gosto (foi por essa razão que optei pelo botão "read more" no meu blog).
    Acho que vou experimentar ;)

    ReplyDelete
    Replies
    1. Experimenta, Fedra! Acho que se adequa perfeitamente ao teu blog! :)

      Beijinhos

      Delete
  6. Olá linda! Já há algum tempo que me perguntava como o fazias mas nunca te fiz a pergunta, e agora que penso nisso não sei porquê! Mas vou usar isto no meu blog! Obrigada por partilhares :3
    Instagram | Facebook | Catrrine | Shop

    ReplyDelete
    Replies
    1. Olá, Catarina!
      E estarias à vontade para perguntar, claro! :)
      De nada! :)

      Beijinhos

      Delete
  7. Óptima dica, adorei.
    Beijinhos
    http://virginiaferreira91.blogspot.pt/

    ReplyDelete
  8. Isto é super, super útil! Obrigada! ♥


    xoxo, Sofia Pinto
    Last Post ♥

    ReplyDelete
  9. I love this look, but I'm having a bit of trouble. I did everything as instructed in your video, but my second translation button shows both languages. :(

    Vegetarian Courtesy

    ReplyDelete
    Replies
    1. Hi, Adi!
      Have you changed the variables (the dates such as "r1_21_06_2014") as I recommend doing?Are they all looking exactly the same?

      I'll take a look at your code to see what's wrong if you send me the link to a draft post by replying to this comment or through e-mail: contact@sofiagarrido.com.

      Delete
    2. Thank you!
      I just sent you an e-mail. :)

      Delete
  10. Isto é uma excelente opção! Penso que, assim que me decida a começar a escrever os posts nas duas línguas, vou optar por algo deste género.

    Marli, do My Own Anatomy ✫

    ReplyDelete
  11. Olá Sofia!

    Obrigada pelo código HTML + JavaScript. Experimentei o teu snippet num post antigo!
    Fiz algumas alterações ao teu código original, mas não te preocupes é só manias de programador ;)

    Obrigada!

    ReplyDelete
    Replies
    1. Olá, Joana!
      Muito obrigada por testares! Espreitei as alterações que fizeste. Parece-me muito bem! :)

      Beijinhos

      Delete
  12. Hi Sofia! I found you while googling on how to set up a bilingual post on blogger without it being too long and I'm so glad I found you, I will definitely try your tips and obviously mention you on my facebook page and on my blog once I've made the change. Thank you SO much, you're a gem!

    Kisses from Greece :) x

    ReplyDelete
    Replies
    1. Hello again, Stavroula! :)
      I just checked your blog and I'm so glad that you've made the code work for you and that you're already displaying your posts like this!

      Kisses

      Delete
    2. Wow you said my name correctly! Most non-greek people say it wrong because it's pretty difficult to pronounce :) Thank you again so much for doing this post and for creating this code! Also for replying to my message on your facebook page quickly and for your comment on my blog! I'm so glad I've discovered you, keep up the great job here and on youtube! ;)

      Beijinhos (I guess this means "kisses"? ) ;)

      Delete
  13. Desde que descobri o teu blog que adoro o facto de teres os posts em duas línguas e obrigada por partilhares as dicas! ;)

    Glamour in a Bottle | Mega Giveaway

    ReplyDelete
    Replies
    1. Olá, Liliana! :)
      Tenho muito gosto em partilhar estas dicas com vocês!
      Beijinhos

      Delete
  14. Adorei o vídeo , foi bastante útil. Estava a pensar fazer isso com o meu mas visto que o meu título está em português não sei se vai servir muito.
    Mas vou seguir o blog e se mudar de ideias já sei o que fazer :D

    Www.confissoesdos20etais.blogspot.pt

    Beijinhos

    ReplyDelete
    Replies
    1. Que bom que achaste útil, Bruna! :)

      Beijinhos

      Delete
  15. Obrigada pelo comentário querida ,no fim de semana vou tentar fazer isso então realmente dá mais jeito.
    Reparei que me chamas- te Ana :) mas o meu nome é Petina .
    Gostei muito do teu blog.

    Beijinhos*

    ReplyDelete
    Replies
    1. Oh Petina, desculpa o lapso com o nome! :)

      Que bom que gostaste!
      Beijinhos

      Delete
  16. Não sabia que isto era possível, obrigada pela dica! Assim que tiver algum tempinho vou aventurar-me ihihih

    Beijinhos
    ayellowrain.blogspot.pt

    ReplyDelete
    Replies
    1. Que bom, Catarina! Depois quero ver! :)

      Beijinhos

      Delete
  17. Adorei a tua ideia de ter botões para mudar de língua. Obrigada por partilhares o método para ter posts bilinguais. Fiz imensa pesquisa no google sobre isso e nunca tinha encontrado nada.
    Já agora, adorei o teu blog, comecei a seguir-te.
    Beijinhos,
    Cherry

    Blog: Life of Cherry

    ReplyDelete
    Replies
    1. Que bom! Fico muito contente por ajudar dessa forma!
      Sê bem vinda por aqui! :)

      Beijinhos

      Delete
  18. Sempre quis saber como fazias isto :)
    Quanto ao comentário no meu blog, foi tão bom acordar hoje, ligar o pc e ler o que escreveste! És uma querida e tens o rosto e a voz mais fofinhos de todos :D

    ReplyDelete
    Replies
    1. Well, now you know ;p

      Oh Daniela, muito obrigada! :)
      Beijinhos

      Delete
  19. Muito bommm!

    Quero mais dicas! :)

    ReplyDelete
  20. Obrigada!
    E virão mais dicas, claro! :)

    ReplyDelete
  21. Isto é fantástico :)) Experimentei no meu blog e funcionou perfeitamente <3

    ReplyDelete
  22. This is such a nice post. I am planning to write my posts also in Spanish since it is my mother tongue!

    Walking Freckle
    BOOTS FROM 0.99! CHECK THEM OUT: http://thisblogbelongstosabi.blogspot.com.ar/2015/12/december-wishlist.html

    ReplyDelete
    Replies
    1. Thank you!
      Then you should definitely do that! :)

      Delete
  23. I loved this tutorial, but is it possible to have the "buttons" Read in xxx at the end of the article and not on the top? Oh and also the link to the html code doesn't work for me :(

    ReplyDelete
    Replies
    1. I'm sorry but I'm not sure if that's possible. I'm no expert on this matter, this was a long trial and error process for me until I made it work this way.
      The link seems to be working just fine. Please try again to access it and if you use it and experience any problem let me know, ok? :)

      Delete
  24. Olá!

    Achei este post SUPER útil. Mencionaste a existência de um plug-in que faz o mesmo efeito no Wordpress. Trabalho com Wordpress e gostava de saber se me podes indicar o nome. Existem tantos, mas não consigo encontrar um que tenha um botão (post a post) em que possas traduzir, se quiseres, tal como no teu site.

    Obrigada,
    Ana

    ReplyDelete
    Replies
    1. Olá, Ana! Obrigada!

      Creio que o plugin do wordpress que eu encontrei quando fiz a minha pesquisa era este: https://wpml.org/

      Delete
  25. Muito bom! Obrigada! Vim aqui através do We Blog you e funcionou na perfeição! Obrigada!

    ReplyDelete
    Replies
    1. Ora, de nada! Que bom que foi útil! :)

      Delete
  26. Obrigada, estou criando o meu blog e estava com dificuldade para definir a melhor forma para escrever em Inglês e Português. Vou testar e assim que o blog estiver no ar te envio o link.

    ReplyDelete
  27. Adorei. É realmente bastante útil e obrigada por explicares tudo muito bem.
    Tenho uma questão. Agora que já fiz tudo e publiquei, está tudo certinho. Posso apagar os dois rascunhos que fiz?
    Beijinhos

    P.S.: O meu próximo post será a publicitar este teu vídeo maravilhoso :)

    ReplyDelete
    Replies
    1. Olá, Ana Rita!
      Podes, claro! Eu crio os rascunhos porque para mim facilita a implementar o código.

      Muito obrigada! :)
      Beijinhos

      Delete
  28. Que video útil, adorei! Tens de fazer mais.

    Beijinhos, MARGARITA

    ReplyDelete
    Replies
    1. Farei, Diana! :)
      Muito obrigada pelo teu beedback!
      Beijinhos

      Delete
  29. Os meus posts não são bilingues, mas adorei o vídeo! :D Parabéns.
    Beijinhos

    ReplyDelete
    Replies
    1. Que bom! :) Muito obrigada!
      Beijinhos

      Delete
  30. Post bastante útil, eu andava a traduzir os posts em ambas as línguas mas não estava completamente satisfeita visto que eles ficavam muito longos. Depois de ter feito todo este processo consegui que aparecessem os botões mas o meu tema é daqueles onde tem o "Read More" e quando estou na página inicial e só aparecem os excertos, o código também aparece e visualmente não fica muito bonito. Há alguma maneira de modificar isto? Obrigada :)

    ReplyDelete
    Replies
    1. Infelizmente tenho exactamente o mesmo problema e não sei como resolver :/ Deve haver algum conflito com o código do template. Se houver uma forma de resolver isto também gostava muito de saber. Beijinho

      Delete
    2. Olá!

      Mil desculpas por levar uma eternidade a responder-te. O blog esteve em hiatus e só agora regressei à blogosfera e estou a meter tudo em ordem.

      Percebo a que te referes mas infelizmente não há como contorná-lo com esses templates. A minha sugestão para quem quer usar esta forma de apresentar os dois idiomas sem que apareça esse fragmento do código com script, é que se use um dos templates que mostram o post na íntegra.

      Delete
  31. Muito obrigada por este post, vou começar a usar no meu blog a partir de hoje :)
    Para além do meu blog principal tenho um blog com tutoriais para bloggers e, se não te importares, vou fazer um post a mencionar o teu blog e este tutorial.

    Beijinhos

    ReplyDelete
    Replies
    1. Olá, Maria!

      Desculpa levar tanto temp a responder-te. O blog esteve em hiatus e só agora regressei à blogosfera e estou a meter tudo em ordem.
      Fico muito contente por teres achado este tutorial útil para ti e que o tenhas partilhado com os teus leitores, muito obrigada! :)

      Beijinhos

      Delete
  32. Sofia, este tutorial é tão mas tão útil!! Há imenso tempo que andamos a pensar em tornar o nosso blog em bilingue, mas ainda não tínhamos encontrado o método que funcionasse na perfeição para nós (tudo no mesmo post ficava demasiado longo, com duas colunas não parecia adaptar-se assim muito bem ao nosso estilo e através das etiquetas levantava demasiados problemas). Mas esta opção é mesmo perfeita! Vamos experimentar implementá-la! Muito obrigada pela ideia e pelo código ;)

    So temos uma dúvidazinha:
    Como na maior parte dos blogs, temos várias imagens intercaladas com texto, em cada post. Neste caso, copiamos o texto + o código de cada imagem para as duas línguas, certo? Ou seja, no teu código irá aparecer:

    (...)

    PORT
    Imagem
    PORT
    Imagem

    (...)

    EN
    Image
    EN
    Image

    (...)

    Ou existe uma maneira melhor de o fazer?

    Beijinhos,
    Tiago e Catarina

    ReplyDelete
    Replies
    1. Olá, Tiago e Catarina! :)

      Mil desculpas por levar uma eternidade a responder-vos. O blog esteve em hiatus e só agora regressei à blogosfera e estou a meter tudo em ordem.
      Também experimentei esses métodos - duas colunas, etiquetas, mas nenhum deles me parecia bem.

      Respondendo à vossa questão, o que eu habitualmente faço é: Abro o editor do blogger/"mensagem nova", escrevo o post todo em português, copio todo o conteúdo (em "Redigir" ou "HTML", não importa), abro outro post onde colo essa versão em português, com as imagens, assim já fica com o código delas e depois vou apagando o texto em português, traduzindo-o.

      Espero ter respondido à vossa questão. Se surgir alguma dúvida digam! :)

      Beijinhos

      Delete
  33. realmente já me tinha questionado como isto se fazia, eu escrevo nas duas línguas e tudo corrido, master de fazer 3 posts diferentes e copiar códigos parece dar tanto trabalho... haha quando tiver paciência hei-de experiementar. obrigada pela dica!

    beijinho,
    Moi by Inês

    ReplyDelete
    Replies
    1. Não tens necessariamente que fazer 3 posts, Inês. eu é que me habituei assim. É uma questão de experimentares e ires afinando como te der mais jeito. :)

      Beijinhos

      Delete
  34. Super útil! Muito obrigada pela ajuda!

    https://foxwhisper.blogspot.pt/

    ReplyDelete
    Replies
    1. De nada, Iolanda! Ainda bem que te foi útil! :)

      Delete
  35. Eu usei e é muito útil, mas no caso do meu blogue, onde costumo fazer quebra de página (deixar um excerto do post e os interessados continuam a ler ao clicar para ler mais) ele apenas funciona depois de estar na página do post, ou seja, ele não traduz o excerto, apenas o post inteiro.

    Claro que isso nem é um problema grave, apenas deixei um aviso a dizer que só funciona depois de clicar em "Ler mais".

    De resto é muito útil e comecei a usar, inclusive partilhei num grupo de bloggers em que participo no Facebook (espero que não te importes), obrigada! ^^

    Unicorns and Chill

    ReplyDelete
    Replies
    1. Olá Bea!
      Obrigada pelo teu feedback em relação à tua experiência a usar este script no teu blog e pela tua partilha no grupo de bloggers! :)
      É uma pena que resulte desta forma em blogs com quebra de página nos posts. Até à data não sei como resolver isso :/.

      Delete
  36. Olá, tudo bem? Adorei o post! Eu uso o Wordpress e tentei utilizar o código. Infelizmente, não está funcionando. Você poderia me ajudar? Em visualizar, aparece para clicar em português/inglês, porém ao postar, nada acontece.

    ReplyDelete
    Replies
    1. Olá! :)

      Testei o código do seu post nesse blog no blogger e removendo a primeira linha do código - "<div dir="ltr" style='text-align: left;" trbidi="on">" já funciona!

      Delete
  37. Thanks a lot for sharing this! It´s working and is amazing!

    ReplyDelete
    Replies
    1. You're welcome! Thanks for your feedback! :)

      Delete
  38. Thank you! That's exactly what I was looking for :) I tried it and it works. Here is my bilingual article if you want to take a look: https://thecemeteryofbook.blogspot.ro/2016/11/tag-book-sacrifice_26.html :D

    ReplyDelete
    Replies
    1. You're welcome, Mihaela! I'm very glad it was helpful to you and of course I'll take a look! :)

      Delete
  39. Graciasssss!. Eres mi ángel. :-)

    ReplyDelete
  40. No wordpress existe o Polylang, que acho que funciona exatamente como o código que criaste. Mas ainda não experimentei. Quando tiver tempo, vou dar-lhe uma oportunidade :)

    ReplyDelete
    Replies
    1. Bem me parecia que a ferramenta era semelhante! :) Qualquer dia ainda espreito o wordpress para conhecer melhor essas funcionalidades.

      Delete
  41. Olá Sofia! Antes de mais, parabéns pelo post! Estava a procura de um modo de tornar o meu blogue bilíngue há tempos e felizmente encontrei o teu post. Tenho umas questões a colocar no entanto. Caso consiga fazer a alteração, terei de mudar manualmente todos os meus posts anteriores correcto? E sempre que redigir um novo post terei de inserir esse código certo, tendo o cuidado de alterar sempre a data?
    �� Obrigada.

    ReplyDelete
    Replies
    1. Olá, Jú! :)
      Muito obrigada! Fico muito contente por saber que este meu post te ajudou!

      Sim, será necessário editares os posts anteriores se quiseres torná-los bilingues com este script. É isso mesmo, sempre que redigires um novo post inseres novamente o código. Alterar a data seria particularmente importante se o layout do teu blog fosse como o meu (que não insere linhas de quebra nos posts e por isso não tem um link "Ler mais" para se ler o post na íntegra), mas se eventualmente um dia mudares de template para um que não tem essa particularidade para se continuar a ler, o código de um post pode interferir com o do post anterior, porque o comando do script acaba por dar essa indicação à página toda em vez de apenas a esse post específico, portanto os botões deixam de funcionar.
      Então recomendo a fazer-se a alteração da data sempre para salvaguardar uma alteração de layout para um destes em que isso seria sempre necessário!

      Espero ter sido clara, e se ainda tiveres alguma dúvida diz, sim? :)

      Um beijinho

      Delete
  42. Hello Sofia,
    really really thank you! I´ve been fighting with the bilingual schizophrenia (Czech/English) of my blog post and your solution solved my problem! Once again - thank you!!!
    PS: here is my first blogpost with CZ/ENG button.
    https://adinajustina.blogspot.ch/2016/12/activities-for-kids-candle-dipping.html

    ReplyDelete
    Replies
    1. Hello!
      Thank you so much for your feedback and sharing your blog post! It's always nice to see how it has been useful for someone!
      You're welcome! :)

      Delete
  43. Adoreiiii... Muito obrigada Sofia por compartilhar esse magnifico código..kkk
    Que bom que encontrei seu blog, ja estou amando.
    Beijinhos ♥ ♥ ♥ do Adorável Design

    ReplyDelete
    Replies
    1. Muito obrigada pelo seu feedback! :D
      Beijinhos

      Delete
  44. Muito obrigada Sofia! Foste bastante clara. Por acaso tenho andado a procura de um novo layout para o blog, e a tua explicação irá ajudar na escolha do mesmo.
    Beijinhos e continua com o óptimo trabalho.

    ReplyDelete
  45. Sofia, tudo bem? Fiquei sua fã! rsrsrs... Mas creio que não tenha funcionado no meu blog. Fiz 3 postagens e inseri o código, mudei as datas conforme mandaste e a postagem aparece inteira, tanto em Inglês quanto em Português e eu notei que o código que você disponibilizou é diferente do que você está usando no seu vídeo, falta uma parte do começo. Meu blog é o http://www.solteirasnoivascasadas.com/ , por favor, note a segunda postagem, ela deveria aparecer em apenas uma língua mas ficou extensa aparecendo nas duas línguas ao mesmo tempo.


    Todas estas partes show_21_06_2014 e esta outra sh1_21_06_2014 eu mudei a data para o da postagem, tipo: show_27_12_2016 e sh1_27_12_2016. Fiz certo ou errado?

    Quando eu clico para modificar a linguagem, o post fica certo, fica apenas em uma língua.

    Peço que me ajude!!! Muito obrigada! Ah, e se quiser enviar algo por e-mail, pode ser para este: solteirasnoivascasadas@hotmail.com

    Beijos!!!

    ReplyDelete
    Replies
    1. Olá, Luh! De facto o código está ligeiramente diferente no vídeo em relação ao código disponibilizado, mas apenas removi algumas linhas desnecessárias, que não fazem diferença alguma.

      Entretanto vou responder-te à mensagem enviada para o facebook do blog!

      Delete
  46. Outra coisa que esqueci de citar... Eu inverti o Ler em Português e o Read in English. Tem algum problema? É por isso que está dando erro? Beijos e obrigada!

    ReplyDelete
  47. Hello can u email me the codes to jzcarrental@gmail.com

    ReplyDelete
    Replies
    1. If you carefully read this blog post you'll find the code! ;)

      Delete
  48. Obrigada por esta partilha preciosa! Costumo usar um botão de ler mais na maior parte das publicações porque não gosto de as ver tão grandes e, de facto, nesse género de publicações, se estiveres a ver na página inicial do blog, carregar em "read in english" não mostra o texto em inglês, só mesmo quando abres o post completo é que a tradução funciona. Só implementei o código, até agora (vou implementar em alguns mais antigos entretanto), num post, por isso aquilo que fiz foi colocar um aviso ao pé do "read in english" a advertir para clicarem primeiro no ler mais e só depois no read in english.

    De resto funciona na perfeição! Obrigada :D


    A Sofia World

    ReplyDelete
    Replies
    1. Olá, Sofia! :)
      Fico muito contente por saber que este script te foi útil e que contornaste essa questão fazendo a advertência!
      Muito obrigada por me dares o teu feedback!

      Delete
  49. Adorei este post Sofia! Andava mesmo à procura disto :) segui-te *

    thebrunettetofu.blogspot.pt

    ReplyDelete
    Replies
    1. Fico muito contente por este post te ajudar, Raquel!
      E obrigada por ficares a acompanhar-me por aqui! :)

      Delete
  50. Obrigada pelo post e pelo codigo, andava pesquisando sobre o tema e cheguei aqui, muito útil :)

    Só uma dúvida, meu marido quer um blog bilingue, mas em português e espanhol... como posso fazer?

    Muito obrigada :)

    ReplyDelete
    Replies
    1. Olá Ceffita!
      Obrigada pelo feedback! :)
      O método será exactamente o mesmo, basta que no código, onde se lê "EN" ele inclua o post em espanhol.

      Delete