Cara Membuat Widget Translate Bahasa di Blogger

anaksmanda.com - Ingin menambahkan fitur penerjemah bahasa agar pengunjung dari berbagai negara lebih mudah memahami isi blog kalian? Salah satu caranya adalah menyediakan tombol yang mengarahkan pembaca ke Google Translate. Pada artikel ini, kita akan membahas cara membuat widget translate sederhana di Blogger, lengkap dengan preview dan kode HTML yang bisa kalian sesuaikan.

Perlu diketahui, layanan TranslateThis yang dahulu populer sudah menggunakan skrip lama. Selain itu, Google mengumumkan bahwa Website Translator Widget miliknya tidak lagi didukung mulai 1 Oktober 2026. Karena itu, tutorial ini menggunakan alternatif berupa pemilih bahasa yang membuka Google Translate, bukan mengandalkan widget penerjemah situs lama.

Apa Itu Widget Translate di Blogger?

Widget translate adalah elemen pada blog yang membantu pengunjung menerjemahkan halaman ke bahasa lain. Widget dapat ditempatkan di sidebar, footer, atau bagian lain yang mendukung gadget HTML/JavaScript.

Contoh berikut menyediakan pilihan bahasa dan tombol untuk membuka Google Translate. Perlu diingat, metode ini mengarahkan pengunjung ke layanan penerjemah eksternal dan tidak menjamin halaman akan diterjemahkan langsung di dalam blog.

Contoh Tampilan Widget Translate

Berikut contoh sederhana yang dapat kalian coba. Pilih bahasa, lalu klik tombol untuk membuka Google Translate.

Catatan: Preview ini adalah contoh tombol pengarah ke Google Translate. Hasil dan dukungan URL tujuan bergantung pada layanan Google Translate; tombol ini bukan sistem penerjemahan internal Blogger.

Cara Memasang Widget Translate di Blogger

Ikuti langkah-langkah berikut untuk memasang widget di blog kalian.

1. Masuk ke Dashboard Blogger

Buka Blogger.com, lalu pilih blog yang ingin kalian tambahkan widget penerjemah bahasa.

2. Buka Menu Tata Letak

Pada menu sebelah kiri, klik Tata Letak. Pilih area tempat widget akan ditampilkan, misalnya sidebar atau footer.

3. Tambahkan Gadget HTML/JavaScript

Klik Tambahkan Gadget, kemudian pilih gadget HTML/JavaScript. Masukkan judul, misalnya Translate Bahasa, lalu tempelkan kode berikut ke dalam kolom konten.

Kode HTML Widget Translate

Salin seluruh kode di bawah ini ke gadget HTML/JavaScript. Kode ini menggunakan HTML, CSS, dan JavaScript sederhana tanpa memuat skrip TranslateThis lama.

<!-- Widget Translate untuk Blogger --> <div class="translate-blog-widget"> <label for="translateBlogLanguage"> Pilih Bahasa: </label> <select id="translateBlogLanguage"> <option value="en">English</option> <option value="id">Bahasa Indonesia</option> <option value="ms">Bahasa Melayu</option> <option value="ar">Arab</option> <option value="ja">Jepang</option> <option value="fr">Prancis</option> <option value="de">Jerman</option> </select> <button type="button" onclick="translateBlogPage()"> Terjemahkan </button> </div> <style> .translate-blog-widget { max-width: 100%; padding: 14px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; font-family: Arial, sans-serif; } .translate-blog-widget label { display: block; margin-bottom: 8px; color: #1f2937; } .translate-blog-widget select, .translate-blog-widget button { box-sizing: border-box; width: 100%; margin-bottom: 8px; padding: 10px; border-radius: 5px; font-size: 14px; } .translate-blog-widget select { border: 1px solid #cbd5e1; background: #fff; color: #1f2937; } .translate-blog-widget button { border: 0; background: #2563eb; color: #fff; cursor: pointer; } .translate-blog-widget button:hover { background: #1d4ed8; } </style> <script> function translateBlogPage() { var language = document.getElementById( 'translateBlogLanguage' ).value; var pageUrl = window.location.href; var translateUrl = 'https://translate.google.com/translate?sl=auto&tl=' + encodeURIComponent(language) + '&u=' + encodeURIComponent(pageUrl); window.open(translateUrl, '_blank', 'noopener'); } </script>

4. Simpan dan Periksa Hasilnya

Klik Simpan pada gadget, kemudian simpan perubahan Tata Letak jika diminta. Buka blog kalian dan uji pilihan bahasa serta tombol terjemahan.

Penjelasan Kode

• HTML: Membuat pilihan bahasa dan tombol terjemahan.
• CSS: Mengatur warna, jarak, garis tepi, dan ukuran agar widget lebih rapi.
• JavaScript: Mengambil bahasa pilihan dan alamat halaman yang sedang dibuka, kemudian menyusun tautan Google Translate.
• window.open: Membuka tautan penerjemah pada tab baru.

Bagaimana dengan Kode TranslateThis yang Lama?

Artikel lama mungkin menggunakan kode seperti berikut:

<!-- Kode lama TranslateThis --> <div id="translate-this"> <a class="translate-this-button" href="http://www.translatecompany.com/"> translate </a> </div> <script src="http://x.translateth.is/translate-this.js"></script> <script>TranslateThis();</script>

Kode tersebut bergantung pada skrip eksternal lama yang menggunakan HTTP. Skrip seperti ini dapat gagal dimuat, tidak kompatibel dengan lingkungan modern, atau menimbulkan masalah ketika blog menggunakan HTTPS. Karena itu, sebaiknya jangan mengandalkannya tanpa memastikan layanan tersebut masih aktif dan aman.

Google juga menyatakan bahwa Website Translator Widget miliknya tidak lagi didukung mulai 1 Oktober 2026. Untuk kebutuhan penerjemahan otomatis yang berkelanjutan, Google menyarankan penggunaan Google Cloud Translation API. API tersebut merupakan layanan terpisah dan dapat menimbulkan biaya sesuai penggunaan. Baca pengumuman resmi di Google Search Central.

Tips Sebelum Memasang Widget

• Letakkan widget di area yang mudah ditemukan, tetapi tidak mengganggu isi artikel.
• Gunakan desain responsif agar tetap nyaman dibuka melalui ponsel.
• Uji tombol pada beberapa halaman blog, bukan hanya halaman beranda.
• Pastikan tema Blogger tidak menghapus atau menonaktifkan JavaScript pada gadget.
• Ingat bahwa tombol ini membuka layanan eksternal dan tidak menerjemahkan konten secara langsung di dalam halaman blog.

Baca Juga

Kesimpulan

Menambahkan tombol translate di Blogger dapat dilakukan melalui gadget HTML/JavaScript. Contoh pada tutorial ini menyediakan pilihan bahasa dan membuka Google Translate pada tab baru. Metode ini relatif sederhana, tetapi tidak sama dengan widget yang menerjemahkan seluruh halaman secara langsung di dalam blog.

Sebelum menerapkan kode pada blog utama, uji terlebih dahulu pada tampilan desktop dan ponsel. Jika kalian membutuhkan penerjemahan otomatis yang terintegrasi penuh, pertimbangkan layanan API penerjemahan dan perhitungkan biaya serta kebutuhan pemeliharaannya.