Post bilingües - Bilingual posts in Blogger

Esto no tiene nada que ver con el tema del blog, pero algunos me preguntan cómo hice para tener textos "biligües" (español/inglés) alternativos. No es una facilidad que provea Blogger, sino programación básica de páginas web (HTML/Javascript/Jquery). Para el interesado que se anime a editar plantillas y texto HTML (al resto, no se lo aconsejo, y no respondo por problemas) explico cómo lo implementé.

This has nothing to do with the thematic of the blog, but some people ask me how I did the bilingual toggeable texts in my posts (english/spanish). This is not a feature provided by Blogger, but I coded it myself (HTML/Javascript/Jquery). For those who might be interested (not recommended for those who are not confortable editing templates and messing with HTML code; and I take no responsabilities!) I explain how I did it.

1. Agregar lo siguiente al template (plantilla), en la sección HEAD (antes del tag</head>). Los styles .lesp .leng se aplicarán a los textos en español e inglés; .lbutton es para los botones que alternan el lenguage activo. Pueden cambiar los colores y formatos, por supuesto; lo mismo para el estilo que está harcodeado (mal hecho) en javascript (var buttonoff ...).
Estoy usando el jquery hosteado en ajax.googleapis.com, pueden usar otro si prefieren.

1. Add the following to you template, in the HEAD section (before the </head> tag). The .lesp .leng styles will apply to the spanish and english texts; .lbutton is for the buttons that toggle the language. You can change colours and formats, of course; same for the harcoded style (bad practice!) inside the Javascript function (var buttonoff ...).
You'll notice I'm including the Jquery library hosted at ajax.googleapis.com, you can change this if you like.

<!-- hjg : toggle languages -->
<style>
 .lesp {padding:4px 10px;margin:10px 1px;font-size:12px;border-left:5px solid #966;color:#320;}
 .leng {padding:4px 10px;margin:10px 1px;font-size:12px;border-left:5px solid #659;color:#005;}
 .lbutton {font-size:12px;padding:1px 6px;font-family:Arial;}
 .lbutton a {text-decoration:none;color:#500}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'>
</script>

<script type='text/javascript'>
//<![CDATA[
var milang = 0; // 0: dual, 1: esp, 2: eng
$(document).ready(function() {
  setLang(milang);
});

function setLang(lang) { // lang is 0,1, 2
  milang = lang;
  if(milang==2 )  $('.lesp').hide();
  else            $('.lesp').show();
  if(milang==1 )  $('.leng').hide();
  else            $('.leng').show();
  var buttonoff = {'background-color' : '#ccc', 'border' : '2px solid #666'};
  var buttonon = {'background-color' : '#dfe', 'border' : '2px solid #1b6'};
  $('.lbesp').css(milang==1 ? buttonon : buttonoff);
  $('.lbeng').css(milang==2 ? buttonon : buttonoff);
  $('.lbdual').css(milang==0 ? buttonon : buttonoff);
  return false;
}
//]]>
</script>
<!-- end hjg : toggle languages -->

2. Agregar el código de los botones. Esto puede ir en cualquier lado: en la barra lateral, en el encabezamiento, en el pie de los posts... Por ejemplo, para agregarlo al pie de los posts, yo edité la plantilla (con "expandir artilugios"), y lo agregué después de los botones de compartir, despues de
<b:include data='post' name='shareButtons'/> </b:if> </div>

3. Add the toggle-buttons code. This can be inserted anywhere in the blogger template, in the header, in the lateral bar, in the post footer. For example, I did the later, and edited the template (expading widgets) adding the code after the "share buttons"
<b:include data='post' name='shareButtons'/> </b:if> </div>

<span class='lbutton lbeng'><a href='#' onclick='return setLang(2);'>eng</a></span>
<span class='lbutton lbesp'><a href='#' onclick='return setLang(1);'>esp</a></span>
<span class='lbutton lbdual'><a href='#' onclick='return setLang(0);'>dual</a></span>

3. En los posts, meter los textos propios de cada idioma adentro de bloques (DIV) con la clase correspondiente. Sugerencia: agregar el código HTML de abajo a la plantilla de post, para no tener que recordarlo cada vez que creamos un post.

3. When writing posts, insert each toggleable english/spanish text in a block (DIV) with the corresponding class. Suggestion: add the following to your "post template", so you don't need to remember this when writing a new post.

<div class="lesp">
Acá va el texto en español.
</div>

<div class="leng">
Here goes the english text.
</div>