( Blogger, BlogSpot ) - Translate Manualy like QTranlate - Traducir Manualmente como QTranslate

Translation:

• Spanish
• English
  

Mi Lengua nativa es el español, y a mí en lo personal me gusta publicar cosas que las otras personas pueden leer y a veces usarlas para sus proyectos personales, pero al principio solo posteaba en español así que mucha gente que entraba al blog se iba porque no entendía el Articulo.

Así que al principio me puse a buscar como traducir blogs y encontré Qtranslate y me gusto el sistema porque a veces los traductores al traducir, no expresa lo que realmente queremos decir PERO!!! Qtranslate solo serbia para WordPress y con el se traduce a mano osea escrito por el propio autor del Post. Así que empecé a buscar Qtranslate para Blogsport o blogger y nada salía.

Un buen día un amigo me dijo que ya que no hay Qtranslate para Blogspot que me creara tu uno (Alejandro Sanchez – www.internetdeveloping.blogspot.com) así que tome su consejo y conseguí a JQuery y con ese concepto me invente 2 clases en CSS para los tags div, uno para cada lenguaje que quería y me cree un pequeño menú.

La primera cosa que hice fue descargarme el JQuery y poner en Java Script en un hosting gratis. Podemos encontrar la última versión de JQuery en su pagina http://jquery.com/ o la versión que yo estoy usando en http://blog.jquery.com/2009/01/21/jquery-131-released/

La segunda cosa que hice fue importar el Java Script al Header de BlogSpot, eso se hace logueandonos a nuestro blog y vamos a Diseño - > Editar HTML y arriba del cierre del head Colocamos esta línea de código:

<script src='http://developyourdream.net/js/jquery.js' type='text/javascript'/>

Donde /js/jquery.js is es la ruta del Java Script de JQuery.
Ejemplo:


La tercera cosa que tenemos que hacer es crear nuestras clases en CSS, yo me cree 4 clases, 2 para manejar los eventos de cambio de idioma y 2 para la expresión en si del idioma. Vamos a colocar estas Clases dentro del CSS del BlogSpot yo lo puse cerca del debajo del Footer y arriba del Cierre del CSS estas son las clases que cree:

.english {display:none;}
.spanish {}
.englishHandler {}
.spanishHandler {}

Ejemplo:


La Última cosa que tenemos que crear en la Configuración es un Mini Java Script el cual lo vamos a escribir arriba del Cierre del Header y abajo de donde importamos el JQuery.

<script type='text/javascript'>
$(document).ready(function() {
$("english").hide();
$(".spanish").show();
$(".englishHandler").click(function() {
$(".english").show();
$(".spanish").hide();
});
$(&quot;.spanishHandler").click(function() {
$(".english").hide();
$(".spanish").show();
});
});
</script>

Ejemplo:


Ahora vamos a la parte de Publicación del Post

Yo me cree un pequeño menú de la siguiente forma:

<span style="color: rgb(255, 0, 0); font-weight: bold;">Translation:</span>
<ul><li class="spanishHandler"><a href="#">Spanish <img class="imgNoBorder" src="http://developyourdream.net/img/spanish_flags.jpg" /></a></li><li class="englishHandler"><a href="#">English <img class="imgNoBorder" src="http://developyourdream.net/img/english_flags.jpg" /></a>
</li></ul>

Con este menú podemos hacer 2 cosas, copiar y pegarlo al inicio de cada post o que se coloque automáticamente, esto lo podemos lograr en Configuración -> Formato colocando el menú en el texto de entrada que dice Plantilla de entrada al Final:
Example Image:

En el Nuevo Post que vamos a crear colocamos todo el texto que sea en español dentro de los tags

<div class="spanish">HOLA MUNDO</div>

y todo el texto que sea en Ingles dentro de los Tags

<div class="english">HELLO WORLD</div>

Nuestro post debe quedar algo así:

My Native language is Spanish, and i like publishing thing that other people can read and see, and even sometime the can use, but I started this blog only in Spanish, so some people cant understand this language.

So I start look how to translate this page, and I found Qtranstlate, Buy it was only for word Press. So I googled Qtranslate for Bloggers or for BlogSpot and nothing came up.

So a friend told me, if you want a Qtranslate way don’t you do it yourself. (Alejandro Sanchez – www.internetdeveloping.blogspot.com ) so I did, I found JQuery and I did made 2 class for my div tags, one for each language.

The first Thing we have to do is download JQuery put the JavaScript in a free hosting page, you can find the last release of JQuery in this page http://jquery.com/ and the one I use is http://blog.jquery.com/2009/01/21/jquery-131-released/

The second thing we have to do is imported to the Header of our BlogSpot so we login in over blog and me go to Layout and then we go to Edit HTML and import with a script tag the JQuery, the tag should say something like this:

<script src='http://developyourdream.net/js/jquery.js' type='text/javascript'/>

were /js/jquery.js is your directory were you host the Java script of JQuery.

Example Image:


The next thing you have to do is to make is the CSS classes, I made 4 , 2 handlers and 2 expressions if we can called lake that and I route them at the end of the CSS close to the footer but you can write it any ware in the CSS and this classes are:

.english {display:none;}
.spanish {}
.englishHandler {}
.spanishHandler {}

Example Image:

The last thing is we have to in the layout is ouwer mini java script and we are going to write it over the end of the head and below the import of the JQuery.

<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.english&quot;).hide();
$(&quot;.spanish&quot;).show();
$(&quot;.englishHandler&quot;).click(function() {
$(&quot;.english&quot;).show();
$(&quot;.spanish&quot;).hide();
});
$(&quot;.spanishHandler&quot;).click(function() {
$(&quot;.english&quot;).hide();
$(&quot;.spanish&quot;).show();
});
});
</script>

Example Image:



Know the publish part:

I did my menu like this:

<span style="color: rgb(255, 0, 0); font-weight: bold;">Translation:</span>
<ul><li class="spanishHandler"><a href="#">Spanish <img class="imgNoBorder" src="http://developyourdream.net/img/spanish_flags.jpg" /></a></li><li class="englishHandler"><a href="#">English <img class="imgNoBorder" src="http://developyourdream.net/img/english_flags.jpg" /></a>
</li></ul>

And We can do two things, we can copy and paste the menu HTML in all our post OR we can automatically put it in post just adding the html in SETTINGS -> FORMATING in the formating we can find a input text named Post Template:

Example Image:

In the new post we what to create if we want to write in Spanish we surround the text with

<div class="spanish">HOLA MUNDO</div>

and if we that to write in English we surround the text with

<div class="english">HELLO WORLD</div>

and our ports will lock like this:
Example Image: