Monday, June 18, 2012

Multilanguage Posts in Blogger

A common use-case is the one where we want to broadcast multiple language content on a blog.

Blogger itself does not provide such a facility, but I'm here presenting a javascript hack which allows posts to be written in multiple languages, and have flags on top of the page to switch among them.

First of all, you have to write within a single post a different version for every language which you want to support. To do this, you must first set the correct environment. When editing a post, you should switch to HTML view first:


Then, suppose you are writing content in Italian and English, you should add this skeleton:

<div class="lang:italian">
Questo è del contenuto in Italiano
</div>
<div class="lang:english">
This is English content
</div>
Then, switching back to Compose mode will show you the two sentences. Replace them with the actual content you want to display in your blog post.

Then, go to the Layout Editor of your blog and add a new HTML/JavaScript block on top of your blog posts:



Enter there the following code:

<script language="Javascript">
function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
                node = document;
        if ( tag == null )
                tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
        for (i = 0, j = 0; i < elsLen; i++) {
                if ( pattern.test(els[i].className) ) {
                        classElements[j] = els[i];
                        j++;
                }
        }
        return classElements;
}

function show_en() {
        var it = getElementsByClass('lang:italian', null, null);
        var en = getElementsByClass('lang:english', null, null);

        for(i = 0; i < it.length; i++) {
                it[i].style.display = 'none';
        }

        for(i = 0; i < en.length; i++) {
               en[i].style.display = 'block';
        }
}

function show_it() {
        var it = getElementsByClass('lang:italian', null, null);
        var en = getElementsByClass('lang:english', null, null);

        for(i = 0; i < it.length; i++) {
                it[i].style.display = 'block';
        }

        for(i = 0; i < en.length; i++) {
               en[i].style.display = 'none';
        }
}

</script>


<a href="#" onclick="show_en();"><img src="PATH-TO-EN-FLAG" /></a>
<a href="#" onclick="show_it();"><img src="PATH-TO-IT-FLAG" /></a>

This adds at the top of you posts two flag images, which can be clicked, showing either italian or english content. Now, the last bit of editing entails activating either language as the default one (otherwise, you will see both languages, until one of the two flags is clicked).

To do so, open you Blog's model editor and click "Edit HTML".


A popup telling you about the dangers of this operation will show up. Tell blogger to take it easy, and start editing your model. You should find the <body> tag, and add the following attribute in it:
onload='show_en();'

Selecting which is the default language which you want to display.

For a live preview of how this works, point your browser to CranEntertainment's blog!
Written by Alessandro Pellegrini at 5:45 PM
Tags: , ,
Posted from Via Nicola Salvi, 00184 Roma, Italia

89 comments:

  1. JoanneJune 27, 2012 at 1:37 AM

    Hi, I've been trying this out and I was wondering How I can change the Italian flag to a German flag. And when I was trying to edit the HTML I wasn't sure where the BODY tag was to add the "onload='show_en();'". Any advice would be appreciated. Also, how would I go to add 3 or 4 flags?

    ReplyDelete
  2. Alessandro PellegriniJune 27, 2012 at 5:24 PM

    Hi there!

    To change language flags, just look at lines 47 and 48 in the longest code snippet in the post. You will find code like this:

    < img src="PATH-TO-EN-FLAG" / >

    There, you can replace PATH-TO-EN-FLAG with any link pointing to an image of your desired flag. This can be an image even on a site different from the blog you are embedding the code into.

    As for the second question, when you open up the HTML editor of your template, you will find plenty of code. Just search the text "' at the end) and you will find the only body tag in the document.

    If you want to add more languages, you have to include more functions like show_en or show_it. I'm giving you an example here. Suppose you are dealing with english, german, italian, and spanish. You can write, for example, show_de like this:

    function show_ide() {
    var en = getElementsByClass('lang:english', null, null);
    var de = getElementsByClass('lang:german', null, null);
    var it = getElementsByClass('lang:italian', null, null);
    var es = getElementsByClass('lang:spanish', null, null);

    for(i = 0; i < de.length; i++) {
    de[i].style.display = 'block';
    }

    for(i = 0; i < it.length; i++) {
    it[i].style.display = 'none';
    }
    for(i = 0; i < en.length; i++) {
    en[i].style.display = 'none';
    }
    for(i = 0; i < es.length; i++) {
    es[i].style.display = 'none';
    }

    }

    As you can see, you have a variable for each language, one for loop for setting the display attribute as 'block' (i.e., shown), and three (for the other languages) which set the display attribute to 'none' (i.e., not shown).

    Then, you must provide flags for every language, and divs for every language in your posts.

    I hope this helps! If you need further assistance, feel free to ask! :)

    ReplyDelete
  3. MihkelAugust 21, 2012 at 3:14 AM

    Somehow this is not working out for me :/

    ReplyDelete
    Replies
    1. Alessandro PellegriniAugust 27, 2012 at 9:11 PM

      Do you have any additional information on what's not working? Maybe I can help you some way...

      Delete
    2. MihkelSeptember 6, 2012 at 3:54 PM

      The choose language doesn't show up anywhere.

      Delete
    3. Alessandro PellegriniSeptember 6, 2012 at 4:36 PM

      I've addedd you on G+, drop me a line if you need any help in setting this up!

      Delete
  4. UnknownSeptember 27, 2012 at 6:35 PM

    Hello. I am having a problem, how to upload images of flag??
    Where should I upload images, and how to decide the path to the images?

    ReplyDelete
    Replies
    1. UnknownSeptember 27, 2012 at 6:45 PM

      I uploaded en_flag on my post, and replace image point, but it did not work....

      http://4.bp.blogspot.com/-zHQ-6CEd-hs/UGR9cO4SYxI/AAAAAAAAABI/OZgK-aK_v5c/s1600/en_flag.png

      img src="./s1600/en_flag.png"

      Delete
    2. Alessandro PellegriniSeptember 28, 2012 at 2:42 PM

      Hi, try specifiyng the absolute path to your image, as ./s16000/ is relative to you blog's link.

      Try this:

      img src="http://4.bp.blogspot.com/-zHQ-6CEd-hs/UGR9cO4SYxI/AAAAAAAAABI/OZgK-aK_v5c/s1600/en_flag.png"

      Let me know! :)

      Delete
    3. Alessandro PellegriniSeptember 28, 2012 at 2:44 PM

      You can upload images on any host (list imageshack) or even google picasa, then visualize it, and right click it to copy the Image's URL!
      That's what you must place in img src="..."!

      Delete
  5. UnknownSeptember 28, 2012 at 8:44 PM

    Dear Alessandro

    Thank you for your response, however I can not fix it.
    I tried the absolute path as your instruction, but there is no image still.
    http://4.bp.blogspot.com/-zHQ-6CEd-hs/UGR9cO4SYxI/AAAAAAAAABI/OZgK-aK_v5c/s1600/en_flag.png

    Plus, I add a tag into "body", but still both language is shown on my post.

    I am so sorry, but I need your help.

    ReplyDelete
  6. CesareOctober 26, 2012 at 5:15 PM

    ciao Alessandro, a me non funziona. ancor prima di impostare la lingua di default, non vedo proprio comparire le bandierine dopo aver inserito il gadget html/javascript.

    Perche'?

    ReplyDelete
    Replies
    1. ClaudioNovember 22, 2012 at 10:44 PM

      Probabilmente perché nel copia incolla la porzione di codice relativa alle immagini delle bandiere (questa, per intenderci: a href="#" onclick="show_en();"....) deve andare dopo la chiusura dello script, ovvero dopo (/script)

      Ne approfitto anche per ringraziare Alessandro per l'ottimo spunto, ma devo assolutamente un modo per velocizzare il tutto!

      Delete
    2. Alessandro PellegriniDecember 4, 2012 at 5:50 PM

      Sì è esattamente così, mi era saltato quel tag di chiusura nel formattare il codice per il post del blog...

      Grazie per la segnalazione, ho corretto!

      Mi rendo conto che non è il metodo più efficiente per fare un blog in più lingue, purtroppo... :(

      Delete
  7. My technologic cornerNovember 1, 2012 at 11:35 PM

    Hello to everybody!

    I made a proof basing in your code for getting mutilanguage... and It works!!

    Here is the code....


    (script language="Javascript")

    function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
    node = document;
    if ( tag == null )
    tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
    for (i = 0, j = 0; i < elsLen; i++) {
    if ( pattern.test(els[i].className) ) {
    classElements[j] = els[i];
    j++;
    }
    }
    return classElements;
    }

    function show_en() {
    var es = getElementsByClass('lang:spanish', null, null);
    var en = getElementsByClass('lang:english', null, null);

    for(i = 0; i < es.length; i++) {
    es[i].style.display = 'none';
    }

    for(i = 0; i < en.length; i++) {
    en[i].style.display = 'block';
    }
    }

    function show_es() {
    var es = getElementsByClass('lang:spanish', null, null);
    var en = getElementsByClass('lang:english', null, null);

    for(i = 0; i < es.length; i++) {
    es[i].style.display = 'block';
    }

    for(i = 0; i < en.length; i++) {
    en[i].style.display = 'none';
    }
    }

    function init()
    {
    var language = window.navigator.userLanguage || window.navigator.language;
    alert(language);
    /* Spanish language*/
    if (language.toLowerCase().indexOf("es")!= -1)
    {
    show_es();
    }
    /* English and default language*/
    else
    {
    show_en();
    }
    }
    window.onload = init;
    (/script)

    ReplyDelete
  8. Liz LuedemannNovember 28, 2012 at 12:44 AM

    Hi Alessandro,
    I tried this on my blog and the flag icons don't appear either...I tried several images, I don't know what the problem may be. Maybe it has to do with the blogger template?
    http://www.gluecklichehaut.blogspot.fr/

    ReplyDelete
    Replies
    1. leafwindNovember 28, 2012 at 9:35 AM

      Hello, maybe you can try to add:

      </script>

      before:

      <a href="#" onclick="...

      I think this part of the original code is missed.

      Delete
    2. Liz LuedemannNovember 28, 2012 at 10:57 AM

      Hello YU-Ming, thanks so much! This solved the problem!

      Delete
    3. Alessandro PellegriniDecember 4, 2012 at 5:49 PM

      Hi Yu-Ming, you are right, when I copied that code snippet in my blog post I missed che closing script tag. I have now fixed this in the original post!

      Thanks for your suggestion!

      Delete
  9. Nina SatragnoDecember 17, 2012 at 7:00 PM

    Awesome! The code works great, and it wasn't hard to figure out which parts to change.

    ReplyDelete
  10. UnknownDecember 25, 2012 at 11:04 PM

    Hi! Thank you for this post, everything is working perfect on my blog except for the last step :S I don't know why I can't find < body > on my html view... I have found anothers "body" and if I try to write it on them it transform in " onload='show_en();' ".
    So if you can give me some advice or tell me more specifically where to put it, it will be great!
    Thank you!

    ReplyDelete
    Replies
    1. Alessandro PellegriniDecember 27, 2012 at 4:31 PM

      Hi Javier,
      I've inspected your blog's code. You should look for < body class='loading' > and add the onload stuff before the closing >.

      By the way, I've seen that you have work-arounded by adding a second definition of the body tag to add the onload java command. I suggest you to delete this work around, as that is non-standard html and it might render badly on some (older) browsers.

      Hope this helps!

      Delete
    2. UnknownDecember 27, 2012 at 4:56 PM

      I think I have done what you said (I'm not really good at HTML xD) and it works perfect! Thank you again!

      Delete
  11. crgbJanuary 3, 2013 at 1:56 AM

    Hi Alessandro,
    how do you control the title of the post? the post itself can be manage by html code but the title?

    ReplyDelete
    Replies
    1. Alessandro PellegriniJanuary 4, 2013 at 3:13 PM

      Hi Carlos,
      a post's title is simply an h3-tagged text in a div...
      So, although I did not try this, you might try to put something like:

      < div class="lang:english" >English Title< /div >
      < div class="lang:italian" >Titolo in italiano< /div >

      As your title.

      Please note that this will render as:

      English TitleTitolo in italiano

      until the page is fully loaded by your browser and the code in the body tag is evaluated. Unfortunately, there is no work around to this.
      Note that in some browsers, this might produce a (negligible?) extra spacing in the title.

      Hope this helps, and let me know if this actually works!

      Delete
    2. UnknownOctober 1, 2013 at 4:49 PM

      Hmm, trying to get this to work, where do you actually put the code for titles?

      Delete
    3. LastWildJanuary 1, 2014 at 9:25 PM

      I LOVE this post, it helped me a lot! Tried this title-solution, and if I use style="display:none", the loading time won't bug in the title. One problem I found, that sometimes, not always, I need to click twice on the second language flag to make it work (it "jumps" back to the English page"). I bet there's no solution for this one...

      Delete
    4. AnonymousMay 14, 2014 at 8:06 AM

      Hi!... I have same problem about title to. Somebody can get more detail about method to solve?

      Delete
  12. Old Red BarnJanuary 15, 2013 at 10:24 AM

    Hi Alessandro

    Thank you for this tutorial. I was really helpful until the last step. I can't find 'body'.

    Goedele

    ReplyDelete
    Replies
    1. Alessandro PellegriniFebruary 11, 2013 at 11:54 AM

      Hi! Did you manage to make it work?
      If not, try searching for this tag, which seems to be the most common on blogger:
      < body class='loading' >

      Let me know!

      Delete
  13. Stef HJanuary 29, 2013 at 4:02 PM

    Thanks, Alessandro! I got it and I don't know much about HTML. This was a huge help. :)

    ReplyDelete
  14. UnknownFebruary 4, 2013 at 5:31 PM

    Hi Alessandro!
    I'm going to start a blog, but I'm still working out the details and this is perfect for it.
    Everything worked fine until de html editor part because I can't find body tag.
    Here is the link to my blog: http://musingsandcupcakes.blogspot.pt/
    Can you help me please?
    Thanks

    ReplyDelete
    Replies
    1. Stef HFebruary 7, 2013 at 1:52 PM

      Hello Daniela!

      I'm not Alessandro, but I read you're not the first person to have a problem with this. Here's what I did:
      First of all, it seems depending on your blog the body tag has several attributes (at least in my case), so it's hard to make out like that. When looking at the HTML, you can open a little search field for the site by pressing 'ctrl' + 'g' at the same time. In there you can type "<body" (without the inverted commas) and it will highlight the body tag for you. Then add the attribute that Alessandro mentions before the closing arrow bracket, and there you go. :)
      Hope that helps and good luck with your blog!

      Stef

      Delete
    2. UnknownFebruary 8, 2013 at 7:32 PM

      Hi Stef!
      Thank you for your tip. Actually, I already did that. Although I found A body tag, there's other code with it and I tried to put the code that Alessandro wrote in it, I even tried it in several diferent places, always before the closing arrow, but it didn't work, it always gave me a error message. Alessandro already told me he was going to take a look at it. I hope he can find a solution, because this would be absolutely perfect for me.
      Thanks so much for your help anyways. :)
      Thanks! :)

      Delete
    3. Stef HFebruary 9, 2013 at 11:03 AM

      You're welcome (too bad I don't have any more tips though). I hope you can get it to work; I'm happy with the solution for my blog. :)
      (By the way, I was curious and did take a peek at your cupcakes. If you checked your blog stats and wondered where that click from Germany came from ... that was me ;) )

      Good luck!

      Delete
    4. Alessandro PellegriniFebruary 11, 2013 at 11:48 AM

      Hi Daniela,
      I've looked at your blog's code and I have found this tag:
      < body class='loading' >

      which should be altered as

      < body class='loading' onload='show_en();' >

      Is that what you tried? If so, what is the error message which you are getting? From that, we can try to find a solution!

      Delete
  15. UnknownFebruary 11, 2013 at 5:42 PM

    Hi Alessandro!

    About the error message, I'm sorry but I don't remember what appeared.

    So I think I found the tag you're talking about, but it's slightly different though:

    < body expr:class='"loading" + data:blog.mobileClass' >.

    I erased this one and put yours. No problem there.
    Now everything seems fine, but I posted a test post to see if it worked, but it doesn't change from one language to another, it just displays both. I'm probably doing something wrong, but I don't know what. I'm so sorry I'm bothering you again.

    Thank you for your help and patience.

    Hey Stef!
    I actually wondered that, now I know!
    Shame I have not posted anything yet, but you're more than welcome to take a "peek" again, once I start blogging (which I hope it happens soon) if you want, you can leave a message there so I can check out your blog. :)

    Thanks and good luck for your blog too.


    .

    ReplyDelete
  16. Mark B.February 13, 2013 at 1:30 AM

    Nice code. 'Twas quite helpful.

    The only thing severly missing is a function to set cookies, so the language doesn't default on page reload.

    ReplyDelete
    Replies
    1. UnknownJanuary 31, 2015 at 9:30 AM

      thank you for the code Alessandro, but any solution for this "bug" that The Amercanized Gamer reports?

      Delete
    2. Lauren EnghienNovember 27, 2015 at 12:18 PM

      This comment has been removed by the author.

      Delete
  17. EmilianoFebruary 20, 2013 at 4:13 PM

    Ciao Alessandro,
    ho provato ad inserire il tuo codice nel mio blog, ma purtroppo non riesco a farlo funzionare.
    Per prima cosa ho creato un post di prova, poi ho inserito il widget delle bandiere ed infine ho provato ad inserire l'ultimo codice nell'html del blog.
    Sfortunatamente il widget non è apparso ed il post di prova era scritto in due lingue differenti.
    Sapresti dirmi il perchè? Se ti servono più informazioni fammi sapere!
    Grazie mille! :)

    ReplyDelete
    Replies
    1. EmilianoFebruary 20, 2013 at 6:31 PM

      Per quanto riguarda le bandiere sono riuscito a risolvere, ma comunque non riesco a far funzionare il widget!

      Delete
    2. EmilianoFebruary 28, 2013 at 5:27 PM

      Allora, sono riuscito a farlo funzionare, il problema è che nella home page il testo mi appare sia in inglese che in italiano, mentre se apro il post e scelgo la lingua da impostare funziona. E' possibile che il problema sia il link "continua a leggere"?
      Sinceramente non so a cosa mettere mano!!

      Delete
  18. AnonymousFebruary 24, 2013 at 11:45 AM

    Sounds great...will try it out. Thanks for sharing.

    ReplyDelete
  19. Learn AndroidFebruary 26, 2013 at 1:42 PM

    Doesnot work for me :(

    ReplyDelete
  20. UnknownFebruary 26, 2013 at 9:52 PM

    Hi Alessandro,

    I have followed the steps in your post and managed to get the flags up (French and English) but when I publish a post up it shows both languages in the same post and not under each flag".

    Please could you let me know what I should do in order to have the french show in the french section and the english in the english section.

    Many thanks in advance

    ReplyDelete
  21. danolaMay 17, 2013 at 9:08 PM

    Hello,
    thank you for sharing.
    I've tried this out, and it looks ok to me.
    The only thing is that I do not want to use a hyperlink to a flag for the language selection. Instead I want to select the language simply by clicking on a text that says "english".
    So instead of using the "a href etc..." command I thought I could use something like:
    "input type="button" value="english" onclick="show_en();"/ ".
    But that does not work. The buttons seem to be inactive.
    Can anyone make something out of this? I know nothing about HTML :(

    Many thanks
    xan

    ReplyDelete
  22. Clément EbazJuly 8, 2013 at 2:03 PM

    Hi there, and thanks a lot for sharing this Alessandro !!! I was alble to translate all the website : http://www.themeanwhileproject.com/
    Just one problem appears... When I go on the website, we can see all languages during on second, and then just english.
    Is there any way to avoid this, and directly have only english ?

    ReplyDelete
    Replies
    1. Alessandro PellegriniJuly 9, 2013 at 6:21 PM

      Hello there!
      I'm happy to see that you succeeded in using this code snippets to translate your website! :)

      Unfortunately the delay which you see is related to the way the onload predicate is evaluated. That is, the code to set english as a default language is executed only when the page is fully loaded, and the map which you are displaying gives a non-negligible delay.

      To overcome this issue, you can manually set the div style attribute to display:none.

      That is, you leave as you have the html code for the english language, and the blocks which have other languages should be changed like this:

      <div class="lang:french" style="display:none">

      Let me know if this solves your problem!

      Delete
    2. Clément EbazJuly 9, 2013 at 10:52 PM

      Ok! First I did not understand where to add the style="display:none", then I realised it was in the html code of the message. It works perfectly, thanks you very much Alessandro!!!

      By the way, one more question if you mind answering: Do you know any way to lock the language chosen for every visited pages?

      Delete
    3. Alessandro PellegriniJuly 11, 2013 at 9:22 AM

      Hi there,
      I see that could be an interesting and useful thing!

      The easiest way I can think of is using cookies. You can check this page if you want to see how to set and retrieve cookie values in Javascript:
      http://www.w3schools.com/js/js_cookies.asp

      You might set up your code as this: in each function which is setting the language you can call the function setCookie() presented in the link above to store the language name (you can choose whatever name you want for the cookie).

      Then, in the onload function, you can insert a code similar to the checkCookie() one: you check if the cookie is set. If so, you call the function to set the language accordingly. If it is not set, you do nothing.

      Note that this approach will suffer from the delay in setting the language that you experienced before. Actually, using this kind of approach there is nothing you can really do about it, but according to me it's the neatest solution...

      Let me know if this works for you. I'll eventually update my blog post to insert this, because it can be really useful!

      Delete
    4. Clément EbazJuly 11, 2013 at 4:14 PM

      This comment has been removed by the author.

      Delete
    5. Clément EbazAugust 3, 2013 at 12:55 AM

      This comment has been removed by the author.

      Delete
    6. Clément EbazAugust 3, 2013 at 12:58 AM

      This comment has been removed by the author.

      Delete
    7. Clément EbazAugust 3, 2013 at 12:59 AM

      Hi Alessandro, tips for you!
      So, I've translated my website in twelve languages thanks to your tutorial (and the help of kind translators), thanks again.
      The pages titles are translated with no extra spacing, and no "English TitleTitolo in italiano" untill the page is fully loaded. Here's how I wrote the titles of the homepage for instance:

      "< div class="lang:english">- Home // Map -< /div>< div class="lang:french" style="display:none">- Accueil // Carte -< /div>< div class="lang:yugoslavian" style="display:none">- Početna // Karta -< /div > et caetera"

      It works well. Then I translated the widget titles. For that you just need to go to the html code, find you widget and this line:

      < h2>< data:title />< /h2>

      Replace "< data:title/ >" by an html writting, like this :

      "< h2>< div class='lang:english'>Most popular locations:< /div>< div class='lang:french' style='display:none'>Endroits les plus populaires :< /div >< /h2> et caetera"

      Here's the result on my blog if you want to check:
      http://www.themeanwhileproject.com/

      Still a problem: I don't know at all how to add cookies and it seems you have an idea about that. Can you try something or at last post the code you're thinking about?

      Good evening, see ya!

      Delete
  23. UnknownJuly 9, 2013 at 7:54 PM

    Hi Alessandro
    I have searched the internet so much for help on blogger on a multi language layout and yours is the only one I could find. I am really struggling though as I am not good with html.
    I can see my Layout Editor but don't know how to add a new HTML/JavaScript block on top of blog posts.

    Many thanks

    ReplyDelete
    Replies
    1. Alessandro PellegriniJuly 11, 2013 at 9:23 AM

      Hi there,
      an HTML/JavaScript block is a simple widget provided by blogspot, so you can find them in the list of items that you can use to personalize your blog appearance (just as any other block that you can add to your blog!)

      Delete
  24. ClaireJuly 27, 2013 at 5:36 PM

    Hi !
    I've been trying to do this but I have two problems.
    First, when I try to write onload='show_en();' between "body expr:class='"loading" + data:blog.mobileClass'"this and >, it said that "Element type "body" must be followed by either attribute specifications, ">" or "/>".." so I don't really understand...
    Also, since I did those htlm thing, flags and links are above my post even if they are supposed to be next to them...
    Could you please help me ?

    ReplyDelete
  25. PedriyoAugust 13, 2013 at 2:29 PM

    Hi Alessandro!!

    First of all, thanks a lot for your post, I've been craving for something like this for a long time. Too bad there's no plugin for that yet in any blog provider (at least that I have found).

    I've added your javascript snippets into a new section called 'Languages' and it works like a charm, even with titles. But then I've seen that my 'Blog Archive' shows both titles: English, and Spanish.

    After that, I've wandered around your example's source code, and I've found out that some of the code you explained above has changed. It seems as if you've removed the title tag in the blog template, and now you add it in every post. Am I right?? It also looks like the javascript has changed (though not much).

    In case you've actually updated your workaround, it'd be nice to update the post. Or maybe there's a new post explaining the last changes. Then, please send me the link to that post =)

    Thanks!!!

    ReplyDelete
  26. DuckyNovember 14, 2013 at 12:52 PM

    Hey Alessandro!
    I used the code you wrote and managed to do everything, but the onload='show_en();' part. Whenever I try to add it before the closing > both languages are still shown on the main page, but when I select the second language, only the second one is shown.
    Can you help me? Thank you!

    ReplyDelete
  27. UnknownJanuary 14, 2014 at 4:43 AM

    Hi Alessandro, thanks for sharing..however, why my post title still visible when i clicked one of the flag? but my post article were hidden *succesfully works with your tutorial. SO PLEASEEE HELP MEEEE how to hidden my title post when one flags has been clicked?

    this is my example blog: thedini.blogspot.com

    please heelpp,...thanks :)

    ReplyDelete
  28. KrunoJanuary 21, 2014 at 3:50 PM

    dear all,
    as many of us spent some time with "body" issue, will write my solution. on my blog line was:

    body expr:class='"loading" + data:blog.mobileClass'

    and changed to:

    body expr:class='"loading" + data:blog.mobileClass' onload='show_hr();'

    to show croatian. to show english:

    body expr:class='"loading" + data:blog.mobileClass' onload='show_en();'

    so, just put your lang insteed xx in onload='show_xx();'

    and many thanks to alessandro, grazie!

    ReplyDelete
    Replies
    1. UnknownMay 27, 2014 at 6:49 PM

      it doesn't work with me, i have the two langueages at the same page:(

      Delete
    2. Armelle July 18, 2015 at 12:15 AM

      This comment has been removed by the author.

      Delete
  29. ArtAndPapercraftsMarch 6, 2014 at 11:11 AM

    This comment has been removed by the author.

    ReplyDelete
  30. ArtAndPapercraftsMarch 6, 2014 at 11:17 AM

    Ciao Alessandro,
    so che questo post è un po' datato, ma spero riuscirai a rispondermi lo stesso.. :)

    Ho seguito passo passo le istruzioni per impostare la doppia lingua inglese-italiano ed è andato tutto benissimo fino al famoso "body"

    Nel caso del mio template il codice all'interno di <> è body expr:class='"loading" + data:blog.mobileClass'

    Ho provato a inserire il tuo onload='show_en();' all'interno in tutte le posizioni possibili, all'inizio al centro alla fine, ma ogni volta mi segnala errore..
    In particolare, se lo posiziono alla fine mi dice che "body" deve essere seguito da ">" oppure "/>" e non capisco perchè mi dia questo errore, visto che inserendo il tuo codice non ho cancellato il simbolo ">" che chiude il codice preesistente..

    Puoi darmi una mano? ;(

    ReplyDelete
  31. JackSApril 21, 2014 at 1:52 AM

    Nice! This is my implementation with little changes:
    http://jackscode.blogspot.com.br/

    Flags at a side, every < div > that's not the "default" language has a "display:none" attribute
    < div class="lang:english" >< / div >
    < div class="lang:spanish" style="display: none;" >< / div >
    < div class="lang:portuguese" style="display: none;" >< / div >
    that I doesn't need mesh with the blogs internal code, and the text in not-default languages not start appearing and then disappear.

    Greetings!

    ReplyDelete
    Replies
    1. Luís PinaApril 24, 2015 at 11:48 AM

      This comment has been removed by the author.

      Delete
    2. Luís PinaApril 24, 2015 at 11:49 AM

      This comment and also the post from Alessandro really helped me a lot. Thanks to both of you!

      Delete
  32. UnknownMay 27, 2014 at 6:17 PM

    hello, have the two languages at the same page
    can you help me?

    ReplyDelete
  33. Jorge PozoJanuary 9, 2015 at 11:04 PM

    Thank you. It helped me setting up my multilingual blog. Not perfect on the mobile version though (not bad either). I've linked this post there. Cheers.

    ReplyDelete
  34. Alien LegaspardJanuary 14, 2015 at 4:37 PM

    Hi Alessandro,

    thanks a lot for this, it worked perfectly for me without knowing anything about html =)

    Just one thing, as blogger is organized differently for mobiles, this solution doesn't work from a mobile, and all the text is displayed.

    ReplyDelete
  35. Daniel CampoverdeJanuary 18, 2015 at 11:08 PM

    Very usefull! thanks!

    ReplyDelete
  36. AnonymousMarch 16, 2015 at 2:00 AM

    Hey Alessandro - I wanted to thank you so much for this tutorial !!!!
    Very simple to use - thank you thank you !!!!!!!!!!

    ReplyDelete
  37. Paniti MartaApril 14, 2015 at 10:54 PM

    Hi! Thanks for the help. Te menu works fine. Btw. I don't know how to create different language titles for posts. And blog content shows in both language on stratup... Can you help me?
    My blog: www.panitimarta,com

    ReplyDelete
  38. UnknownAugust 20, 2015 at 9:23 PM

    very useful, however I wonder how can I control when I want to share a post in a specific language on social media, Facebook for example, if English is the default language I selected, then even If I want to share the same post but in Spanish on Facebook it won't work :( , any idea anyone??

    ReplyDelete
  39. EloiOctober 3, 2015 at 11:51 AM

    Thank you very much Alessandro Pellegrini,
    After searching a lot, i found your solution and it rocks!
    my blog: http://hankkeet.blogspot.com.es/

    ReplyDelete
  40. UnknownOctober 12, 2015 at 2:54 PM

    Hello everyone! If you are involved in translation projects, my suggestion is to evaluate a reliable online localization tool that will make things easier for both developers and translators. https://poeditor.com/ is such a tool equipped with many features like automatic translation, API, GitHub and Bitbucket integration, WordPress plugin created to improve users' localization workflow.

    ReplyDelete
  41. Ravindra DastikopOctober 23, 2015 at 12:15 PM

    Hello Alessandro

    Thanks for this tool.

    is there any way to get content of two languages side by side ie. in 2 columns

    ReplyDelete
  42. AnonymousDecember 14, 2015 at 3:11 AM

    Hi Alessandro! thank you for this really helpful post, I wish you or any of you guys can help me finding where should I put the onload='show_xx();' because it keep showing both languages in my post. Thank you guys my blog is here: http://paoetchic.blogspot.com/#
    PD: I am a newbie

    ReplyDelete
  43. Eric BJanuary 9, 2016 at 4:10 PM

    Grazie! It took me a few tries, but I think I got it

    ReplyDelete
  44. ReliscianJune 3, 2016 at 11:59 AM

    Ciao! come posso fare se ho un contenuto in comune con entrambe le lingue? ad esempio una immagine che deve comparire in entrambi i casi? grazie

    ReplyDelete
  45. UnknownApril 18, 2017 at 1:13 PM

    Eppure, dopo anni dall'ultimo post, PolyTimeNerd ancora impera.
    Bella!

    ReplyDelete
  46. Nomads TeamJanuary 24, 2018 at 11:23 AM

    How to use it in message texts on home page?

    ReplyDelete
  47. AlexSeptember 11, 2018 at 1:41 AM

    bonjour c'est ALEX j'ai un blog que je dois mettre en mode bilingue français et anglais pour tout le contenu donc si je clique sur un article en français ça doit me donner la traduction que QUAND je clique sur le bouton anglais de cet même article MAIS aussi les contenus du blog exemple MENU ,ARTICLES
    aider moi SVP

    ReplyDelete
  48. Becky LawranceJanuary 16, 2020 at 10:20 AM

    Signal offers multi-lingual documentation support to bilinguals and many other documents. We understand the needs of our customers and offer a unique solution.

    ReplyDelete
  49. productMarch 26, 2020 at 5:09 PM

    dewa poker online

    ReplyDelete
  50. AnonymousMay 26, 2020 at 9:42 PM

    best thermometer for adults

    ReplyDelete
  51. Sumit MishraNovember 15, 2021 at 2:56 PM

    Thanks for sharing useful information for us, start Teaching Languages Online with Evopry.

    ReplyDelete

Subscribe to: Post Comments (Atom)