Widget Traducteur automatique dans 51 langues avec Google Traduction

Traducteur
Je vous présente aujourd’hui un nouvel outil incroyablement utile et entièrement gratuit pour votre blog/site : le nouveau traducteur de Google qui traduit automatiquement vos pages en 51 langues :
Afrikaans, Albanais, Allemand, Anglais, Arabe, Biélorusse, Bulgare, Catalan, Chinois, Coréen, Croate, Danois, Espagnol, Estonien, Finnois, Français, Galicien, Gallois, Grec, Hébreu, Hindi, Hongrois, Indonésien, Irlandais, Islandais, Italien, Japonais, Letton, Lituanien, Macédonien, Malaisien, Maltais, Néerlandais, Norvégien, Persan, Polonais, Portugais, Roumain, Russe, Serbe, Slovaque, Slovène, Suédois, Swahili, Tagalog, Tchèque, Thaï, Turc, Ukrainien, Vietnamien et Yiddish.
J’ai déjà créé un traducteur avec drapeaux, qui as eu pas mal de succès, il suffit de cliquer sur un drapeau pour traduire une page de votre blog dans une nouvelle fenêtre avec l’outil de traduction de Google.

Mais le widget que je vous présente aujourd’hui, fait beaucoup mieux : il suffit de copier un petit de code et lorsqu’un visiteur de "langue étrangère" visite votre blog/site, une barre va s’afficher automatiquement lui proposant de traduire votre blog dans sa langue.
Traducteur
Mieux encore, la traduction se fait dans la même page sans quitter votre blog (vous avez en plus un indice de progression de la traduction) et 100% du contenu de votre blog est traduit : les titres, le contenu des widgets, les commentaires....
Si votre blog est en français par exemple et qu’un visiteur "français" visite votre blog la barre ne s’affichera pas.

Démonstration:

Sélectionnez une langue avec le widget "Traducteur" en haut de cette page ....

Installation:

Connectez vous à Blogger, Allez dans "Mise en page", cliquez sur "Ajouter un gadget" puis sur "HTML/JavaScript" et copier / coller le code suivant:
<center><div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'fr'
  }, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></center>
C’est tout …
(Si votre blog n’est pas en français, remplacez fr par en pour l’anglais, es pour l’espagnol …)

Une Astuce:

Comme la barre de traduction s’affiche automatiquement, il est inutile de mettre en évidence la présence d’un traducteur, je vous conseil donc de cacher le widget dans un coin de votre blog comme je l’ai placé dans l’onglet Stats du widget onglet de navigation.

Pour finir:

N’hésitez pas à laisser vos impressions en commentaire sur ce nouveau widget, et si votre blog n’est pas en français, laissez son URL, ça pourrait servir de démonstration....
Surtout Abonnez-vous au flux RSS pour recevoir les nouveautés en exclusivité par email.
59 Commentaires
  1. =))
    Je me demandais aussi pourquoi google insistait tant pour traduite cette page en anglais...
    Mais je prefere la VO !

    RépondreSupprimer
  2. Hello

    It looks like this widget works just on this article in your blog... And I can understand it this translation bar does not look too good. English blogs does not have it. They show Translate bar just if someone clicked to translate... and that's right.

    In my Russian blog it did not look good either so I am looking way don't show this bar only show the drop-menu.

    Svetlana

    RépondreSupprimer
  3. ah tu voulais une url pour tester :
    http://unitedworld20.blogspot.com
    Par contre je ne compte pas utiliser ce widget.

    RépondreSupprimer
  4. Bon Tuto, j'ai aussi ce widget si cela vous intéresse: http://truc2blogger.blogspot.com/2009/09/convertir-votre-blog-en-40-langues.html

    RépondreSupprimer
  5. @ Kyle and Svet Keeton
    I didn't add the Tanslator widget to all pages but just two of them, but now i did it for all blog pages ....

    on http://blogger4you.blogspot.com/ it's working very well, and there's no need to use the drop-menu to select a language ....

    I think you can hide the translation bar, look at Google Translate FAQ http://www.google.com/intl/en/help/faq_translation.html#element
    (but only for US blogs ...)

    RépondreSupprimer
  6. @ Guillaume
    Y a pas de traduction dans ton blog !!!!

    RépondreSupprimer
  7. @ Lighta97
    Tu devrais utliser un avatar pour tes commentaires et activer ton profil blogger, regard ça :
    http://www.leblogger.com/2009/09/image-profil-commentateur-commentaire.html

    RépondreSupprimer
  8. Wouah le hasard... J'étais à un doigt et demi de jeter mon vieux traducteur parce qu'il prenait beaucoup de place...
    Je passe voir par curiosité ce que tu avais proposé avec les drapeaux et voilà que tu dégotes le compacte des compactes...
    Pratique, simple, non-encombrant...

    Et hop en vietnamien :D
    http://legendeschansonfrancophone.blogspot.com/#googtrans%28fr|vi%29

    Adopté... ;)

    RépondreSupprimer
  9. ce widget est trés utile pour les blogger !!
    Merci d'avoir partager ...

    RépondreSupprimer
  10. @ Laurent
    Wow c'est trop fort, le widget est parfaitement intégré au design de ton blog, je l'ai même pas reconnu, tu gères man ...
    Tu as changé d'url du blog ??? mais la nouvelle c'est la même ??? et pourquoi tu ne prends pas un nom de domaine ???

    RépondreSupprimer
  11. @Sofiane
    J'sais pas si c'est à moi que tu t'adresses... (pas vu de Laurent dans la liste des com's :-o )

    Oui, j'ai changé d'url pour plusieurs raisons...
    Je partage depuis plusieurs semaines le blog avec des amis et je ne veut pas les mettre a l'écart à cause de mon pseudo qui figurait dans l'ancien url... De plus, ça fait un "poil" plus sérieux... lolll...
    Pour le moment je n'ai pas envie de prendre un nom de domaine... Je préfère finir la mise-en page... (ya encore pas mal de boulot :( )

    Pour le widget, je n'ai pas fait de modifications, j'ai juste appliqué le code que tu as donné... Le logo "google" est caché, parceque j'ai mis l'ensemble du widget dans cette balise --> [div style="overflow:hidden; max-height: ???px]WIDGET[/div]

    en utilisant:
    "overflow: hidden", le widget sera coupé s'il dépasse les limites.
    "overflow: visible", le widget dépassera les limites.
    "overflow: scroll", le widget sera coupé, mais le navigateur affichera des barres de défillement.
    "overflow: auto", si le widget dépasse, le navigateur placera automatiquement des barres de défilement.

    avec overflow, on peut faire de nombreuses modifications qui changent énormément la présentation des pages...

    Hors propos... J'ai un souci avec une balise conditionnelle... Je ne sais pas si tu serais me dépanner... (sorry de poster ici)

    Je cherche a afficher certains éléments sur la page "article" a condition que l'un des libellés de l'article soit XXX...

    En recherchant dans le listing des balises sur l'aide Blogger, j'ai défini c'est cette formule -->
    [b:if cond='data:label.name == "LIBELLE"']
    L'élément s'affiche si le libelle est "nom du libellé"

    Malheureusement, je n'arrive pas a trouver mon erreur...

    Bonne soirée à toi ;)

    RépondreSupprimer
  12. @ NicTeam
    ok, c'est très interessant, j'utilise pas trop le overflow ici ( sauf overflow: scroll pour les "quotes"), ni les images en arrière plan....

    Pour les libellés je crois qu'il faut écrire le libellé en respectant la case... quand je l'avais testé, j'ai mis des heures avant de comprendre que Widget c'est pa la même chose que widget ...
    Mais comment tu veux afficher des articles sur une page en utilisant les conditionnels ????
    je te répondrais plutard quand je serais sur mon ordi ...

    RépondreSupprimer
  13. @Soufiane
    Ca dépend ce que l'on veut faire... Pour ma part, j'utilise généralement le "overflow scroll" pour limiter la hauteur des pages... (p.e. la partie commentaires)
    Ici, avec le widget Google, j'ai estimé que ce n'était pas neccessaire d'afficher le logo, puisqu'il réapparait dans le iframe après traduction... lollll

    Pour les conditions, la plupart des formules fonctionnent avec n'importe quel élément... Par exemple, j'ai distingué des blogs ayant les backlinks activés/ou pas, les commentaires activés/ou pas, si le nombre de liens ou de backlink est égale ou supérieur (ou inférieur) à XXX... etc... Il y a de nombreuses possibilités... Ainsi, un article peut avoir une présentation différentes par rapport à un autre article...
    Par exemple, on peut afficher certains élements d'un article à condition que celui-ci possède X commentaires... sinon (else) on rajoute une phrase explicative...

    Actuellement, ce que j'essaie de faire, c'est de rajouter des fonctions à la barre de titre des articles qui contient un menu (modèle html, widget blog) destiné au contenu de l'article et qui n'affiche que des liens qui sont encadrés de conditionnelles [b:if cond='...'][a href="...][/a][/b:if]... (j'ai simplifié pour l'explication)

    http://lh4.ggpht.com/_oRgYjgpt3wE/SsyJjeAqnTI/AAAAAAAAFoY/C6SWW6oBjag/MenuTitre.png

    Avec le "data:label.name", j'ai essayé en respectant la case, en effaçant les accents, en ne mettant qu'un seul libellé à l'article, etc... C'est l'une des rares conditions que je n'arrive pas a comprendre son non-fonctionnement...

    Si ça t'interesse, je te refile mon code pour la barre de titre avec menu ;)

    RépondreSupprimer
  14. Je viens de l'ajouter sur mon blog et ça marche super bien ! Ravie d'être arrivée sur ton blog, même si c'est à la suite d'un autre problème...

    RépondreSupprimer
  15. @ NicTeam
    Pourquoi je t'ai appelé Laurent ??? il y a trop de Laurent qui commentent sur le blog et je commence à m'y perdre.... bref, Nicolas, c'est très intéressant ce que tu dits et je t'ai envoyer un email sur le sujet ....

    RépondreSupprimer
  16. @ Nicole Barrière Jahan
    Bienvenue....
    Quel problème ?

    RépondreSupprimer
  17. Bonjour Soufiane, et bien en fait quand j'ai créé mon blog http://dessinchat.blogspot.com, j'avais désactivé les commentaires et je ne sais pas ... je n'arrive à réactiver aucun affichage derrière les messages sur mes pages : ni quand le message a été posté, ni le nombre de commentaires, ni les réactions ... j'ai tout coché dans la rubrique mise en page-messages, j'ai activé aussi dans paramètres-commentaires : message ci-dessous intégré... je ne sais plus quoi faire ! au début, j'avais aussi modifié le code html du modèle utilisé pour changer les images fond de page. Depuis, je suis revenue au modèle basique, en mettant mon background ds un gadget, je pensais que ça allait résoudre mon pb, mais non ... :( si tu as une idée ... merci d'avance ...

    RépondreSupprimer
  18. @ Nicole Barrière Jahan
    Excuse moi j'avais zapper ton autre commentaire...
    Donc pour résumer, ton problème est que tu n'as plus le lien qui affiche le nombre de commentaire à la fin des articles ??? Pour laisser des commentaires il n'y a pas de problèmes, je viens de tester ....

    -Pour commencer essai ça :
    tu vas dans Mise en page, puis dans "Message du blog" tu cliques sur Modifier et tu vérifie si la case commentaires est coché (C'est la 7ième)

    Si ça marche pas, il faudrait ajouter le compteur de commentaire manuellement dans ton code HTML, je te donnerais un petit code à coller et c'est tout .....

    RépondreSupprimer
  19. Merci ! j'ai vu que tu étais passé :p
    alors si on parle bien de la même page, regarde tout ce qui est coché sur ma copie d'écran: http://www.nicolejahan.com/Blog/ce1.jpg Il devrait y avoir même plein d'autres choses qui s'affichent. Ou alors c'est pas ça parce que c'est pas ça la 7ième case ..? :-O

    RépondreSupprimer
  20. @ Nicole Barrière Jahan
    Bon ok, Voici une solution pour Dépanner :

    Dans Blogger dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez le code suivant: <div class='post-footer-line post-footer-line-1'>

    Juste après ajoutes le code suivant :

    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

    Et dit moi ce que ça donne .....

    RépondreSupprimer
  21. ça marche !! tu es absolument génial ! :-*
    Un grand merci !! je vais ajouter l'adresse de ton blog sur le mien si tu veux bien et en attendant, je me suis inscrite pour suivre le tien !!
    Encore merci !!;;)

    RépondreSupprimer
  22. euh ... tu vas peut-être me trouver ~x( ...
    c'est pas possible que le nombre de commentaires qui s'affiche soit cliquable comme il est normalement ?

    RépondreSupprimer
  23. Oublie ma question ! je suis vraiment boulet ! je viens de retourner sur mon blog et on peut cliquer ... impec donc ! :D

    RépondreSupprimer
  24. Mais j'ai pas fini !! :p J'ai vu sur ton blog d'autres modifs à apporter à mon blog alors tu me liras peut-être bientôt à nouveau ... ;))

    RépondreSupprimer
  25. @
    Pas de problèmes, c'est quand tu veux ....

    RépondreSupprimer
  26. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  27. Bonsoir, C'est le premier traducteur qui m'a totalement séduite ....

    RépondreSupprimer
  28. tu déchires...et c'est pour ça qu'on revient toujours te voir...et je te promets que pourtant, j'en fais des tours sur cette toile mondiale...
    a bientôt

    RépondreSupprimer
  29. ehhhh...c'est encore moi...je rigole au moment d'écrire...je vx rajouter une balise pour le mettre dans une image a moi,genre src="url de l'image"/>...(avec < img devant, mais j'arrive pas à le mettre ici),ehhh t'as vu mon code??une pro du blog...!...mais dans ce gadget, je ne sais pas oû l'insérer??tu peux m'aider?
    merci soufiane

    RépondreSupprimer
  30. @ ninie
    Merci pour le compliment.
    Tu gères à mort, les src, img, et les yaaah >< ...
    Mais on peux rien modifier dans ce widget.

    RépondreSupprimer
  31. bon okay...j'ai vu sur un site, un gadget en haut de page qui disait...exemple"ninie speaks englih now"...et quand tu cliques dessus , tout le site est traduit en anglais...mais comment donc ils font ça les gens???
    là, 01h28...c'est tard chez moi...et j'ai un recto de a4 rempli de questions...je te les garde pour demain...
    merci de voir comment je peux créer un gadget comme ça...
    ninie

    RépondreSupprimer
  32. Salut Soufiane,

    C'est encore René. Je voudrais savoir si le code pour le traducteur d'après toi peux s'installer dans un autre site que sur celui de Blogger. Comme mon site www.infosmatelas.com par exemple.

    Merci

    René
    www.infosmatelas.com

    PS: je suis le même qui veux savoir si les pages blogger s'élargissent.

    RépondreSupprimer
  33. @ René
    Oui oui, faut juste copier le code quelque part dans ton site ....

    RépondreSupprimer
  34. Merci beaucoup ...

    http://thailand-eric.blogspot.com/

    RépondreSupprimer
  35. Bonjour

    Outils superbe qui m'est très utile... à tel point que je n'avais aucun moyen de savoir s'il fonctionnait réellement. Je ne pouvais que constater qu'il était installé dans un gadget HTML car sur le blog rien n'apparaissait.

    Oui c'était parfait jusqu'à ce que je change de modèle de blog il y a 2 jours !

    Depuis, comme vous pouvez le constater en bas de page http://ericlediemerophile.blogspot.com/
    un menu apparait et me fait donc penser que ce code tout en transparence n'est plus transparent.

    Donc quid du traducteur ? Est-ce un bug ? Une interférence car les drapeaux sont aussi installés ?

    Merci de regarder ce qui peut se passer SVP.

    @u plaisir de le revoir fonctionner parfaitement.
    Et merci pour l'ensemble de toutes les aides et outils, cher Soufiane !!!

    RépondreSupprimer
  36. @Eric le Diemerophile
    Le widget est dans la sidebar et il marche bien chez moi !!!

    RépondreSupprimer
  37. thank you :)

    http://successfule-commerce.blogspot.com/

    RépondreSupprimer
  38. La Troisième Guer e mondiale en Novembre 2010 - Imam Mehdi par les pairs
    Est Star exploser en Septembre 2010
    S'il vous plaît lire le blog suivant
    http://emam-mahdi-1431.blogfa.com/
    World War III im November 2010 - Imam Mehdi Peer
    Eastern Star im September 2010 explodieren
    Bitte lesen Sie die folgenden blog
    http://emam-mahdi-1431.blogfa.com/

    RépondreSupprimer
  39. Bonjour et merci pour les explications..mais:

    "Sélectionnez une langue avec le widget "Traducteur" en haut de cette page ...."

    Je ne vois rien de tel !! Aucun widget pour tester !!

    Mais ça c' est rien encore, ce qui me tracasse et dont absolument personne ne parle à propos de ce nouvel outil, c' est faut il placer le code sur chaque page du site, ou bien sur une seule ?

    Si c' est sur une seule, ou ? N' importe ? Est ce cela va proposer la traduction sur les autres pages quand même ?

    Merci

    RépondreSupprimer
  40. Ce commentaire a été supprimé par un administrateur du blog.

    RépondreSupprimer
  41. Tercera Guerra Mundial en 2011 -, Shaul Mofaz (Anti Cristo) el futuro primer ministro de Israel desde su ascenso al poder de destruir a Israel, al Imam Mahdi, las tropas de los 14 y los 15 meses que se necesita - un terremoto en el norte de Siria, Israel y los libaneses lugar antes del ataque y en Jordania a Siria es la primavera de 2011 se produce
    las tropas occidentales desembarcar en el puerto de Alejandría para suprimir la Revolución Islámica en la primavera de 2011 -
    Entre 14 a 20 agosto, 2011 45P/Honda-Mrkos rastro de meteoritos pocos pueden chocar con el suelo y sus mayores en Asia, Asia oriental y el más probable encontrar el 26 de agosto y en una gran estrella en el cielo oriental para explotar tres o siete días Estos signos parecen estar quemando el salvador último es necesario

    http://emam-mahdi-1390.blogfa.com/
    Третьей мировой войны в 2011 году - Шауль Мофаз (Anti Христа) будущего премьер-министра Израиля с момента его прихода к власти, чтобы уничтожить Израиль, чтобы Имам Махди войск среди 14 до 15 месяцев он принимает - землетрясение в северной части Сирии, Израиля и ливанской место до атаки и в Иордании в Сирию, весной 2011 года происходит
    В период с 14 по 20 августа 2011 45P/Honda-Mrkos несколько след метеора
    может ударился о землю и ее крупнейшим в Азии, Восточной Азии и чаще сталкиваться с 26 августа и в большой звездой в восточной части неба, чтобы взорвать три или семь дней Эти знаки по всей видимости, сжигание последние спасителя необходимо

    Западные войска высаживаются в порту Александрии для подавления исламской революции весной 2011 года
    http://emam-mahdi-1390.blogfa.com/
    2011 में विश्व युद्ध III - सीरिया, इसराइल और लेबनान के उत्तरी भागों में भूकंप - शाऊल Mofaz (एंटी मसीह) इसराइल के भविष्य के प्रधानमंत्री ने इजरायल को नष्ट शक्ति को जन्म, 14 से 15 महीनों में इसे लेता है इमाम महदी सेना के बाद से हमले से पहले और सीरिया को जॉर्डन में जगह नहीं है 2011 के वसंत होता है
    -14-20 अगस्त 2011 के बीच कुछ 45P/Honda-Mrkos उल्का निशान जमीन और उसके एशिया, पूर्वी एशिया और अधिक होने की संभावना में सबसे बड़ा करने के लिए 26 अगस्त को और पूर्वी आकाश में एक बड़ा स्टार करने के लिए तीन या सात दिन विस्फोट में
    मुठभेड़ हिट कर सकते हैं इन संकेतों को अंतिम रक्षक जल जाने की आवश्यकता है प्रकट
    पश्चिमी सैनिकों Alexandria के बंदरगाह में उतरना लिए 2011 वसंत में इस्लामी क्रांति को दबाने
    http://emam-mahdi-1390.blogfa.com/

    RépondreSupprimer
  42. hello sofaine,

    mais est ce que ca marche pour wordpress, car g essaye et j'ai que le drapeau anglais qui apparait

    merci pour ton aide

    RépondreSupprimer
  43. Pour une "véritable traduction" en ANGLAIS/ESPAGNOL/ITALIEN/FRANCAIS,faites appel à un cerveau humain et à une traductrice quadrilingue professionnelle : www.sabrina.traductions.sitew.com
    ;-)

    RépondreSupprimer
  44. Enfin un traducteur qui traduit, merci leblogger, j'en avais vraiment besoin. à chaque fois que je voulais installé un traducteur ça ne marchais pas parce que dans google veux traduir de l'anglais vers les autres langue

    RépondreSupprimer
  45. Merci beacoup pour ce traducteur, je viens de l'installer et il marche très bien.
    Les drapeaux sont très beau.

    Contrairement au autres widget de traduction il traduit bel et bien du français vers les autres langues.

    encore merci et bonne continuation.

    RépondreSupprimer
  46. merci bcp pr le code il marche très bien dans mon site www.hafidi.ab.ma

    RépondreSupprimer
  47. Merci Souffiane pour cet excellent traducteur.

    RépondreSupprimer
  48. Génial ce traducteur...
    Serait t'il possible d'avoir le code pour la traduction vers le THAI ?
    D'avance, merci...
    Rainier

    RépondreSupprimer
  49. Bonjour
    Avec google tout est plus facile...mais il existe des modules qu'on peut l'utiliser sur tout les opérateurs d'internet et ça peut nous traduire la page vers n'importe quel langue

    RépondreSupprimer
  50. Merci pour cet article , google est toujours dans le top
    mais moi souvent j'utilise firefox est ce que je peux avoir des noms de modules qui peut m'aider à traduire.
    merci encore

    RépondreSupprimer
  51. Merci c'est excellent et alors d'une facilité à installer, encore merci,
    c'est un plaisir et les traductions sont pas mal du tout .

    RépondreSupprimer
  52. Merci infiniment pour vos deux widgets de traduction ^^

    RépondreSupprimer
  53. C'est super bien ce site et tresinstructif aussi. J'aimerais moi ajouter un salon chat sur mon site web. comment faire

    RépondreSupprimer
  54. Bonjour j'ai choisi un affichage dynamique et je n'arrive pas installer les drapeaux merci d'avance.

    RépondreSupprimer
  55. C'est super utile ton widget merci man. J'adore les langues étrangères je pense que ça va m’être super utile ça !
    Galaxy Note 3

    RépondreSupprimer
  56. Bonjour ! Super merci pour l'info, est-ce que ça peut fonctionner sur un site classique comme le mien : www.khaomanee.fr ?
    Merci !
    Stéphane

    RépondreSupprimer

Copyright 2012 LeBlogger.com