Gratis dan Keren : Cara Memasang Widget Google Translate Minimalis dengan Ikon di Blogger

Gratis dan Keren : Cara Memasang Widget Google Translate Minimalis dengan Ikon di Blogger

Bengini cara buat widget/gadget Blogger Google Translate yang Premium dan geratis. Dari dulu nguprek baru kali ini dapet kode yang oke detelah berbagai prompt dan di buatkan Gemini, baca dengan teliti jika terjadi sesuatu pada tempalate anda itu tanggung jawab sendiri.

Punya pengunjung dari luar negeri tapi tampilan blog berantakan karena widget bawaan Google Translate yang terlalu besar? Solusinya adalah menggunakan Widget Translate Berbasis Ikon. Selain bikin blog terlihat lebih profesional, widget ini juga sangat hemat ruang!

Mengapa Memilih Widget Ikon?

• Minimalis: Hanya muncul satu ikon kecil yang rapi di menu atau sidebar.

• Modern: Menggunakan sistem dropdown, pilihan bahasa hanya muncul saat ikon diklik.

• Cepat: Tidak membebani loading blog karena skripnya sangat efisien.

---

HTML Javascript: Cara Memasang Widget Google Translate Minimalis dengan Ikon di Blogger

Aku sudah measang sebagai contoh di PISBON Computer ArtWork, PISBON AutoCraft dan Pisbon™ Research

Kode Widget (Copy & Paste)

Masukkan kode berikut melalui menu Tata Letak > Tambahkan Gadget > HTML/JavaScript di Blogger kamu:

HTML

<style>
  .translate-wrapper { position: relative; display: inline-block; }
  
  /* PENGATURAN IKON */
  #logo-translate {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px;
    transition: transform 0.2s;
  }
  
  #logo-translate img {
    width: 24px;  /* GANTI UKURAN LEBAR DI SINI */
    height: 24px; /* GANTI UKURAN TINGGI DI SINI */
  }

  /* PENGATURAN DROPDOWN */
  #google_translate_element {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 9999;
    background: #ffffff;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
    margin-top: 10px;
  }
</style>

<div class="translate-wrapper">
  <button id="logo-translate" onclick="toggleTranslate()">
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d7/Google_Translate_logo.svg" alt="Translate">
  </button>
  <div id="google_translate_element"></div>
</div>

<script type="text/javascript">
  function toggleTranslate() {
    var x = document.getElementById("google_translate_element");
    x.style.display = (x.style.display === "block") ? "none" : "block";
  }
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'id',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
      autoDisplay: false
    }, 'google_translate_element');
  }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

---

Cara Mengganti Ukuran Ikon

Banyak yang bingung bagaimana cara menyesuaikan besar-kecilnya ikon agar pas dengan ikon lain di blog (seperti ikon dark mode atau profil). Caranya sangat mudah:

1. Cari bagian kode CSS yang bertanda /* PENGATURAN IKON */.

2. Perhatikan baris width: 24px; dan height: 24px;.

3. Ubah angka tersebut:

   • Jika ingin lebih besar, ubah ke 32px atau 40px.

   • Jika ingin lebih kecil, ubah ke 20px atau 18px.

4. Pastikan angka width (lebar) dan height (tinggi) selalu sama agar ikon tetap berbentuk kotak sempurna dan tidak gepeng.

Penutup

Dengan trik sederhana ini, blog kamu tidak hanya ramah bagi pengunjung internasional, tapi juga tetap sedap dipandang mata. Selamat mencoba dan jangan lupa bagikan ke teman blogger lainnya!