Traductor flotante con jQuery en Blogger

Nota: para buscar algún código en especifico mas facil y rapido presiona "Ctrl +F"

En esta oportunidad creé un script que 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/AVvXsEjyGIBUR0bENjiASyyV9VP4wXA7uweMeOoouEC6faK1jbVoYWNIHAdA4rqJ-JPI9ydFStjZ8irhiPl8Cqsg3uVzOjESFcF3UCQq2oL8Bxn1zmRZM-JRMkT17GeHQmZjdLBUtImgbe4SpFQ/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/AVvXsEimGFTxyRTvF0qFYSh0RCURjiX-Dx2PV-MaaOjL09OUc6P4CnQEu2hoLsKDIMVKTIyaGNCcBMJ6muaWkOeJKAesaTpqGvKUyK6DSWtzJKPokKyjGMz15F1FMx2_BnJwCYcicw4PysJE_cU/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/AVvXsEjSu3nmACp1PSrDEOj-jFDgB7MPEVPQAIMbn6CZIk4glE7K2G2KN534sJdsX7FeujEbpI8OdrH5-0YGDKjOE5vPvJbAb87SLDl8Qq8rAmXnsUUHSmFnyQnM0-Q1vy1NUrhlzSLKHWYcCJA/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/AVvXsEh3ibKsWK9MZ11h94VgFm4vvhvcIxGgOwWvc8JysdjcD28sKDQY9stHLLady7jh6prsjFNP9BKUqEdipA392RhkD4OUOC-0og6yQhw_3KT37f7fs9Wx_s7vQyrX-M6uu_Rw91-oxNVqIGQ/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/AVvXsEiGbM0Umni0VSBvHvpNr12HnzTb9mp8oE6HICwWsUV4rc0xKRlfn0brG_TSTvNJdZgpKan-vr_3Gt69ZtNTStN2czfKdPCHky5EFFHKxeEDBIWZrJ3L9bQRFbmC0MCpEWMkC50ng9s7OqQ/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/AVvXsEiZQbhhyuga4dd0yyLAlMIn7GqKm1-sN7WnZidrRAXN3Y9S42CpDpXSYEfm-olMzAP4OeEPh0rwcYawFIOOTpL-8Iy8tf2UdPvTrOQFrtPhAZCKuS8f8iDnT5mWrdOuHAU8MTg8N0Sw6IU/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/AVvXsEifQ14ReE3uBUUM1_pMd66Wt2H9HkZfDVWViBzoZnybF_850waDaMtbg-bv0qz1np8JgBe3LnBGq1dZdYvvt6L8p-CycPzNX65t4h3VtObaWTCAQHW5f9TmJLpxKEG4Jla-_WXYGXbadjk/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/AVvXsEieRtoutzqb_6w5cV2zwpwXdIiwwUk4yzosd43IkCbMLf3NDtsJcp-S06UKLDPaTYH1tjrEZQ3GRLytW5ggfo1HhoFhBRs0i0MPp9C-l_aTT-rtO0qCLna7HQtpvxay-8bwCuUFj8yC_eE/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/AVvXsEj1psT7Dnb-pCPUS2D7Vh2LkGdCQu2BI8OL6fRgEdEaRJxPrLQZlE_TMa-rfobdEyikZaggjymbeBjuBl25G4AdM886b4KrYyxJEeWZ5Xxh5H2HL4un47zcSjEWXIVvt7RRWyTRLfs_DD0/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/AVvXsEiDcn9fYnW3hWeXIm2DmncTbGDd5buKqS3DjXpeMm5m5imoPghTSh5NbBEs45bpuRdohi6RwNrpJgGvJ4pd5UczA-EbjSHA-8zahf-X-0B22B7Dg0KjxIL8f5NCvP_FyMkro-tAqehsJp0/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/AVvXsEjE0RgAiaVgmox642qElADrp7Nh_fR3RmfKbeBZzaVdItJ7nfG2uA-NAY6SRK7gdrrALrSowM7vQ_q2EyPknJ4nKdeBkSTN6_fTLsAAFhztIPrVjNbD-XgyScWigzxCoZl14GQyWsauq5k/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/AVvXsEiUQJseyIN53fi3IFhP-oCbT4ABh1c-nEkN-by76cRGyTrggLD-oJm4no_ndUx-RwbdLuuKzPLU8Ks4fOd2ksqJvIWGpKLOv6uR73oTQL_l2MWjbk980bS2isNOt7VHDIzkJ6tZGvYIyAs/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.