How to create multi language posts in Blogger

tags: , ,
Even though Blogger is indeed very user friendly if you need to quickly set up a blog, I was not able to find any plugin or option to have my posts both in English and in my native language (Brazilian Portuguese).

As such, how can you create a multi language post in Blogger?

First, it is worth mentioning that unless you want an automatic half-assed translation, you will need to manually prepare each post in the languages you intend to publish.


Setting up the magic

1. Enable the JQuery support in Blogger, as we mentioned in our post: Adding JQuery support on Blogger

2. As mentioned, you will need to prepare two versions of your post, one for each language. Once you are done, click on the HTML button of your edit post page.



3. You will now divide your post in two sections, using a <div> tag for each block of text, closing the portion of each respective language portion with a </div>. You will also need to include three classes in this <div> tag: a "lang" class, a "lang_" class followed by the letters representing the language you need and, finally, a "posttitle" class which will contain the title of your post in each language. One of such <div> tags will need to have a "display" set to none, or your post will display both languages at once. Complicated? Follow the template below:


1
2
3
4
5
6
<div class="lang lang_EN" posttitle="YOUR POST TITLE IN ENGLISH">
HERE GOES THE ENGLISH PORTION OF YOUR POST
</div>
<div class="lang lang_PT-BR" style="display:none;" posttitle="YOUR POST TITLE IN PORTUGUESE">
HERE GOES THE PORTUGUESE PORTION OF YOUR POST
</div>

4. Go to the "Layout" section of your blog, and add a gadget wherever you want the translate option to appear. Choose the HTML/Javascript option.



5. You can put something like "English - Portuguese" as the gadget title or whatever you want, as long as you add the following as the code content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<script>
    $(function() {
        $(".multilanguage").on("click", function(){
            var language = $(this).attr("language");
            $(".lang").css("display", "none");
            $(".lang_"+language).css("display", "block");
            $(".post-title").each(function(){
                $(this, 'a').text($(this).siblings(".post-body").find(".lang_"+language).attr("posttitle"));
            });
        });
    });
</script>
<div style="width:100%;text-align:right">
<img class="multilanguage" id="btn_EN" language="EN" src="SOURCE-ADDRESS-FOR-ENGLISH-FLAG-IMAGE" style="cursor: pointer; height: auto; width: 20px;" title="English" />
<img class="multilanguage" id="btn_PT-BR" language="PT-BR" src="SOURCE-ADDRESS-FOR-BRAZIL-FLAG-IMAGE" style="cursor: pointer; height: auto; width: 20px;" title="Portuguese" />
</div>

6. Note that the source path for each image you will use in the code above must be customized. Please refer to our other post on How to host an image at Blogger

7. After that, you will see that we will have a gadget in our blog which can change the post content to show the desired language.

8. With this you should be able to read all your posts in English and your native language. Note that even though your posts will be made in both languages, other elements of your blog will remain in the chosen language according to Blogger configuration.
Posted