🔔 Aktifkan notifikasi disini Google News

Cara Menambah Widget Google Translate Pada Template Median UI 1.5

Cara Menambah Widget Google Translate Pada Template Median UI Terbaru
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/translategoogle@main/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>
Cara Menambah Widget Google Translate Pada Template Median UI Terbaru

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'/>
Cara Menambah Widget Google Translate Pada Template Median UI Terbaru

13. Simpan Template

HASILNYA

Cara Menambah Widget Google Translate Pada Template Median UI Terbaru

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

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

27 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. Klau tambah bahasa tinggal ubah javascriptnya saja ya mas
    1. Iya mas, tinggal ubah javascript. Tambahkan koma dan kode bahasa.
    2. Ok sip,terimakasih infonya mas
    3. Sama-sama
  2. Kalau blog bule id diganti en ya hu?
    1. Iya benar.
  3. Hu, req cara ganti icon dark mode median v1.5 jadi seperti v1.4 soalnya tulisan dark/light nutupin icon translate 🙏
  4. versi 1.4 bisa ga min?

    1. Bisa
  5. mf kak, ini sy coba bbrpa kali kok mash sama blm bisa?
    1. Pakai Median UI versi berapa?
    2. 1.6
    3. Median UI 1.6 gak bisa kak. Beda kode templatenya dengan Median UI 1.5
  6. mau tanya mas, cara ganti warna logo translatenya itu gimn ya?
    1. Ubah kode color pada CSS google translate dengan kode warna yang diinginkan
  7. Kok gak work
    1. Tutorial ini khusus untuk Median UI 1.5. Jadi gak work pada Median UI 1.6
  8. cara ganti "indonesia" ke "indonesian" atau "inggris" ke "english" gimana ya mas?
    1. dan "pilih bahasa" jadi "choose a language"
    2. Tinggal ganti link javascript ini https://cdn.jsdelivr.net/gh/choipanwendy/translategoogle@main/translate.js Menjadi //translate.google.com/translate_a/element.js?cb=googleTranslateElementInit
    3. gokil, pro sekali mas wkwkwk. makasih banyak!
    4. Sama² 😁
  9. buat yang versi 1.6 dong min
  10. yah 1.6 ga bisa ya.. mau downgrade ke 1.5 juga dikacangin sama yg jual template
  11. Udh coba, dimedian 1,5 tapi icon di header jadi seperti kepotong kenapa ya min, boleh dibantu trimakasih
    1. Kepotong seperti apa? Bisa kirim screenshotnya gak kak
  12. Min mau tanya dimedian ui 1,5 agar di sebelah label kategori ada icon svgny gimna ya min??
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.