🌍 Translate Halaman
<style>
.translate-box {
max-width: 900px;
margin: 20px auto;
padding: 10px;
text-align: center;
font-family: Arial, sans-serif;
}
.translate-title {
font-size: 18px;
margin-bottom: 10px;
font-weight: bold;
}
.translate-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.translate-btn {
text-decoration: none;
padding: 10px 14px;
border-radius: 8px;
background: #f1f1f1;
color: #333;
font-size: 14px;
transition: 0.3s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.translate-btn:hover {
background: #4CAF50;
color: #fff;
transform: scale(1.05);
}
</style>
<div class="translate-box">
<div class="translate-title">🌍 Translate Halaman</div>
<div class="translate-list">
<a class="translate-btn" href="#" data-lang="en">🇺🇸 English</a>
<a class="translate-btn" href="#" data-lang="ar">🇸🇦 Arabic</a>
<a class="translate-btn" href="#" data-lang="ja">🇯🇵 Japanese</a>
<a class="translate-btn" href="#" data-lang="ko">🇰🇷 Korean</a>
<a class="translate-btn" href="#" data-lang="zh-CN">🇨🇳 Chinese</a>
<a class="translate-btn" href="#" data-lang="fr">🇫🇷 French</a>
<a class="translate-btn" href="#" data-lang="de">🇩🇪 German</a>
<a class="translate-btn" href="#" data-lang="it">🇮🇹 Italian</a>
<a class="translate-btn" href="#" data-lang="pt">🇵🇹 Portuguese</a>
<a class="translate-btn" href="#" data-lang="ru">🇷🇺 Russian</a>
</div>
</div>
<script>
document.querySelectorAll('.translate-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
let lang = this.getAttribute('data-lang');
let url = encodeURIComponent(window.location.href);
window.open(`https://translate.google.com/translate?sl=id&tl=${lang}&u=${url}`, '_blank');
});
});
</script>
No comments:
Post a Comment