Intercambiar Idiomas en las Entradas
Hola, mi primer post será acerca del diseño en Blogspot. La razón es que cuando pensaba en crear un Blog tenía la idea de hacerlo en dos idiomas, español e inglés, pero sin molestar a las personas con dobles cuadros de texto o cosas por el estilo. Mi solución, un botón en javascript que comparto con ustedes.
Formato de las Entradas
Primero hay que dar formato a cada una de las entradas (o sólo aquellas que desees) y colocar su contenido en DIVS bajo una clase: "lanEsp" para español, "lanEng" para inglés.
<div class="lanEsp">
Hola Mundo!
<div>
<div class="lanEng">
Hello World!
<div>
Botones para intercambiar idiomas
Los botones son simples links que llaman a un javascript en lugar de una dirección
<a href="javascript:mostrar('espanol');">Español</a>
<a href="javascript:mostrar('ingles');">English</a>
Javascript
Una vez que tienen formato cada uno de los posts (por esto es que decidí hacer este script desde un principio) y que tenemos nuestros botones se crean el Javascript y un pequeño estilo CSS. Si sabes Javascript puedes resumirlo, yo me dedico al diseño y no a la programación así que puede haber código de más.
<script type="text/javascript" language="JavaScript">
function mostrar(identificador)
{
var principal=document.getElementById("content");
var misdivs=principal.getElementsByTagName("div");
if(identificador=="espanol")
{
if(misdivs.length > 0)
{
for(i=0; i<misdivs.length; i++)
{
if(misdivs[i] != null)
{
if(misdivs[i].className=="lanEng")
{
misdivs[i].style.visibility="hidden";
misdivs[i].style.position="absolute";
}
if(misdivs[i].className=="lanEsp")
{
misdivs[i].style.visibility="visible";
misdivs[i].style.position="static";
}
}
}
}
}
if(identificador=="ingles")
{
if(misdivs.length > 0)
{
for(i=0; i<misdivs.length; i++)
{
if(misdivs[i] != null)
{
if(misdivs[i].className=="lanEsp")
{
misdivs[i].style.visibility="hidden";
misdivs[i].style.position="absolute";
}
if(misdivs[i].className=="lanEng")
{
misdivs[i].style.visibility="visible";
misdivs[i].style.position="static";
}
}
}
}
}
}
</script>
CSS
Ahora ponemos un poco de CSS para que no se muestre por default uno de los dos idiomas. En mi caso elegí esconder por default el español.
<style type="text/css">
.lanEsp {
visibility:hidden;
position:absolute;
}
</style>
Eso es todo, un script que busca en el div "content" todos los divs. Y dependiendo de la clase los mostrará u ocultará.
Como dije antes, no me dedico a la programación pero funciona. Si conoces mejores métodos no dejes de compartirlos o señalar las deficiencias de mi script.
Toggling Languages in Posts
Hi, mi first post will be about the Blogspot design. The main reason is I was thinking about creating a blog in two different languages, english and spanish, but without bugging the visitors with double text boxes or such things. My solution, a javascript button which I share with you.
Entries Format
First of all you have to give a special format for each of the entries (or only those those that you want) and put the content under a DIV with a class: "lanEsp" for Spanish, "lanEng" for English.
<div class="lanEsp">
Hola Mundo!
<div>
<div class="lanEng">
Hello World!
<div>
Toggling Languages Button
Buttons are simple links which call to a javascript instead an URL
<a href="javascript:mostrar('espanol');">Español</a>
<a href="javascript:mostrar('ingles');">English</a>
Javascript
Once each post has the format needed (that's why I choose making the script since the beggining) and we have our buttons it's time for making the Javascript and small CSS style. If you know Javascript optimize it, I'm a designer and not a programmer so I'm sure there should be some redundant code in there.
<script type="text/javascript" language="JavaScript">
function mostrar(identificador)
{
var principal=document.getElementById("content");
var misdivs=principal.getElementsByTagName("div");
if(identificador=="espanol")
{
if(misdivs.length > 0)
{
for(i=0; i<misdivs.length; i++)
{
if(misdivs[i] != null)
{
if(misdivs[i].className=="lanEng")
{
misdivs[i].style.visibility="hidden";
misdivs[i].style.position="absolute";
}
if(misdivs[i].className=="lanEsp")
{
misdivs[i].style.visibility="visible";
misdivs[i].style.position="static";
}
}
}
}
}
if(identificador=="ingles")
{
if(misdivs.length > 0)
{
for(i=0; i<misdivs.length; i++)
{
if(misdivs[i] != null)
{
if(misdivs[i].className=="lanEsp")
{
misdivs[i].style.visibility="hidden";
misdivs[i].style.position="absolute";
}
if(misdivs[i].className=="lanEng")
{
misdivs[i].style.visibility="visible";
misdivs[i].style.position="static";
}
}
}
}
}
}
</script>
CSS
Now we add the CSS style so we will show one of the languages only by default. In my case I picked English for default language.
<style type="text/css">
.lanEsp {
visibility:hidden;
position:absolute;
}
</style>
And that's all, a script which search the whole divs under the div named "content" and depending of the class they will show or hide.
As I said before, I'm not a programmer but the script works. If you know better methods please share them or pick my mistakes on my script.
Labels: blogger, blogspot, javascript, languages, template
