En Gadgets Blogger sabemos que llegar a más personas es clave para hacer crecer tu proyecto. Por eso, en este artículo te mostramos cómo agregar un traductor con banderas para que los visitantes puedan ver tu contenido en su idioma con un solo clic.
Tener un traductor visible y fácil de usar no solo mejora la experiencia de tus usuarios, sino que también puede aumentar tu tráfico internacional y ayudar a tu sitio a posicionarse mejor en Google.
Ventajas de un traductor con banderas en Blogger
- Más alcance internacional: tus publicaciones estarán disponibles para visitantes de todo el mundo.
- Mejor experiencia de usuario: una interfaz intuitiva y visual que invita a interactuar.
- Impulso para el SEO: más visitantes y más tiempo en tu página.
- Imagen profesional: tu blog se adapta a audiencias globales.
Cómo instalarlo
Con el siguiente código, podrás implementar el traductor de Google con banderas de forma sencilla. Solo copia y pega en la parte de DISEÑO de blogger en la sección que tú desees.
<!-- ===== TRADUCTOR CON BANDERAS (Blogger) ===== -->
<style>
.gtw {display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; justify-content:center; padding:.5rem}
.gtw a{display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; border:1px solid #e5e7eb; padding:.35rem .5rem; border-radius:999px; font:500 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background:#fff; transition:.2s}
.gtw a:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.06)}
.gtw img{width:18px; height:18px; border-radius:50%; display:block}
/* Oculta el selector por defecto de Google, lo necesitamos cargado pero no visible */
#google_translate_element { position:absolute; left:-9999px; top:-9999px; visibility:hidden; }
</style>
<div class="gtw" aria-label="Traductor">
<!-- Español primero (idioma original) -->
<a href="#" data-lang="es" title="Español" aria-label="Español"><img src="https://flagcdn.com/w20/es.png" alt="" /><span>ES</span></a>
<!-- Los que ya tenías -->
<a href="#" data-lang="en" title="English" aria-label="English"><img src="https://flagcdn.com/w20/gb.png" alt="" /><span>EN</span></a>
<a href="#" data-lang="fr" title="Français" aria-label="Français"><img src="https://flagcdn.com/w20/fr.png" alt="" /><span>FR</span></a>
<a href="#" data-lang="de" title="Deutsch" aria-label="Deutsch"><img src="https://flagcdn.com/w20/de.png" alt="" /><span>DE</span></a>
<a href="#" data-lang="it" title="Italiano" aria-label="Italiano"><img src="https://flagcdn.com/w20/it.png" alt="" /><span>IT</span></a>
<a href="#" data-lang="pt" title="Português" aria-label="Português"><img src="https://flagcdn.com/w20/pt.png" alt="" /><span>PT</span></a>
<a href="#" data-lang="ru" title="Русский" aria-label="Русский"><img src="https://flagcdn.com/w20/ru.png" alt="" /><span>RU</span></a>
<a href="#" data-lang="nl" title="Nederlands" aria-label="Nederlands"><img src="https://flagcdn.com/w20/nl.png" alt="" /><span>NL</span></a>
<a href="#" data-lang="ja" title="日本語" aria-label="日本語"><img src="https://flagcdn.com/w20/jp.png" alt="" /><span>JA</span></a>
<a href="#" data-lang="ko" title="한국어" aria-label="한국어"><img src="https://flagcdn.com/w20/kr.png" alt="" /><span>KO</span></a>
<a href="#" data-lang="zh-CN" title="简体中文" aria-label="简体中文"><img src="https://flagcdn.com/w20/cn.png" alt="" /><span>ZH</span></a>
<a href="#" data-lang="ar" title="العربية" aria-label="العربية" dir="rtl"><img src="https://flagcdn.com/w20/sa.png" alt="" /><span>AR</span></a>
<!-- +10 idiomas extra -->
<a href="#" data-lang="hi" title="हिन्दी" aria-label="हिन्दी"><img src="https://flagcdn.com/w20/in.png" alt="" /><span>HI</span></a>
<a href="#" data-lang="tr" title="Türkçe" aria-label="Türkçe"><img src="https://flagcdn.com/w20/tr.png" alt="" /><span>TR</span></a>
<a href="#" data-lang="pl" title="Polski" aria-label="Polski"><img src="https://flagcdn.com/w20/pl.png" alt="" /><span>PL</span></a>
<a href="#" data-lang="sv" title="Svenska" aria-label="Svenska"><img src="https://flagcdn.com/w20/se.png" alt="" /><span>SV</span></a>
<a href="#" data-lang="iw" title="עברית" aria-label="עברית"><img src="https://flagcdn.com/w20/il.png" alt="" /><span>HE</span></a>
<a href="#" data-lang="th" title="ไทย" aria-label="ไทย"><img src="https://flagcdn.com/w20/th.png" alt="" /><span>TH</span></a>
<a href="#" data-lang="vi" title="Tiếng Việt" aria-label="Tiếng Việt"><img src="https://flagcdn.com/w20/vn.png" alt="" /><span>VI</span></a>
<a href="#" data-lang="id" title="Bahasa Indonesia" aria-label="Bahasa Indonesia"><img src="https://flagcdn.com/w20/id.png" alt="" /><span>ID</span></a>
<a href="#" data-lang="ro" title="Română" aria-label="Română"><img src="https://flagcdn.com/w20/ro.png" alt="" /><span>RO</span></a>
<a href="#" data-lang="uk" title="Українська" aria-label="Українська"><img src="https://flagcdn.com/w20/ua.png" alt="" /><span>UK</span></a>
</div>
<!-- Contenedor requerido por Google (oculto) -->
<div id="google_translate_element"></div>
<script>
// Idioma original de tu blog
var PAGE_LANG = 'es';
// Carga del script oficial
(function loadGTranslate(){
var gt = document.createElement('script');
gt.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
gt.defer = true;
document.head.appendChild(gt);
})();
// Inicializa el elemento (aunque esté oculto)
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: PAGE_LANG,
autoDisplay: false,
includedLanguages: 'es,en,fr,de,it,pt,ru,nl,ja,ko,zh-CN,ar,hi,tr,pl,sv,iw,th,vi,id,ro,uk'
}, 'google_translate_element');
}
// Utilidad: setea la cookie que usa Google Translate y recarga
function setGTCookie(langTo) {
var googTrans = '/' + PAGE_LANG + '/' + langTo;
var exp = new Date(Date.now() + 365*24*60*60*1000).toUTCString();
document.cookie = 'googtrans=' + googTrans + ';path=/;expires=' + exp;
document.cookie = 'googtrans=' + googTrans + ';domain=.' + location.hostname + ';path=/;expires=' + exp;
}
// Maneja los clics en banderas
document.addEventListener('click', function(e){
var a = e.target.closest('.gtw a[data-lang]');
if(!a) return;
e.preventDefault();
var lang = a.getAttribute('data-lang');
// Volver al idioma original
if (lang === PAGE_LANG) {
document.cookie = 'googtrans=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;';
document.cookie = 'googtrans=;domain=.' + location.hostname + ';expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;';
location.reload();
return;
}
setGTCookie(lang);
// Si el combo ya existe, disparamos el cambio; si no, recargamos
var sel = document.querySelector('.goog-te-combo');
if (sel) {
sel.value = lang;
sel.dispatchEvent(new Event('change'));
} else {
location.reload();
}
});
// Oculta la barra superior de Google Translate si aparece
(function hideGToolbar(){
var st = document.createElement('style');
st.textContent = '.goog-te-banner-frame{display:none!important;} body{top:0!important;}';
document.head.appendChild(st);
})();
</script>
<!-- ===== FIN TRADUCTOR ===== -->Recomendaciones para sacarle el máximo provecho
- Colócalo en la parte superior del blog para que sea visible al instante.
- Usa banderas bien definidas y de tamaño uniforme para un diseño limpio.
- Revisa y ajusta manualmente las traducciones clave para mayor precisión.
0 Comentarios