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.
0 comments:
Post a Comment