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

¿Cómo añadirlo en Blogger?

Paso 1: Añadiendo jQuery:

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'/>

Paso 2: Añadiendo los valores y atributos del script:

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>

Paso 3: Añadiendo los estilos y flotaciones:

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/AVvXsEhXJJ7_fMSnCEMoWtRmPIbHQuCH5tQoI0BGRjtL7fLlEstqsqHEEHcDOi-8w_qSJjK_OJpaZD3K-Vac0upDXDB_qheaFXiJk1WPd3ehOqaRGEiXxnwhq0UtCBXEyS126cy-gzCwUzm3vNE/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/AVvXsEiUCgcJuAYTlbe7rHjcAhAqAc0UsTMmSRpMo8gGhPs0GDa6klsYUCSiiO8290tSvbcxNpi5Rj23Kz2B-1zEeXNDjyB3G9mj81rxgF7iNNPzUWHPMrRyN8IryQmNC_pqUnKF_ph7wXw6Y9o/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/AVvXsEi3KUF3qIL1Oci0K7_VRFY_Qwa4wdRYBhNUHDv8kCbt8CovT1V9MV1uh7LEivXZ8pxKceYJYMI2foDhyphenhyphenZaRKNNoS2m26Pv6dxADM_pkBk0zDYQmoO-Dt8RDreq04FZiN9lLCwwQYClgHC4/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/AVvXsEgjbuOEaQH_D_msY4NxeGMc-bfPBDAte9LxtWF0v8vQzF7BnrAY-rGxu9aNvle_FHnrBWSM2NW-RlyfudR4ImHbuYnXuNX8WsFUU7gTH-0lKfV3rtUX80XFu-scKNT4gzIp3UarDBhr9mw/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/AVvXsEjntYoUDy0uQYoHI00AFucoeMI0nY0R7bSC1fl2Ffh0sU-zny45xI-kfUjlfhEhUZW8LC6DsJiVADqUogrEi3hyphenhyphenZV0hxorLvZB0Vy9HlgVJl9n7sTJcgi-XFFmpSPv4yNCllWGpVHIW6UI/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/AVvXsEiHwNuUSKTC6u1_9ydTs7pps8ZNkgxow-egSEnObq8o5PZ12ztIJFIVtRilfhSwJsQDjyXxkN8Dt9ZzIZbyWNdEPphqwI7ziChgRd5d1QHgpvJeiew-wM-8fQdpmbxzoWqGslWYQleXjdM/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/AVvXsEiYEZOq5QRToS-3kOgjghu25LmHMym05Y4fauhRRcNfMnIvhejh0pqlpTDWDIW2DyzaczYAET95RLPzs_l1rBUw2yGWbwm-BmTSOqhkr1Ff7M9NbyNxemshPCfkAWztDCj141k7LloOzfQ/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/AVvXsEgkin9tQBWRO-aLWeNo5ateqYSPPjRQsIbbkppYGhPG3-0CY-z2BHBru8OI-Knf_f0WSGQBbnUM_4Gv63GCyTZKgMidZPoTf4tkpCM8VztOU5pt-CkbQB5c86AzHl3vDuMedvw51teVlng/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/AVvXsEj804iiH6plsUsItzVk9OCcTfs5zfSF5is9PgqT0B0vE3Q4GeiciX9RjTjkboaY3z77cdswHj35f02YGIyNBMKW6a_2zQ5wwX-gsxjIfIfk84xryHHbs5hobxQq-mnKBPt-Q367SoVmS34/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/AVvXsEgYaNgInXImxQwANn9yWgCjPa_ab4wd0Cg4pzWC25p36n0E6lqRMbUDrumxPOSyaYZ2rdR8gye315UBuWECaye2Fn-Wl3TYxRjVvU-taIFoOw24-XP-Rjoz1LTMxtTqR4H2qR5cDOFHCbI/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/AVvXsEhMsqOquj1x35YIlYwqM73n12sdQQo64t70Wd9TsJDxVHz6cpWnaKsKiXCKxr7Orn5BumzPz9XT-qrYrIZ1opxMt-f-82cNiffxtVaUt1wPKfqI57SYKWRz5IOvWdzKKZ7Bl8WnDy-46nI/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/AVvXsEjN4HuGQM2tkphQT13Y28JuF0i46M8RvgN0vpQtVPuAsqLB03-lWv4IgQzaEkfxqsn6sxmNewemy1l9OQp2lVBJyoAl2qHVmq-vb3JlEjU2UdonHy44EXju7umCCkYIoE3oOhWGRHv0mX0/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
</div>
</div>

Guarda el gadget y listo.

Consideraciones:

• 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.