Creating a switch to change languages inside a Blog

Hola a todos, en este Post voy a explicar como crear el switch que permite cambiar entre idiomas en un Post de un Blog. Quizá hasta puedan crear una lista en vez de un botón para tener más de dos opciones aplicando casi todos los mismos pasos.

Primero hay que entender que para crear el botón se deben crear 3 aspectos distintos:

• El botón en sí con HTML
• El diseño del botón con CSS
• La programación del botón con Javascript

Por suerte, todo esto se puede hacer dentro del blog mientras el blog permita la edición de HTML cuando creamos los Posts. Primero voy a explicar que se necesita:

Uno debe tener unos divisores (div) en HTML para cada uno de los distintos lenguajes, esto quiere decir que, si tenemos un texto en español y otro en ingles, debemos (En el editor de HTML) "encapsular" los textos dentro de un div de la siguiente manera:

<div id="esp">

                         Texto en Español

</div>

<div id="eng">

                         Text in English

</div>

Es importante que demos los "id" ya que con esos los vamos a identificar más adelante.

La lógica entonces es, si apretamos el botón para ir a la opción en inglés, se esconde el div de español y se muestra el de inglés.

Lo que vamos a hacer primero es buscar un botón tipo switch en internet, si es posible con CSS incluído para personalizarlo y agregarlo (o crearlo personalmente si prefieren).

Recomiendo la siguiente página que enseña como hacer un botón switch:
https://www.w3schools.com/howto/howto_css_switch.asp

Siguiendo el ejemplo de esa página, vamos a agregar el botón mediante HTML simplemente copiando y pegando en nuestro editor HTML.

Luego debemos copiar el diseño del CSS. Para esto necesitamos, dentro de nuestro editor, copiar el código dentro de etiquetas <style> </style>. A partir de ahí deberían poder ver el diseño del botón, de no ser posible, significa que primero hay que publicar el Post para poder verlo.


Lo último por agregar es el Script en Javascript pero primero volvemos al botón en su HTML que pegamos y  dentro de su etiqueta "<input .." colocamos: "onclick="myFunction()" " (sin los primeros "").

Con esto, le decimos al botón que cuando lo presionen ejecute la función "myFunction()" que vamos a crear ahora.

Para eso, debemos crear el código dentro de etiquetas <script> </script> en nuestro editor de HTML.

 Voy a compartir el código que utilizo:

<script>
function changeLanguage() {
    var x = document.getElementById('esp');
    var y = document.getElementById('eng');
    if (x.style.display === 'none') {
        x.style.display = 'block';
        y.style.display = 'none';
    } else {
        x.style.display = 'none';
        y.style.display = 'block';
    }
}
</script>

Lo que hace es, primero encontrar a los divs que antes marcamos como "esp" y "eng" y luego, al apretar el botón, mostrar uno y esconder el otro.


Como último detalle, falta esconder el lenguaje que queremos que este escondido por defecto. Tomando como ejemplo que quiero esconder el texto en Inglés, lo que hay que hacer es: dentro de div, agregar una propiedad de la siguiente manera:

<div id="eng" style="display:none;">

De esta forma, se le indica a esta división que este oculta al principio.

Eso fue todo, espero que les haya sido útil. Si utilizan la misma forma de dividir los textos al hacer sus Posts, la próxima vez solo tienen que copiar y pegar el HTML, CSS y Script del boton tal como esta para que funcione. (Pueden hasta copiar el HTML y el CSS de este botón si miran el código fuente de la página).

-L

Hi everyone, in this Post I'll explain how to create a toggle switch that allows to change between languages in a Post of a Blog. Maybe you can create a list instead of a switch to have more than two options using almost every step.

First we need to understand that 3 different aspects are needed to create the botton:

• The button with HTML
• The button's design with CSS
• Programming the button with Javascript

Luckily, all of this can be done inside the blog as long as the blog allows HTML editing when we create the Posts. First I'm gonna explain what it needs:

One must have dividers (div) in HTML for each different languages, this means that, if we have text in Spanish and in English, we must put the text inside the labels div in the same way:


<div id="esp">

                         Spanish Text

</div>

<div id="eng">

                         English Text

</div>

Its important that we put the "id" as we are going to use them later on.

So, it works this way: if we press the English button, the Spanish div disappears and the English one shows up.


What we are going to do first is to find a toggle switch button on the Internet, if its possible, with the CSS included so we can customize it an add it (or you may prefer create it manually).

I recommend the following page that shows how to create a button:
https://www.w3schools.com/howto/howto_css_switch.asp

Following the example of that page, we are going to create the button with HTML by simple copying and pasting on our HTML editor.

We then need to copy the CSS design. For this we need, inside our editor, to copy the code inside the tags <style> </style>. From now on, you should be able to see the design of the button, if that doesn't happen, it means that you first need to publish the Post in order to see the button properly.


The last thing is to add the Javascript Script but first, we go back to the button we've just created and inside its "input" label, we put "onclick="myFunction()"" (Ignoring the first "").

With this, we tell the button that whenever it's pressed, it runs the function "myFunction()" that we are going to create now.

For that, we need to create the Script inside the labels <script> </script> inside our HTML editor.

 I'm going to share the same code I use:

<script>
function changeLanguage() {
    var x = document.getElementById('esp');
    var y = document.getElementById('eng');
    if (x.style.display === 'none') {
        x.style.display = 'block';
        y.style.display = 'none';
    } else {
        x.style.display = 'none';
        y.style.display = 'block';
    }
}
</script>

What this code does is: first it looks for the divs we early called "esp" and "eng" and then, when the button is pressed, shows one and hides the other.


As a final detail, we need to hide the text with the language we want hidden by default. Taking as an example we want to hide the Spanish text, what you need to do is: inside the spanish div, add a property as follows:

<div id="esp" style="display:none;">

This way, we tell the divider to be hidden at first.

That was all, I hope it has been useful for you. If you use the same way to divide the different text when making your Posts, the next time you just need to copy the HTML, CSS and the Script and past it as it is instead of doing it from scratch. (You can even use the HTML and CSS of this button if you look the source code of this Post).

-L