domingo, 8 de agosto de 2010

Imagen de traducir y versión para móvil con Google

Daremos la opción de traducir el blog de Español a Ingles o Portugués, y/o cambiar a una versión para móvil.

Se va a utilizar una sola imagen con la técnica de CSS Sprites.


Primero descargamos la imagen y la subimos a nuestro servidor.

Ir a Diseño, Edición de HTML y justo arriba de ]]></b:skin>

Poner el siguiente código cambiando el link de la imagen:

.trans-vku a { background: url(URL IMAGEN/transl.png) no-repeat; width:25px; height:18px; display:block;float:left;filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE 8 Transparency--*/ }
.trans-vku a:hover {filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*--IE 8 Transparency--*/ }

.trans-vku1 { background-position: bottom left!important }
.trans-vku2 { background-position: -30px bottom!important }
.trans-vku3 { background-position: -60px bottom!important }

a.trans-vku1:hover { background-position: top left!important }
a.trans-vku2:hover { background-position: -25px 0!important }
a.trans-vku3:hover { background-position: -55px 0!important }


Ahora justo abajo de <body>

Poner el siguiente código:

<span class='trans-vku' style='border: 0 !important; left:840px;top:2px;position:absolute;z-index:111'>
<a class='trans-vku1' href='#' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=es%7Cen&amp;en=es&amp;en=UTF8&quot;); return false;' title='[Spanish to English...]'/>
<a class='trans-vku2' href='#' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=es%7Cpt&amp;hl=es&amp;ie=UTF8&quot;); return false;' title='[Spanish to Portuguese...]'/>
<a class='trans-vku3' href='http://www.google.com/reader/m/view/feed/http://feeds.feedburner.com/blogspot/qygH' title='[Versión para móvil...]'/>
</span>

Cambiamos la URL del feed: http://feeds.feedburner.com/blogspot/qygH (Ver tutorial)

Adaptamos la posición que se va a mostrar:

left:840px: Distancia desde la izquierda.
top:2px: Distancia desde arriba.

Desde Vista Previa vemos como queda, y si nos gusta guardamos la plantilla.

Ejemplo en el menú superior del blog.

No hay comentarios:

Publicar un comentario