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("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=es%7Cen&en=es&en=UTF8"); return false;' title='[Spanish to English...]'/>
<a class='trans-vku2' href='#' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=es%7Cpt&hl=es&ie=UTF8"); 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.

C dijo...: gracias por tomarte el tiempo de entrar en el blog y comentar!!! espero que de a poco vaya entrando mas gente, la verdad que cuando empece con esto no me imaginaba que me iba a atrapar tanto. si que lo disfuto. saludos.; 9 de agosto de 2010, 0:53
Alberto Fuentes dijo...: wooow, muchas gracias me funciono muy bien y quedo perfecto en mi log, gracias y espero que te des una vuelta pra que veas como quedo :D; 20 de septiembre de 2010, 23:42

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.