This article is specially  addressed to the users of Overblog. We also treat more classic websites, as well as WordPress blogs.

You have just translated your blog Overblog with Flavius, congratulations!

If it is not the case, please go to this page to do it right away!

Now that the hardest part is done, foreign users that are on your website should be able to discover the language version that is directed to them.

The procedure is different depending on the type of blog you have:

-       On the old platform over-blog.com:  for those who created a blog before June, 2012

-       On the new platform overblog.com: for those who created a blog after June, 2012

The address of your blog is xxxx.over-blog.com (former platform)

1)      Insert links

You can insert links towards your translated and published websites as made by one of our users on his blog (English and Spanish translated by Flavius).

1) Go to the tab “Administration” then ”to Configure”

2) Select the module “Links”

3) Click on « Add a link »

Type in the address of the link (available on your account Flavius, Dashboard-> Details of the Project->Publication) and add the name of the language as the title of the link (preferably in the target language): Italiano, Deutsche, English …

Repeat the operation for all the links of your project.

2)     Insert flags

If you wish to add flags, which directly act as links towards your translated sites, as on the Flavius website, here is how you can proceed:

1)     Go to the tab “Administration”, ”Edit” then ”Pagination”

2)     To the left, in the ”Available Modules “, select the module ”Free Text” and make it slide under the banner

3)     Click the small hammer

4)     You can add a title to the module, as for example « Links towards my translated sites »

5)     Click « to Add an image »to add the image of the corresponding flag. If you are looking for images of flags, here is a collection on Iconfider.

6)     Once you added flags, you need to connect them to the links of your translated sites. To do so, click the image then

7)     Retrieve the address of the link from your account Flavius, Dashboard-> Details of the project-> Publication and link it to the image

8)    You can choose to show these flags only on the homepage by marking the option

9)     Validate your modifications and then go to your blog to show the result!

The address of your blog is xxxx.overblog.com (new platform)

You can include directly HTML links in your page, and integrate Flavius as you wish in your blog if you have the necessary competencies.

However, if you prefer to be guided, here is a solution which will allow you to obtain links in the form of flags in the top of your page to the left, in the header, as following:

Stage 1: preparation of the code to be inserted

1. First portion of code: corresponds to the language of translation

<a href = ” Insert here the address of your translated and published site ” ><img src = ” http: // flavius.reverso.net/img/languages/code. png ” style = ” float:left; padding-right:0px; ” title = ” name of the language ” height = ” 15px; ” / >< / a>

Replace the elements in red of this HTML portion by:

- The address of your published website (instead of: ” Insert here the address of your translated and published site ” ); you will find it on the “Job details” page,  in the section “Publication”.

-       The code of the language corresponding to the flag (instead of code): en (for English), it (for Italian), es (for Spanish), de (for German), fr (for French), ar (for Arabic), ro (for Rumanian), pl (for Polish), ru (for Russian), sv (for Swedish), pt (for Portuguese), zh (for Chinese).

- The name of the language (instead of name of the language): English for English, Español for Spanish, etc.

The field ”title ” allows your guests to see the language of translation in an tooltip when they hover over the flag.

Besides, the field ” height ” defines the size of the flags.

Important: if you translated your website into several languages, it will be necessary to insert in the header as many portions of the first code as languages of translation (see the example further).

2. The second portion of code to return to your main site

<a href =” Insert here the address of your translated site by modifying the code ” ><img src = ” http: // flavius.reverso.net/img/languages/code. png ” style = ” float:left; padding-right:8px; ”; title = ” name of the language ” height = ” 15px; ” / >< / a>

This second portion of code will allow your guests to reach your main website from the translated websites.

This time, you have to insert the address of your translated website the by replacing the code by the code which corresponds to the language of your original blog. For example, the address of your website translated in Spanish is http://fp.reverso.net/softitest-overblog/5252/es / index.html, and if your original website is in French, replace es by fr to obtain the following URL: http://fp.reverso.net/softitest-overblog/5252/fr / index.h

Then, replace code by the code corresponding to your main site (thus fr if it is in French) then the field “title “.

Example: Imagine that you have translated your French website into English and Spanish and that you want to add the links on your original website.

1. You insert the portion of code corresponding to the site translated in English, namely:

<a href = ” Address of the site translated in English ” img src = ” http: // flavius.reverso.net/img/languages/en.png ”  style = ” float:left; padding-right:0px; ” title =”English” height  = ”15px; ”/ >< / a>

2. You insert the portion of code corresponding to the site translated in Spanish, namely:

<a href = ” Address of the site translated in Spanish ” ><img src = ” http: // flavius.reverso.net/img/languages/es.png ” style = ” float:left; padding-right:0px; ”title =”Español” height  = ”15px; ” / >< / a>

3. To finish, you add the portion of code which allows your guests to return to your main site:

<a href = ” Address of the blog translated into Spanish by modifying es by fr to obtain the original site ” ><img src = ” http: // flavius.reverso.net/img/languages/fr.png ” style = ” float:left; padding-right:8px; ” title =”Français” height  = ”15px; ” / >< / a>

 Stage 2: insertion of the code

1)    From your Administrator interface, go to the tab “Theme”, “Edit”, then ”HTML”

3)     Look for the code section<div class = “header ” >(to facilitate your search, do Ctrl+F and type in <div class = ” header ” >)

4)     Insert the previous code under this section

5)     Click “Preview” and then ”Save” if the result seems correct

You can now go see the result on your site!

 For any problem…

If you have a problem, contact us or leave a comment on this page. We will be happy to assist you and your question could undoubtedly help others!