This post is not related to computer graphics. I present a way to show posts in two languages. The mechanism is very simple and can be used in blogspot as I'm going to show. I haven't wasted too much time in finding over internet similar mechanisms. Due to the simplicity of this method I had prefered doing it by myself.
In order to achieve this javascript will be used. I expose the steps:
- Modifying the template
- Creation of the language links in the post
- Definition of the language blocks in the post
Modifying the template
The template can be modified in Design options of blogger. It's possible to add this:
<script language='javascript' type='text/javascript'>
function showBlk_1 ()
{
var nodeObj = document.getElementById('blk_1')
nodeObj.style.display = 'inline';
var nodeObj = document.getElementById('blk_2')
nodeObj.style.display = 'none';
}
function showBlk_2 ()
{
var nodeObj = document.getElementById('blk_2')
nodeObj.style.display = 'inline';
var nodeObj = document.getElementById('blk_1')
nodeObj.style.display = 'none';
}
</script>
The code is simple. If showBlk_1 is invoked, the style of the block identified by blk_1 is changed to visible, and the one identified with blk_2 is set to invisible.
The other function does the oposite operation.
Creation of the language links in the post
Simply we define the tags 'span' o 'a' with a href targeting '#' and this is the important thing: An onclick function:
For example:
<a href='#'><span onclick="showBlk_1()">Spanish</span></a>
<a href='#'><span onclick="showBlk_2()">English</span></a>
Definition of the language blocks in the post
Finaly now the texts in the two languages are written. The text in the language associated to the block 1 (blk_1) will be inside in a div block identified with blk_1.
The texts in the other language will be inside the other block.
For example:
<div id="blk_1" style="display: inline;">Esto es un texto en idioma Español.</div>
<div id="blk_2" style="display: none;">This is an English text.</div>
One of the blocks has to be visible and the other ones invisibles so by default only one language will be shown.
Here, for clarity it has been added a return carriage to separate the divs but in the post the 'divs' shouldn't be separated. If not, the second language will appear with an extra line.
Conclusion
It has been shown a very easy way to generate posts in two langages. This model it's also easily scalable to manage schemes with multiple languages.