Buka Tabungan Neo Bank & Dapatkan Hadiah Tunai 10Jt, Bisa Langsung Ambil!
Tanpa Syarat & Aman

Ambil

Cara Membuat Widget Google Translate Keren Di Blog

Cara memasang widget Google translate keren dengan CSS diblog. Cara membuat widget Google translate keren ini di blog. Google translate SEO Friendly.
Gambar Cara Membuat Widget Google Translate Keren Dengan CSS Di Blog
Cara Membuat Widget Google Translator Multi Bahasa di Blog - Widget translator atau translate ini berguna untuk menerjemahkan teks yang ada di blog kamu ke berbagai bahasa.

Widget Google translate ini akan sangat berguna untuk blog yang memiliki trafik yang tinggi dan tersebar luas ke seluruh dunia. 


Para pengunjung blog kamu yang berasal dari non-lokal akan merasa sangat terbantu dengan adanya widget Google translate ini. Karena mereka bisa membaca artikel blog kamu tanpa harus melakukan pemindahan bahasa di settingan browser yang sedang digunakan. Tapi cukup mengklik widget translate ini kemudian tinggal di pilih saja bahasa apa yang ingin di terapkan pada blog.

Cara memasang widget Google translate ini juga tidak susah-susah amat. Dan tidak terlalu memberatkan loading blog kamu. Widget Google Translate yang saya maksud dan yang akan kita pasang seperti gambar dibawah ini.
Gambar Cara Membuat Widget Google Translate Keren Dengan CSSDi Blog
Widget ini menggunakan CSS ya, bukan menggunakan widget bawaan yang di sediakan oleh Blogger. Jadi mungkin akan sedikit memberatkan loading blog kamu. Tapi untuk masalah desain, sudah pasti ini lebih keren dan terlihat lebih profesional.

Kalau kamu tertarik memasang widget Google translate ini di blog kamu, kamu bisa ikuti langkah-langkah dibawah ini untuk memasang widget Google translate ini di blog. Tapi sebelum lanjut, buatlah sebuah konsep terlebih dahulu untuk masalah penerapan widget ini. Kamu bisa pasang widget ini di bagian header blog (seperti gambar di atas), widget sidebar atau navigasi menu.

Cara Membuat dan Memasang Widget Google Translator / Translate Multi Bahasa Di Blog

  1. Buka dashboard blogger kamu » masuk ke menu Theme » Edit HTML
  2. Kemudian tambahkan CSS Google Translate dibawah ini ke dalam template kamu. Taruh sebelum ]]></b:skin> atau </style>
    /* CSS Google Translate By Dzuhalah */
    #google_translate_element{padding:0;margin-right:0;margin-top:0}
    .goog-te-banner-frame
    .skiptranslate,
    .goog-te-gadget-simple img,img.goog-te-gadget-icon,
    .goog-te-menu-value span{display:none!important}
    .goog-te-menu-frame{box-shadow:none!important}
    .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill='%23161617'/%3E%3C/svg%3E") center / 12px no-repeat;-webkit-transition:all 
    .2s ease;transition:all 
    .2s ease;background-size:20px 20px;display:inline-block;font-weight:400;line-height:1.8;padding:0 6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius:4px}body{top:0!important}
  3. Kemudian tambahkan kode dibawah ini untuk memasang widget ikon translate ini di blog. Seperti yang sudah saya bilang, kamu bisa pasang ikon ini di header blog dan yang lainnya. Tapi saran saya pasang ikon ini di header blog saja. Agar tampilan widget-nya tidak merusak tampilan blog.
    <div id='google_translate_element'></div>
    Kalau blog kamu support mode gelap, gabungkan CSS dibawah ini dengan CSS yang pertama tadi.
    .darkMode 
    .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill='%23fff'/%3E%3C/svg%3E") center / 12px no-repeat;-webkit-transition:all 
    .2s ease;transition:all 
    .2s ease;background-size:20px 20px}
  4. Langkah terakhir kamu taruh JavaScript dibawah ini diatas tag </body>.
    <script>/*<![CDATA[*/
    var lazyts=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyts||0!=document.body.scrollTop&&!1===lazyts)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/choipanwendy/[email protected]/translate.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0);
    /*]]>*/
    </script>
    <script>
    function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:&#39;id&#39;,includedLanguages:&#39;en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn&#39;,layout:google.translate.TranslateElement.InlineLayout.SIMPLE},&#39;google_translate_element&#39;)}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});
    </script>
  5. Kalau semua susunan kode diatas sudah dipasang di template blog kamu dengan benar, klik simpan tema dan lihat hasilnya.

Nah, itulah tutorial cara memasang widget Google translate keren berupa ikon dengan CSS yang bisa saya sampaikan di artikel kali ini. Semoga membantu bagi yang membutuhkan. Kalau masih bingung atau mengalami masalah saat penerapan markup, tanyakan langsung di kolom komentar.
There are many unique things in the world that you haven't seen

3 comments

  1. Waah keren mas widget nya. Ini yg saya cari dari dulu baru Nemu tutornya disini
  2. Ini yang saya cari-cari.Terima kasih atas tutorialnya mas. Sayangnya, saya yang orang awam ini, menerima beberapa masalah kecil saat memasang script dari mas.

    1. Icon google translate hanya akan keluar jika halaman di-scroll (seperti lazy image).
    2. Banner google untuk menerjemahkan muncul secara otomatis dibagian atas saat halaman di-scroll. Walaupun cukup mengganggu, sebenarnya poin ini tidak terlalu menjadi masalah jika pengunjung menggunakan desktop/tablet. Namun jika pengunjung menggunakan hp, pengunjung tidak dapat dapat menutup banner tersebut karena banner tadi tidak responsive (close button-nya tidak muncul dilayar).

    Saya harap komentar saya ini dapat menjadi masukan bagi mas dan saya juga berharap mas-nya mau untuk meng-update script-nya agar dapat berfungsi dengan lebih baik lagi. Saya tunggu artikel-artikel menarik lainnya dari mas. Terima kasih :).
    1. untuk icon google translate memang sengaja di pasang lazy load agar tidak terlalu berat. nanti akan saya update lagi dlm waktu dekat
Tulislah komentar unik, jelas dan tidak mengandung LINK AKTIF atau PROMOSI.