Cara Menambah Widget Google Translate Pada Template Median UI 1.5

Saifullah.id - Widget Google Translate menjadi sangat penting bagi sebuah Blog jika pengunjung datang dari banyak Negara. Keberadaan widget ini pasti akan lebih mempermudah pengunjung dalam memahami artikel yang kita tulis.

CARA PASANG WIDGET TRANSLATE

1. Buka Dashboard Blogger

2. Klik menu Tema

3. Tekan icon Segitiga Terbalik

4. Pilih Edit HTML

5. Cari kode ]]></b:skin> supaya cepat, tekan Ctrl + F

6. Salin kode CSS Google Translate Saifullah.id

/* Google Translate Saifullah.id*/
#google_translate_element{padding:0;margin-right:3px;margin-top:auto}
.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,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g data-name='Google Translate' id='Google_Translate'><g data-name='&lt;Group&gt;' id='_Group_'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><line data-name='&lt;Path&gt;' id='_Path_3' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='&lt;Path&gt;' id='_Path_4' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='&lt;Path&gt;' id='_Path_5' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round' x1='17.5' x2='17.5' y1='9.5' y2='10.5'/><path d='M20,10.5c0,1.1-1.77,4.42-4,6' data-name='&lt;Path&gt;' id='_Path_6' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='&lt;Path&gt;' id='_Path_7' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='&lt;Path&gt;' id='_Path_8' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") 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:0px!important}.darkMode .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g data-name='Google Translate' id='Google_Translate'><g data-name='&lt;Group&gt;' id='_Group_'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><line data-name='&lt;Path&gt;' id='_Path_3' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='&lt;Path&gt;' id='_Path_4' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='&lt;Path&gt;' id='_Path_5' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round' x1='17.5' x2='17.5' y1='9.5' y2='10.5'/><path d='M20,10.5c0,1.1-1.77,4.42-4,6' data-name='&lt;Path&gt;' id='_Path_6' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='&lt;Path&gt;' id='_Path_7' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='&lt;Path&gt;' id='_Path_8' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;}

7. Letakkan kode CSS Google Translate di atas kode ]]></b:skin>

8. Lalu cari kode </body>

9. Salin kode Javascript Google Translate

<!--[ Javascript Google Translate ]-->
<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;id,en,ar,ja,ko,hi&#39;,layout:google.translate.TranslateElement.InlineLayout.SIMPLE},&#39;google_translate_element&#39;)}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});</script>

Keterangan
pageLanguage: artinya bahasa artikel yang kita buat (kalau blog kalian berbahasa Indonesia, kode id jangan diubah)

includedLanguage: artinya bahasa tujuan penterjemah (untuk menambahkan bahasa lain, ketik koma, lalu kode. Contoh kode awal: id,en,ar,ja,ko,hi lalu kita mau tambah bahasa Afrikaans, jadi: id,en,ar,ja,ko,hi,af

Kode Bahasa Yang Bisa Ditambahkan Ke includedLanguage

af (Afrikaans)

ar-dz (Arabic - Algeria)

ar-ly (Arabic - Libya)

ar-ma (Arabic - Morocco)

ar-sa (Arabic - Saudi Arabia)

ar-tn (Arabic - Tunisia)

ar (Arabic)

az (Azeri)

be (Belarusian)

bg (Bulgarian)

bn (Bengali)

bo (Tibetan)

bs (Bosnian)

ca (Catalan)

cs (Czech)

cy (Welsh)

da (Danish)

de-at (German - Austria)

de-ch (German - Switzerland)

de (German)

el (Greek)

en-au (English - Australia)

en-ca (English - Canada)

en-gb (English - Great Britain)

en-ie (English - Ireland)

en-nz (English - New Zealand)

en-us (English - United States)

es-do (Spanish - Dominican Republic)

es (Spanish)

eu (Basque)

fa (Farsi - Persian)

fi (Finnish)

fo (Faroese)

fr-ca (French - Canada)

fr-ch (French - Switzerland)

fr (French)

gd (Gaelic)

he (Hebrew)

hi (Hindi)

hr (Croatian)(

hu (Hungarian)

hy-am (Armenian)

id (Indonesian)

is (Icelandic)

it (Italian)

ja (Japanese)

ka (Georgian)

kk (Kazakh)

km (Khmer)

kn (Kannada)

ko (Korean)

lo (Lao)

lt (Lithuanian)

lv (Latvian)

mk (Maori)

ml (Malayalam)

mr (Marathi)

ms-my (Malay - Malaysia)

ms (Malay)

my (Burmese)

nb (Norwegian)

ne (Nepali)

nl-be (Dutch - Belgium)

nl (Dutch)

pa-in (Punjabi)

pl (Polish)

pt-br (Portuguese - Brazil)

pt (Portuguese)

ro (Romanian)

ru (Russian)

sd (Sindhi)

sk (Slovak)

sl (Slovenian)

sq (Albanian)

sr-cyrl (Serbian - Cyrillic)

sr (Serbian)

sv (Swedish)

sw (Swahili)

ta (Tamil)

te (Telugu)

th (Thai)

ttl-phh

tr (Turkish)

uk (Ukrainian)

ur (Urdu)

uz-latn

uz (Uzbek)

vi (Vietnamese)

yo (Yoruba)

zh-cn (Chinese - Simplified)

zh-hk (Chinese - Hong Kong)

zh-tw (Chinese - Taiwan)

10. Letakkan kode Javascript Google Translate di atas </body>

11. Kemudian kita cari tempat meletakkan tombol widgetnya. Karena saya pakai template median UI, jadi saya ingin meletakkan tombol translate ini tepat di samping tombol Darkmode / mode gelap (samping icon bulan), maka saya cari kode berikut <!--[ Dark mode button ]-->

12. Setelah ketemu, salin kode HTML Translate Button, lalu letakkan di atas kode <!--[ Dark mode button ]-->

<!--[ Translate Button ]-->
<div id='google_translate_element'/>

13. Simpan Template

HASILNYA

KELEBIHAN WIDGET TRANSLATE INI

1. Cepat
   Tidak mengganggu kecepatan blog, karena widget baru akan muncul setelah pengunjung scroll halaman.
2. Minimalis
   Tampilannya simpel, kecil, tapi tetap terlihat bahwa ini adalah tombol translate karena menggunakan icon Google Translate.
3. Customize Bahasa
   Bisa menambahkan dan mengurangi bahasa yang kita inginkan.
4. Userfriendly
   Pengunjung dari luar tidak perlu pakai tools lain untuk memahami isi blog kita.
5. Auto Translate
   Setelah pengunjung memilih bahasa yang diinginkan, bahasa tersebut akan terus aktif walau dia mengunjungi halaman lain di blog kita. Sehingga pengunjung tidak perlu pencet translate berkali-kali yang hanya akan membuat capek.

KEKURANGAN WIDGET TRANSLATE

Walau banyak kelebihan dari widget ini, tapi perlu di ingat bahwa widget ini bisa mengurangi score Best Practice pada Measure (web.dev). Jika awalnya score Best Practice kita 100, maka akan berubah jadi 93 setelah pasang widget ini. Untuk mengatasinya, silakan pakai Widget Google Translate versi Premium Klik Disini