Banderas de traducción en el menú

Me preguntan en un comentario:

Tengo en el blog un menú como el que tienes en la parte superior de tu blog, y querría poner unas banderitas para traducir el blog. ¿Podrías decirme como hacer para incluirlas en el menú?

Cualquier menú tendrá una estructura parecida a esta:

<div id="tabsmenu">
<ul>
<li><a href="#"><span>INICIO</span>
</a></li>
<li><a href="mailto:direccion email"><span>CONTACTO</span></a></li>
<li><a href="http://www.blogger.com/"><span>BLOGGER</span></a></li>
<li><a href="http://www.google.es"><span>GOOGLE</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/"><span>EL ESCAPARATE</span></a></li>
</ul>
</div>

Como véis en el ejemplo, en este caso es una lista colocada dentro de un <div> así que, como cualquier lista, comienza con la etiqueta <ul> termina con la etiqueta de cierre </ul> y dentro de estas se incluyen los "item" o enlaces del menú, que comienzan con la etiqueta <li> y terminan con la correspondiente etiqueta de cierre </li>.

Para colocar cualquier otro "item" o pestaña nueva en el menú, tendríamos que hacerlo colocando el código correspondiente entre <ul> y </ul>, en el caso de las banderitas de traducción, lo haremos justo antes del cierre (</ul>):

<div id="tabsmenu">
<ul>
<li><a href="#"><span>INICIO</span>
</a></li>
<li><a href="mailto:direccion email"><span>CONTACTO</span></a></li>
<li><a href="http://www.blogger.com/"><span>BLOGGER</span></a></li>
<li><a href="http://www.google.es"><span>GOOGLE</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/"><span>EL ESCAPARATE</span></a></li>
<li><a href="URL_DEL_BLOG_TRADUCIDO_A_INGLES">
<img alt="Translate to English" src="URL_DE_IMAGEN_BANDERA_INGLESA" title="Translate to English"/></a><a href="URL_DEL_BLOG_TRADUCIDO_A_POTUGUES"><img alt="Traduzir para o Português" src="URL_DE_IMAGEN_BANDERA_PORTUGUESA" title="Traduzir para o Português"/></a></li>
</ul>
</div>

Procuraremos no usar unas imágenes demasiado grandes para las banderitas o el menú podría desconfigurarse...

Para hacer la traducción del blog, usaremos el servicio de traducción de Google, para ello colocamos la url de nuestro blog allí y una vez traducido al idioma que necesitamos, copiamos la url del navegador y la colocamos en el código donde dice URL_DEL_BLOG_TRADUCIDO_A... el idioma que sea.

Como la url resultante en Google es "enorme" podemos hacer uso de una página online para acortar direcciones como notlong o url(x) entre otras.

También puedes hacerlo desde aquí mismo a través de este pequeño formulario que usa el servicio de TinyURL

Ingresa la URL completa a acortar :