Cara Memasang Widget Google Translate Yang Ringan Di Blogger

Table of Contents
Cara Memasang Widget Google Translate Yang Ringan Di Blogger

Fitur google translate dewasa ini memang sangat memudahkan bagi kita yang ingin membaca atau mempelajari suatu artikel dalam bahasa asing. Seperti contohnya kita membaca halaman artikel menggunakan bahasa ingggris, kemudian kita ingin menerjemahkannya ke dalam bahasa indonesia ataupun sebaliknya.

Memang saat ini browser modern sudah dibekali dengan fitur Auto Translate salah satunya seperti Google Crhome. Namun memasang widget Google Translate pada blog/website juga sebaiknya diperlukan karena mengingat kebanyakan orang mungkin membuka blog/website kita menggunakan browser yang belum terdapat fitur Auto Translate.

Fungsi Widget GTranslate

Dengan munculnya penambahan fitur translate, maka kita bisa menargetkan pengunjung blog dan bisa menyesuaikan bahasa apa saja yang akan ditambahkan nantinya.

Widget ini berfungsi yang tak lain dan tak bukan adalahgua memermudah penerjemahan bahasa halaman blog ke bahasa lainnya tanpa perlu copas artikel dan menerjemahkan secara manual di Google Translate sendiri.

Dampak Kecepatan Blog Pada Pagespeed

Memasang widget pihak ke 3 memang terkadang bisa menjadi boomerang, karena memang mereka menggunakan javascript eksternal yang akan mempengaruhi kecepatan loading blog/web. Belum lagi juga terdapat kode css eksternal yang makin memperparah loading blog karena harus memuat kode-kode yang panjang. Memang keihatannya pendek karena mereka berupa url. Tapi jika kita lihat ke dalam, kode-kode tersebut sangat panjang, apalagi juga ada yang menyematkan kode css di dalamnya.

Tetapi untuk mengurangi dampak pemberatan loading blog, script tutorial memasang widget kali ini sudah saya modifikasi sedikit, saya ambil kode yang diperlukan saja dan saya hosting ke github. Kode ini juga sudah saya beri fitur penundaan pemuatan dengan script defer.js.

Maksudnya diberi fitur penundaan pemuatan dengan defer.js adalah script baru akan bekerja setelah pengunjung/user melakukan scroll pada halaman blog/web.

Baiklah/ saya rasa kalian sudah paham. Sekarang kita akan lanjut ke tutorialnya. Jika kaliana ingin melihat demonya terlebih dahulu bisa klik tombol demo di bawah ini.

PENTING!
Biasakan untuk mem-backup Tema kalian sebelum melakukan pengeditan dengan cara klik TemaCadangkan

Tutorial Pemasangan Widget Google Translate Yang Ringan Pada Blog

Langkah 1. silahkan masuk pada Dasboard Blogger Kalian, kemudian pilih TemaEdit HTML.

Langkah 2. Salin kode berikut dan tempelkan kode tersebut tepat di atas kode ]]></b:skin>

Icon dari google translate ini juga sudah saya ubah dengan icon svg yang lebih ringan. Dan icon google translate yang asli sudah saya sembunyikan pada kode css ini.

/* Widget google translate by Siap Ngoding */
#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='&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:%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='&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:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><line data-name='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&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:%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='&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:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><line data-name='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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 posisinya kurang pas pada template kalian, kalian bisa sesuaikan pada margin-right:5px;, semakin besar nilainya maka icon akan semakin ke kiri.dan margin-top:15px, semakin besar nilainya maka icon akan semakin ke bawah. Lalu pada bagian %23d2d0d0 merupakan kode warna css yang sudah diparse. Bisa kalian ubah warnanya lalu tanda # tinggal diganti dengan kode %23.

Langkah 3. Lanjut dengan salin kode di bawah ini dan letakan pada bagian header atau terserah kalian mau ditempakan dimana.

<div id='google_translate_element'></div>

Langkah 4. Kemudian salin kode javascript berikut dan tempelkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script>/*<![CDATA[*/
// Google Translate By Siap Ngoding | https://www.siapngoding.my.id
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:&#39;id&#39;,includedLanguages:&#39;en,id,jw,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,sn&#39;,layout:google.translate.TranslateElement.InlineLayout.SIMPLE},&#39;google_translate_element&#39;)}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});
</script>

Pada bagian yang saya tandai merupakan kode bahasa dari masing-masing negara. kalian bisa melihat daftar kode bahasa di bawah ini.

Daftar Kode Bahasa

Kode Bahasa
idIndonesia
jsJawa
suSunda
enEnglish
viVietnam
zh-CNChina (Aks. Sederhana)
zh-TWChina (Aks. Tradisional)
thThailand
ruRusia
msMelayu
koKorea
jaJepang
itItalia
hiHindi
frPrancis
esSpanyol
deJerman
arArab
psPashto
ptPortugis
hmnHmong
hrKroat
htKreol Haiti
huMagyar
yiYiddi
hyArmenia
yoYoruba
igIgbo
afAfrikans
isIslan
amAmhara
iwIbrani
azAzerbaijan
zuZulu
roRumania
cebCebuano
beBelarussia
bgBulgaria
rwKinyarwanda
bnBengali
bsBosnia
sdSindhi
kaGeorgia
siSinhala
skSlovakia
slSlovenia
smSamoa
snShona
soSomali
sqAlbania
caKatala
srSerb
kkKazak
stSesotho
kmKhmer
svSwensk
swSwahili
kuKurdi
coKorsika
taTamil
kyKirghiz
csCeko
teTelugu
tgTajik
laLatin
lbLuksemburg
cyWales
tkTurkmen
tlTagalog
daDenmark
ttTatar
ltLituania
lvLatvia
ugUyghur
ukUkraina
mgMalagasi
miMaori
urUrdu
mkMakedonia
hawHawaii
mlMalayalam
mnMongol
mrMarathi
uzUzbek
mtMalta
elYunani
eoEsperanto
myBurma
etEstonia
euBasque
neNepal
faFarsi
nlBelanda
noNorsk
fiFinlandia
nyChichewa
fyFrisia
gaGaelig
gdGaelik Skotlandia
glGalisia
xhXhosa
paPunjabi
haHausa
plPolandia
psPashto
ptPortugis
htKreol Haiti
isIslan
loLaos
orOdia (Oriya)
guGujarati
trTurki

Tutorial Khusus Template Median UI

Langkah 1. Salin kode css berikut dan tempelkan di atas kode ]]></b:skin>.

Langkah 2. Cari kode di bawah ini menggunakan CTRL + F.

<!--[ Profile button ]-->
   <label class='tPrfl tIc bIc' expr:aria-label='data:item' for='offPrf'><b:include name='profile-icon'/></label>
 </li>
</b:if>

Langkah 3. Jika kode tersebut sudah ketemu lanjut salin kode di bawah dan letakan tepat di bawah kode </b:if>.

<div class='tIc bIc' id='google_translate_element'/>

Langkah 4. Lanjut dengan salin kode berikut di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script>/*<![CDATA[*/
// Widget Goole Translate by Siap Ngoding | https://www.siapngoding.my.id
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:&#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>

Penutup

Sampai di sini kita sudah berhasil memasang widget google translate yang ringan pada blog. Semoga bermanfaat dan terimakasih.

Referensi:
www.kuymase.com

Mas Iwan
Mas Iwan Blog ini dibuat dengan tujuan untuk berbagi kepada semua orang yang membutuhkannya.

2 comments

Leave Comments on Topic. Always Use Polite Language
Comment Author Avatar
10 July, 2022 Delete
Makasih infonya kak
Comment Author Avatar
06 September, 2022 Delete
sama-sama
Checkout Form
Data Anda
CHECKOUT