Memasang sebuah fitur Translate atau terjemahan pada suatu halaman berbahasa asing memang sangat membantu sekali bagi siapapun yang menggunakannya, terlebih ketika kita megunjungi website berbahasa inggris, kemudian kita ingin menerjemahkannya kedalam Bahasa Indonesia pun sebaliknya. Memasang Widget Google Translate Di Blog ini akan sangat membantu.
Kebanyakan browser saat sudah menyediakan fitur Google Translate atau terjemahan pada browser mereka. Khususnya chrome, Namun pada sebagian browser masih sulit mendapatkan fitur ini.
Fungsi Memasang Widget Google Translate
Dengan adanya tombol khusus terjermahan pada blog, maka Kalian bisa menargetkan kemanapun pengunjung/pembaca artikel kalian. Tinggal sesuikan bahasa yang akan ditambahkan dalam fitur ini nantinya.
Memasang Widget Google Translate Ini berfungsi menterjemahkan artikel blog ke dalam bahasa lain. Sehingga pengunjung blog yang datang dari berbagai negara dapat membaca artikel pada blog tanpa perlu copy paste artikel
Pengaruh Memasang Widget Google Translate pada Pagespeed
Yang namanya widget pihak ke 3 tidak ada yang ringan, karena menggunakan js external, sekilas terlihat pendek namun di dalamanya memiliki kode yang sangat amat panjang, dan biasanya di dalam masih terdapat css dan js external lagi seperti widget google translate ini.
Tapi agar widget translate ini tidak memberatkan loading blog, maka script google translate ini saya hosting ke github dan menggunakan lazyload untuk menunda pemuatan scriptnya.
Script baru akan di load saat user melakukan scroll pada halaman. Untuk demonya kalian bisa rasakan sendiri kecepatan load blog ini. Dan berdasarkan pengetesan, widget ini sama sekali tidak mempengaruhi pagespeed blog.
Baiklah untuk cara Memasang Widget Google Translate di Blog silahkan ikuti langkah berikut ini.
PENTING!
Biasakan melakukan backup Tema kalian sebelum melakukan peng-editan.
Pada dashboard Blogger pilih Tema/Theme kemudian Backup. Jika sudah mari kita lanjutkan.
Cara Memasang Widget Google Translate Ringan Di Blog
Step 1 : Silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>
CSS ini berfungsi untuk menyembunyikan tampilan asli widget ini yang menurut saya kurang menarik dan terlalu mencolok logo googlenya, jadi saya mengubahnya menjadi icon svg agar lebih simple.
#google_translate_element{padding:0;margin-right:5px;margin-top:15px}
.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='<Group>' 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='<Path>' 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='<Path>' id='_Path_' style='fill:none;stroke:%2308102b;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='<Path>' 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='<Path>' id='_Path_2' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='<Path>' id='_Path_4' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='<Path>' id='_Path_5' style='fill:none;stroke:%2308102b;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='<Path>' id='_Path_6' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='<Path>' id='_Path_7' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='<Path>' id='_Path_8' style='fill:none;stroke:%2308102b;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}
/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.dark-mode .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='<Group>' 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='<Path>' 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='<Path>' id='_Path_' style='fill:none;stroke:%23d2d0d0;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='<Path>' 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='<Path>' id='_Path_2' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='<Path>' id='_Path_4' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='<Path>' id='_Path_5' style='fill:none;stroke:%23d2d0d0;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='<Path>' id='_Path_6' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='<Path>' id='_Path_7' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='<Path>' id='_Path_8' style='fill:none;stroke:%23d2d0d0;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;}
jika posisi kurang pas dengan template kalian silakan atur css yang telah saya tandai di atas.
margin-right:5pxsemakin besar nilainya maka icon akan semakin ke kiri.
margin-top:15pxsemakin besar nilainya maka icon akan semakin ke bawah.
%2308102bwarna icon , wajib menggunakan %23 sebagai tanda #
Step 2 : Silakan salin kode di bawah ini dan letakkan di bawah header atau di mana kalian ingin menampilkan icon translatenya.
<div id='google_translate_element'></div>
Step 3 : Letakkan javascript di bawah ini tepat di atas kode </body> atau <!--</body>--></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="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0);
/*]]>*/
</script>
<script>
function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'id',includedLanguages:'en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(".hover").mouseleave(function (){$(this).removeClass("hover")});
</script>
Bagian yang saya tandai adalah kode bahasa yang ingin di tampilkan, kalian boleh menghapusnya jika di rasa tidak memerlukan bahasa tersebut. bagian pageLanguage:'id silakan sesuaikan kode bahasa blog kalian. jika sudah jangan lupa untuk klik simpan
Alternatif Icon
Di bawah ini saya menyediakan 3 icon tambahan jika di rasa icon di atas kurang cocok dengan Blog Kalian
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
M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z
M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z
Daftar Kode Bahasa
Kode Bahasa:
| Kode | Bahasa |
|---|---|
| id | Indonesia |
| js | Jawa |
| su | Sunda |
| en | English |
| vi | Vietnam |
| zh-CN | China (Aks. Sederhana) |
| zh-TW | China (Aks. Tradisional) |
| th | Thailand |
| ru | Rusia |
| ms | Melayu |
| ko | Korea |
| ja | Jepang |
| it | Italia |
| hi | Hindi |
| fr | Prancis |
| es | Spanyol |
| de | Jerman |
| ar | Arab |
| ps | Pashto |
| pt | Portugis |
| hmn | Hmong |
| hr | Kroat |
| ht | Kreol Haiti |
| hu | Magyar |
| yi | Yiddi |
| hy | Armenia |
| yo | Yoruba |
| ig | Igbo |
| af | Afrikans |
| is | Islan |
| am | Amhara |
| iw | Ibrani |
| az | Azerbaijan |
| zu | Zulu |
| ro | Rumania |
| ceb | Cebuano |
| be | Belarussia |
| bg | Bulgaria |
| rw | Kinyarwanda |
| bn | Bengali |
| bs | Bosnia |
| sd | Sindhi |
| ka | Georgia |
| si | Sinhala |
| sk | Slovakia |
| sl | Slovenia |
| sm | Samoa |
| sn | Shona |
| so | Somali |
| sq | Albania |
| ca | Katala |
| sr | Serb |
| kk | Kazak |
| st | Sesotho |
| km | Khmer |
| sv | Swensk |
| sw | Swahili |
| ku | Kurdi |
| co | Korsika |
| ta | Tamil |
| ky | Kirghiz |
| cs | Ceko |
| te | Telugu |
| tg | Tajik |
| la | Latin |
| lb | Luksemburg |
| cy | Wales |
| tk | Turkmen |
| tl | Tagalog |
| da | Denmark |
| tt | Tatar |
| lt | Lituania |
| lv | Latvia |
| ug | Uyghur |
| uk | Ukraina |
| mg | Malagasi |
| mi | Maori |
| ur | Urdu |
| mk | Makedonia |
| haw | Hawaii |
| ml | Malayalam |
| mn | Mongol |
| mr | Marathi |
| uz | Uzbek |
| mt | Malta |
| el | Yunani |
| eo | Esperanto |
| my | Burma |
| et | Estonia |
| eu | Basque |
| ne | Nepal |
| fa | Farsi |
| nl | Belanda |
| no | Norsk |
| fi | Finlandia |
| ny | Chichewa |
| fy | Frisia |
| ga | Gaelig |
| gd | Gaelik Skotlandia |
| gl | Galisia |
| xh | Xhosa |
| pa | Punjabi |
| ha | Hausa |
| pl | Polandia |
| ps | Pashto |
| pt | Portugis |
| ht | Kreol Haiti |
| is | Islan |
| lo | Laos |
| or | Odia (Oriya) |
| gu | Gujarati |
| tr | Turki |
Khusus Pengguna Template Median-UI 1.6
Step 1 : Silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>
body{top:0!important}
.goog-te-gadget-simple:after{content:'';position:relative;height:100%;width:50px;padding:10px;z-index:2;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='<Group>' 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='<Path>' 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='<Path>' id='_Path_' style='fill:none;stroke:%2308102b;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='<Path>' 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='<Path>' id='_Path_2' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='<Path>' id='_Path_4' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='<Path>' id='_Path_5' style='fill:none;stroke:%2308102b;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='<Path>' id='_Path_6' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='<Path>' id='_Path_7' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='<Path>' id='_Path_8' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;background-size:20px 20px}
.drK .goog-te-gadget-simple:after{content:'';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='<Group>' 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='<Path>' 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='<Path>' id='_Path_' style='fill:none;stroke:%23d2d0d0;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='<Path>' 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='<Path>' id='_Path_2' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='<Path>' id='_Path_4' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='<Path>' id='_Path_5' style='fill:none;stroke:%23d2d0d0;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='<Path>' id='_Path_6' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='<Path>' id='_Path_7' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='<Path>' id='_Path_8' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;background-size:20px 20px}
.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;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius:4px}
Step 2 : Cari dengan menggunakan ctrl + F kode seperti di bawah ini
<!--[ Profile button ]-->
<label class='tPrfl tIc bIc' expr:aria-label='data:item' for='offPrf'><b:include name='profile-icon'/></label>
</li>
</b:if>
Jika sudah ketemu letakkan kode ini tepat di bawah kode </b:if>
<div class='tIc bIc' id='google_translate_element'/>
Step 3 : Letakkan javascript di bawah ini tepat di atas kode <!--</body>--></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/leonjorel/webmanifest-kuymase@main/google-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:'id',includedLanguages:'en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(".hover").mouseleave(function (){$(this).removeClass("hover")});
</script>
Sampai di sini kita sudah berhasil memasang widget google terjemahan yang ringan di blog. Silahkan dicoba fitur barunya.
Original Post :
Wendy Cung - www.wendycode.com