Langkah 1: Struktur HTML
1. HTML Dasar:
- Mulailah dengan struktur dasar HTML. Dalam contoh ini, `<html>`, `<body>`, dan beberapa elemen konten di dalamnya.
2. Wadah Google Translate:
- Tambahkan elemen `<div>` dengan `id="google_translate_element"`. Elemen ini akan diisi oleh widget Google Translate.
3. Konten yang Akan Diterjemahkan:
Tambahkan elemen konten yang ingin Anda terjemahkan, misalnya `<h1>` dalam `<div class="content">`.
Langkah 2: Menambahkan Skrip Google Translate
4. Fungsi Inisialisasi:
- Tambahkan fungsi `googleTranslateElementInit()` yang menginisialisasi widget Google Translate dengan bahasa yang ingin Anda sertakan.
5. Skrip Google Translate:
- Sertakan skrip dari Google yang memanggil fungsi inisialisasi setelah skrip dimuat.
Langkah 3: CSS untuk Menyesuaikan Tampilan
6. Gaya CSS:
- Tambahkan gaya CSS untuk menyembunyikan banner Google Translate, mengatur posisi body, dan menyesuaikan tampilan dropdown bahasa.
Berikut adalah kode lengkap dengan penjelasan setiap bagiannya:
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags dan konten head lainnya -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Translate Integration</title>
<!-- Tambahkan Skrip Google Translate -->
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
includedLanguages: 'en,id,zh-CN', // Bahasa yang disertakan
gaTrack: false // Nonaktifkan pelacakan Google Analytics
},
'google_translate_element'
);
}
</script>
<script type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- Tambahkan CSS untuk menyesuaikan tampilan -->
<style>
body {
top: 0px !important;
position: static !important;
}
.goog-te-banner-frame {
display: none !important;
}
.goog-te-combo {
width: 100%;
height: 40px;
border-radius: 5px;
}
.goog-te-gadget {
font-size: 0;
display: flex;
color: #040f1c00;
}
.goog-logo-link,
.goog-logo-link:link,
.goog-logo-link:visited,
.goog-logo-link:hover,
.goog-logo-link:active {
font-size: 10px;
font-weight: bold;
color: #040f1c00;
text-decoration: none;
visibility: hidden;
}
.VIpgJd-ZVi9od-l4eHX-hSRGPd {
display: none;
}
.VIpgJd-ZVi9od-ORHb-OEVmcd {
display: none !important;
}
</style>
</head>
<body>
<!-- Wadah Google Translate -->
<li class="google dropdown">
<div id="google_translate_element"></div>
</li>
<!-- Konten yang akan diterjemahkan -->
<div class="content">
<h1>This text will be translated</h1>
</div>
</body>
</html>
Penjelasan Kode
1. HTML Dasar:
html
<!DOCTYPE html>
<html lang="en">
- Menentukan dokumen HTML dengan bahasa default Inggris.
2. Meta Tags:
html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Translate Integration</title>
- Menambahkan pengaturan meta dasar seperti charset dan viewport.
3. Skrip Google Translate:
html
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
includedLanguages: 'en,id,zh-CN',
gaTrack: false
},
'google_translate_element'
);
}
</script>
<script type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
- Menginisialisasi widget Google Translate dan memuat skrip Google Translate.
4. CSS untuk Menyesuaikan Tampilan:
html
<style>
body {
top: 0px !important;
position: static !important;
}
.goog-te-banner-frame {
display: none !important;
}
.goog-te-combo {
width: 100%;
height: 40px;
border-radius: 5px;
}
.goog-te-gadget {
font-size: 0;
display: flex;
color: #040f1c00;
}
.goog-logo-link,
.goog-logo-link:link,
.goog-logo-link:visited,
.goog-logo-link:hover,
.goog-logo-link:active {
font-size: 10px;
font-weight: bold;
color: #040f1c00;
text-decoration: none;
visibility: hidden;
}
.VIpgJd-ZVi9od-l4eHX-hSRGPd {
display: none;
}
.VIpgJd-ZVi9od-ORHb-OEVmcd {
display: none !important;
}
</style>
- Menyembunyikan banner Google Translate dan menyesuaikan tampilan dropdown bahasa.
5. Wadah Google Translate:
html
<li class="google dropdown">
<div id="google_translate_element"></div>
</li>
- Elemen ini akan diisi oleh widget Google Translate.
6. Konten untuk Diterjemahkan:
html
<div class="content">
<h1>This text will be translated</h1>
</div>
- Konten yang akan diterjemahkan oleh Google Translate.
Dengan langkah-langkah ini , Anda dapat menambahkan fitur Google Translate ke situs web Anda, memungkinkan pengguna untuk menerjemahkan konten ke berbagai bahasa yang Anda pilih.
