Blogger multi-langue français-anglais (code)

Comme vous avez pu vous en rendre compte en survolant Wouf Forum, j’apprécie Blogger, la plate-forme de Blog de google et cela pour plusieurs raisons:

  • Les blogs sont rapidement et régulièrement (re-)indexés par google.
  • Les annonces Adsense s’y intègrent parfaitement.
  • On a une certaine liberté de modification des templates

Justement je vous propose aujourd’hui d’ajouter une fonction multi-langues à votre Blog Blogger.

Un exemple:
Sur Walk-in-France j’ai intégré, en haut à droite un petit cadre:

lang

Lorsque l’option « Français » est active toutes les parties de billets rédigées en fançais sont visibles, et invisibles sinon. Pareil pour l’anglais.

Pour utiliser cette fonctionnalité

Modifions (en effectuant les auvegardes d’usage) le code html du template.

juste après la balise <head>, insérer le code suivant:

<script type=’text/javascript’>

var z
function change (){
z=0;
if (window.document.getElementById(&quot;francais&quot;).checked){

z=1;
}
if (window.document.getElementById(&quot;anglais&quot;).checked){
z=z+2;
}
if (z==0)
z=4;

//alert(&quot;fonction change   &quot;  +z);
EcrireCookie(&quot;langue&quot;,z);

stylage(z);
}

function init(){
z=LireCookie(&quot;langue&quot;);
if (!z&gt;0){// pas de cookie

switch (navigator.language) {
   case &quot;fr&quot;:

   z=1;
   break;
   case &quot;en&quot;:
   z=2;
   break;
   default:
   z=3;

   break;
}

EcrireCookie(&quot;langue&quot;,z);

}

croix(z);
stylage(z);

}

function stylage(z){

z=parseInt(z);
//alert(&quot;debug — fonction stylage&quot;+z)
switch (z){
  case 4:
  visible(&quot;francais&quot;,&quot;non&quot;);
   visible(&quot;anglais&quot;,&quot;non&quot;);

   
   break;
   case 1:
  visible(&quot;francais&quot;,&quot;oui&quot;);
   visible(&quot;anglais&quot;,&quot;non&quot;);

   break;
   case 2:
   visible(&quot;francais&quot;,&quot;non&quot;);
   visible(&quot;anglais&quot;,&quot;oui&quot;);

   
      break;
   default:
   visible(&quot;francais&quot;,&quot;oui&quot;);
   visible(&quot;anglais&quot;,&quot;oui&quot;);

   
   
   break;}
}

function croix(z){
//alert(&quot;fonction croix —z=&quot;+z)
z=parseInt(z);
switch (z){
  case 4:

 
   window.document.getElementById(&quot;francais&quot;).checked=0;
   window.document.getElementById(&quot;anglais&quot;).checked=0;
   
   
   break;
   case 1:

   window.document.getElementById(&quot;francais&quot;).checked=1;
   window.document.getElementById(&quot;anglais&quot;).checked=0;
 
   break;
   case 2:
   window.document.getElementById(&quot;anglais&quot;).checked=1;

      window.document.getElementById(&quot;francais&quot;).checked=0;
      break;
      
   default:
      window.document.getElementById(&quot;francais&quot;).checked=1;

   window.document.getElementById(&quot;anglais&quot;).checked=1;
   break;}
}

function visible(classe, bool) { ;
var cibles,i;

cibles = getElementsByClass(classe);

//alert(&quot;debug —fonction visible —visible? classe=&quot;+classe+&quot;  bool= &quot;+bool);

for (i = 0; i &lt; cibles.length; i++) {
        if (bool==&quot;oui&quot;){
      cibles[i].style.display = &quot;block&quot;;
        }

        else
        {
        cibles[i].style.display = &quot;none&quot;;

       
        }
    }
// Création : Dustin Diaz
//Site : http://www.dustindiaz.com/getelementsbyclass
function getElementsByClass(searchClass) {

var i,j;

var classElements = new Array();

var els = document.getElementsByTagName(&quot;div&quot;);
var elsLen = els.length;
var pattern = new RegExp(&quot;(^|\\s)&quot;+searchClass+&quot;(\\s|$)&quot;);
for (i = 0, j = 0; i &lt; elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;

}
}
return classElements;
}

}
function EcrireCookie(nom, valeur)
{
var argv=EcrireCookie.arguments;
var argc=EcrireCookie.arguments.length;
var expires=(argc &gt; 2) ? argv[2] : null;
var path=(argc &gt; 3) ? argv[3] : null;
var domain=(argc &gt; 4) ? argv[4] : null;
var secure=(argc &gt; 5) ? argv[5] : false;

document.cookie=nom+&quot;=&quot;+escape(valeur)+
((expires==null) ? &quot;&quot; : (&quot;; expires=&quot;+expires.toGMTString()))+
((path==null) ? &quot;&quot; : (&quot;; path=&quot;+path))+
((domain==null) ? &quot;&quot; : (&quot;; domain=&quot;+domain))+

((secure==true) ? &quot;; secure&quot; : &quot;&quot;);
}

function getCookieVal(offset)
{
var endstr=document.cookie.indexOf (&quot;;&quot;, offset);
if (endstr==-1) endstr=document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function LireCookie(nom)
{

var arg=nom+&quot;=&quot;;
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i&lt;clen)
{
var j=i+alen;
if (document.cookie.substring(i, j)==arg) return getCookieVal(j);
i=document.cookie.indexOf(&quot; &quot;,i)+1;
if (i==0) break;

}

return null;
}

</script>

Le petit cadre de droite a pourcode:

<form>

<input id= »francais » onchange= »change() » type= »checkbox »/>Français<br/>

<input id= »anglais » onchange= »change() » type= »checkbox »/> English

</form>

<div class= »francais »>C’est en français</div>

<div class= »anglais »>I’s in english</div>

Mode d’emploi

Vous écrivez un billet, dans le quel un paragraphe est en français:

<div class= »francais »>Comme ceci : C’est en français</div>

Vous écrivez un billet, dans le quel un paragraphe est en anglais:

<div class= »anglais »>Like this: it’s in english</div>

Remarque

Vous pouvez appliquer des styles aux div, en ajoutant un peu de code dans le template

Sur Walk-in-France les posts en français sont en vert, parceque
j’ai inséré le style suivant :

div.francais {color:green}