Traductor flotante con jQuery en Blogger

0
Category: , ,
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/AVvXsEjOotBw9_BwG1dJbOc2jjf-9uYOGL8M0NXQPVAF9Pkv7hclHo_BC4IXEAMWDPJLmNxCc3Xe7tN0aewcliqjJ-b4FB0SSYosIlO2IEDKKfx50FUdHBEV0fxip4RFidEi4nOTDWdLMAZaiAY/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/AVvXsEgP0h8TgOgMZ1MHWQYDe40i3FLlMgOBeJAm1hIu1gIiYIRIrvCoiEtYD87OiHeHaJ23pZ9G6hPJgvgWh6ou9HwbC3K-Y176ymp-VW_O7zJrIVsEq3tqrNYh2ohm1fQkimQHfDKs9m_Sxuc/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/AVvXsEiv2emCjldjLbMIEuQEiPBd3vR1PXapFHFeOw5wTEUzaPNyQbQbxeivuvN36rwtZEULr0vwbfG3oe9Y4waT_2aU5hBdIWyVSsu0dKVr5CgQ3lwJN8C_EGUSwkpKI4s6gw21XQ19Kj3xEwo/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/AVvXsEjL2TQeIKwSSObpomnPENsGhfN2GghLY5j7-sYN4PbVlT2B64JKLkJP-YeOVmlihOEkGzwMx2f64gRnlV3KBQJPJCeGnA-RwDW_z-BSowrajrL6z2l2QpHStM6R6QrN6UOVHZLJxhOQTG8/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/AVvXsEhDt4387ua6xttrwj-L4v0jsmik99th8wLV7cAuDTR2YArxOm8-UALfzweMlVqwnTOqZ7w0K3TDBiAii7hmxIDRKkzX6v4i4qxK4pIEvOrHBvPOncQQI44SmU3CE5HjBovsyRH56auQFrE/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/AVvXsEgI4u_bmXxCdlezHB4jGe0iAAdmnm-L8zArkEo3Ik3AWkjrPhYzo_GrXFyTiI_DcXojMUk7a-cOsY1VtC5_TlURkG4tUlMOvO9Q4mXNBaYeKcSs4EK3E8Vf_nHqRfKtHiExxu6oXJZ57M4/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/AVvXsEjFnJDx3KO5WcZkeQh0WHkrCP_vqV7m0neeZ2GBRhxlaZ9oaGkyFTEAzo5isRuMLWY8vec3VojZvgptHaD-YpMcHuXStMO3YZdAvMATCdvrnHZ8bIRcLaKjmlRyp5RjPx1GsBlv2NRqJpY/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/AVvXsEiUtENxVDpUG22UiBOjYfksPALpRv97Ou7fSWshGC8HXAhvMyRzK-1O9Rwdt4TovirDrlDZy5GlSbzhalsln6WhYrSk5MZ3XguoFjDHbx7CP6tB5AZXBpN1JfWtZGZqUkOCBaYChHI7H5w/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/AVvXsEhJiRcUxsx2QipuU0mLDyheJ17Mya-JeoFcHQUsTMFSqq7qHA4fqvcwAMLewHLNZoWd0zYuCx0MoXr-oO62bkAGFdbbxB8qGcyOlAhnnHoO-rshnE7JjxC6qY2A-8FCQcZBr8TlJZD9woc/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/AVvXsEhdfuCDIMZzqm1lqwy24hxIRM464KG_mTfi9QcYnIqEj-kbRTGtkngVGL0V4ao9devj7CycCew4Ip4uiCa-ddYMCQuv5mI6IndHGHg0uybcU-1jJelv03Mg7dt9vRjMKRLjFZjkfmLRbtA/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/AVvXsEiOwxovuPsqsqNcVFseVRoi-11RHbKpmg0Qxj5PQOrjx2yCCVV_rQvYxmmElgktAhBtPE2tUja77m0eQh4nMxQNXcVgTqT-JSvgOURRw87RNRdrG9aZfe7_gBl8bvMt1SkaTiJhmUWuEPs/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/AVvXsEigXlnA8wMiR-EVkIYwgFO7fTQAfEHL_rGBex2Nz7Srsd0zYY1JZELY0pLFDEjEs0aD5BgxbZszivkPIBCcERQb4hXeidzxF1wv1VbAhqBNjH-lmp0EXnSEt9AhPZsjBv93zBHjY3R8HmE/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.