Traductor flotante con jQuery en Blogger

Habíamos visto con anterioridad cómo añadir un sistema traductor en la sidebar en Blogger, en esta oportunidad creé uno a base del anterior, pero que éste tuviese la propiedad de ser flotante y animado a base de jQuery.

Puedes ver trabajando el script en este blog de pruebas

Importante: Si tienes jQuery instalado en tu plantilla no hará falta volverlo a añadir.

En ''Diseño | Edición HTML'' selecciona ''Expandir plantillas de artilugios''. Busca la siguiente línea:

]]></b:skin>

Debajo de esta, pega el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

Ahora busca la siguiente sección:

</head>

Arriba de esta, pega el siguiente código:

<script type='text/javascript'>
$(document).ready(function() {
var $sidebar = $(&quot;#traductor&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 55;
$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

Ahora busca la siguiente línea:

]]></b:skin>

Debajo de ésta pega el siguiente fragmento CSS:

#traductor {
float: left;
margin-left: 251px;
background: #000;
position: absolute;
border-radius: 6px;
width:40px;
border:6px solid #fff;
}
#traductor .contenido {
clear: left;
padding: 8px;
}

Guarda todos los cambios y listo.

Paso 4: Añadiendo el gadget:

Ahora en ''Diseño | Elementos de la página'' agrega un gadget ''HTML/Javascript'', en el cual deberás pegar el siguiente código:

<div id='traductor'>
<div class='contenido'>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQkEIi3u1_7gZXEMhf053c5KLQnfxR2Rdej3BU5vdzYnzIDyoui4qbZlDakyt9lGvskcLWzL5y-j3__dtwbPRTGWneUOGENgAQZcAoIIaR1TqSHvtV6wPqIX6lwzqHk20d55pjSX0-_-o/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7HJg_GP3RLC1spno4J3bkkBSFx_iZslHP_5klbo7pcxqVxw4ffd5vUj328Z7stEC3fi9bGTz7aYdEeRed1nPFdvxf2LpaMrAt-FXbwrzyrunaJ9fXHJhUJmWU51w_lEVGi34rbC0N5iU/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-_5IbbAWHHfpIMivq6xLLHSqTPW8KgsYMgcx3jzj7L97W32f4T9alWZhyphenhyphenk2EVY_TZAD4OTfwhqa9PNTTdDqIL5ZslhbqY1INl9L3a8vhslNwfmjDKjamIWd7qt-rR_Z7nrJ1XERPq6c4/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spanish" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spanish" border="0" align="absbottom" title="Spanish" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFz0Sm-3l4J1-tHjmCR9PIiOIAhhPGxeSWTf0Qoa389mU3h1qVTN_PzUP-m_JxAmJQHJD1AMT1W4SdrHHqqq0Rb7RkcioCx3oo8WVcHOdj4kaxBGrvH_BOS-Ov5UKSxOr1P4lYvgQWD0U/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvGOJVF3XvnD0qzpKw4qsMG9y1QSpJfTe9VYcbbLfz4ioVawIKa-u_vXEXDywACwkO8_CgICJWuasEHUaeN16iEpOjbip1n62kmJYzs_XYXaLdoC6eXZH3Y8fySI5cD74UY_c3e1miHfE/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyOvn7vf2voXnVuHm1xDgfihia4dGTGARy6lsVZ8m-WwE7bRBf906tkVZrxZ8GP8aQOiqgVLoA2FqS26C38_Ner9zK7XBKRmH6_I__BtrohFsnBnNYMoyYSRbF8yU1ALRC75Mz3Drlf8o/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGQYR9K0iUdtB8pgzG9d9a3XCvQK9CfJ5a6rJf0W5sNpB4NrtonscS5mdiicq7TcPqC1fT18qx62wX-2VmouPZ2iBUwPitk2Zc4d7rq5_mHWKmFhOovNG7AF7vvs-5GRTV0UA0unJmBY/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwSAwMySuR4nVmadE0vjthYhGB9TNJeW5IWIBmmTs_f8x5B2cFl8rh8hf7qapNZdhmpLgmcp1bNaSbhLdDUgapMb-a6NtodCdIRotTEwxBsX1OeZRFYMW4Tjwzy5Wl0sYpw2yHfEx_7F8/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZJzqJmCdMe8iJv4ePLOKWXDJvuTDgfNi2z7UR3m7BlyR35FLmOBi1V_kDLhOEs8UgD26aB4sdtGDoaIXpQZih5X-kiWwFfEZUxAEdpREYDsp0gbcoGw68vNmvD5rTYQwPQQc1QmxT164/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1D09t0VpXnMVIjJtYE8IdkTayPP29x6FAUFbvmZTU26DGIKSFJQiX1LjrgODS8Vk6Q5-LX-NS7mGF_wpnf43DCpwYQ454F4IX8vVV7k5k-p0BJfM5Z9PCzhJfshtMgyJtMIL_JFfGFfk/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONWuzJ4RWx89-FamTkP1rCIKmkVcl7kGX4fFLLqBMapBa2jq3ONK8m9kHmVyCbhJ09Wp0x3bC_GXVxpUY6KPxxZ-AD1QrWqAwM5v-cVidXAbVkZbZGTIEgoPJsA6hurMCsT6E4fS0MWw/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIfI_Req5TGgFDAxYuiJETae4_UUyRA5jZdTJr3H0BmlExcefQK98wqkJtIlhch_ZCcD7hRPbxEhf43fgKmQhhK2TIyk3IiCGVLToOLW6hFAxE3SULfosIz0G63DObxlJQDxPdNiBNu3M/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
</div>
</div>

Guarda el gadget y listo.

• Si el traductor se ve sobrepuesto o muy lejos, cambia el siguiente atributo:

margin-left: 251px;

Un valor mayor o menor hará que el gadget aumente el margen o disminuya.

•  Si deseas que el traductor aparezca a la izquierda, simplemente utiliza un valor negativo, es decir:

margin-left: -600px;

Recuerda que ninguna plantilla es igual a otra, por lo que deberás setear manualmente el valor para darle una mejor ubicación.