Image may be NSFW.
Clik here to view.
Now that you have a translated version of your website, you certainly want to link it to your website so that foreign guests can easily reach the version which is in their language.
If you are a user of Overblog, click here for the detailed procedure to follow. For WordPress users, it is right here.
For other websites, several solutions exist, but we recommend you the creation of small flags in the header (as on Flavius website), by adding an HTML code in your website.
Here is a “ready for use” HTML code. You just have to adapt and insert the portions of the code below in your header:
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; ” alt=”Reverso Localize” / >< / 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; ” alt=”Reverso Localize” / >< / 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; ” alt=”Reverso Localize”/ >< / 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;” alt=”Reverso Localize” / >< / 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;” alt=”Reverso Localize” / >< / a>
For those who are more familiar with HTML and wish to personalize the flags, here is a collection on Iconfider.
For info, there are other more or less creative possibilities to do so, but here are some traps to avoid:
- Put the links in a post of your blog: as soon as this one disappears from your homepage, they won’t be visible anymore
- Put the address of your translated website as the title of a post
We hope that this article was useful to you.
Do not hesitate to grade it and to make comments.
If you wish more details on a precise point, do not hesitate to contact us at flavius@reverso.net.